blocks|key|3778926|text|您可以只定义一个函数并传递它。匿名函数没有任何特殊之处，所有函数都可以作为值传递。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3778927|var+elem+=+document.getElementById('first');

elem.addEventListener('touchstart',+handler,+false);
elem.addEventListener('click',+handler,+false);

function+handler(event)+{
++++do_something();
}|code-block|syntax|javascript|3778928|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can just define a function and pass it. Anonymous functions are not special in any way, all functions can be passed around as values.</p>

<pre><code>var elem = document.getElementById('first');

elem.addEventListener('touchstart', handler, false);
elem.addEventListener('click', handler, false);

function handler(event) {
    do_something();
}
</code></pre>


blocks|key|3869390|text|除非您的do_something函数实际对任何给定的参数执行某些操作，否则您可以将其作为事件处理程序进行传递。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3869391|var+first+=+document.getElementById('first');
first.addEventListener('touchstart',+do_something,+false);
first.addEventListener('click',+do_something,+false);|code-block|syntax|javascript|3869392|entityMap^0|4|C|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>Unless your <code>do_something</code> function actually does something with any given arguments, you can just pass it as the event handler.</p>

<pre><code>var first = document.getElementById('first');
first.addEventListener('touchstart', do_something, false);
first.addEventListener('click', do_something, false);
</code></pre>


blocks|key|2125827|text|对于大量事件，这可能会有所帮助：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2125828|var+element+=+document.getElementById("myId");
var+myEvents+=+"click+touchstart+touchend".split("+");
var+handler+=+function+(e)+{
++++do+something
};

for+(var+i=0,+len+=+myEvents.length;+i+<+len;+i%2B%2B)+{
++++element.addEventListener(myEvents[i],+handler,+false);
}|code-block|syntax|javascript|2125829|2017年6月更新：|offset|length|style|BOLD|2125830|现在，新的语言特性得到了更广泛的应用，您可以简化添加共享一个侦听器的有限事件列表。|2125831|const+element+=+document.querySelector("#myId");

function+handleEvent(e)+{
++++//+do+something
}
//+I+prefer+string.split+because+it+makes+editing+the+event+list+slightly+easier

"click+touchstart+touchend+touchmove".split("+")
++++.map(name+=>+element.addEventListener(name,+handleEvent,+false));|2125832|如果你想处理很多事件，并且对每个监听器有不同的要求，你也可以使用pass+an+object，这是大多数人容易忘记的。|2125833|const+el+=+document.querySelector("#myId");

const+eventHandler+=+{
++++//+called+for+each+event+on+this+element
++++handleEvent(evt)+{
++++++++switch+(evt.type)+{
++++++++++++case+"click":
++++++++++++case+"touchstart":
++++++++++++++++//+click+and+touchstart+share+click+handler
++++++++++++++++this.handleClick(e);
++++++++++++++++break;
++++++++++++case+"touchend":
++++++++++++++++this.handleTouchend(e);
++++++++++++++++break;
++++++++++++default:
++++++++++++++++this.handleDefault(e);
++++++++}
++++},
++++handleClick(e)+{
++++++++//+do+something
++++},
++++handleTouchend(e)+{
++++++++//+do+something+different
++++},
++++handleDefault(e)+{
++++++++console.log("unhandled+event:+%25s",+e.type);
++++}
}

el.addEventListener(eventHandler);|2125834|2019年5月更新：|2125835|const+el+=+document.querySelector("#myId");

const+eventHandler+=+{
++++handlers:+{
++++++++click(e)+{
++++++++++++//+do+something
++++++++},
++++++++touchend(e)+{
++++++++++++//+do+something+different
++++++++},
++++++++default(e)+{
++++++++++++console.log("unhandled+event:+%25s",+e.type);
++++++++}
++++},
++++//+called+for+each+event+on+this+element
++++handleEvent(evt)+{
++++++++switch+(evt.type)+{
++++++++++++case+"click":
++++++++++++case+"touchstart":
++++++++++++++++//+click+and+touchstart+share+click+handler
++++++++++++++++this.handlers.click(e);
++++++++++++++++break;
++++++++++++case+"touchend":
++++++++++++++++this.handlers.touchend(e);
++++++++++++++++break;
++++++++++++default:
++++++++++++++++this.handlers.default(e);
++++++++}
++++}
}

Object.keys(eventHandler.handlers)
++++.map(eventName+=>+el.addEventListener(eventName,+eventHandler))|2125836|entityMap|0|LINK|mutability|MUTABLE|url|https://www.thecssninja.com/javascript/handleevent^0|0|0|7|3|0|0|0|W|E|0|0|0|7|3|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|18|8|@$I|19|J|1A|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|1B|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|1C|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|1D|8|@]|9|@$I|1E|J|1F|1|1G]]|A|$]]|$1|S|3|T|5|D|7|1H|8|@]|9|@]|A|$E|F]]|$1|U|3|V|5|6|7|1I|8|@$I|1J|J|1K|K|L]]|9|@]|A|$]]|$1|W|3|X|5|D|7|1L|8|@]|9|@]|A|$E|F]]|$1|Y|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15]]]]

<p>For large numbers of events this might help:</p>

<pre><code>var element = document.getElementById("myId");
var myEvents = "click touchstart touchend".split(" ");
var handler = function (e) {
    do something
};

for (var i=0, len = myEvents.length; i &lt; len; i++) {
    element.addEventListener(myEvents[i], handler, false);
}
</code></pre>

<p><strong>Update 06/2017:</strong></p>

<p>Now that new language features are more widely available you could simplify adding a limited list of events that share one listener.</p>

<pre><code>const element = document.querySelector("#myId");

function handleEvent(e) {
    // do something
}
// I prefer string.split because it makes editing the event list slightly easier

"click touchstart touchend touchmove".split(" ")
    .map(name =&gt; element.addEventListener(name, handleEvent, false));
</code></pre>

<p>If you want to handle lots of events and have different requirements per listener you can also <a href="https://www.thecssninja.com/javascript/handleevent" rel="nofollow noreferrer">pass an object</a> which most people tend to forget.</p>

<pre><code>const el = document.querySelector("#myId");

const eventHandler = {
    // called for each event on this element
    handleEvent(evt) {
        switch (evt.type) {
            case "click":
            case "touchstart":
                // click and touchstart share click handler
                this.handleClick(e);
                break;
            case "touchend":
                this.handleTouchend(e);
                break;
            default:
                this.handleDefault(e);
        }
    },
    handleClick(e) {
        // do something
    },
    handleTouchend(e) {
        // do something different
    },
    handleDefault(e) {
        console.log("unhandled event: %s", e.type);
    }
}

el.addEventListener(eventHandler);
</code></pre>

<p><strong>Update 05/2019:</strong></p>

<pre><code>const el = document.querySelector("#myId");

const eventHandler = {
    handlers: {
        click(e) {
            // do something
        },
        touchend(e) {
            // do something different
        },
        default(e) {
            console.log("unhandled event: %s", e.type);
        }
    },
    // called for each event on this element
    handleEvent(evt) {
        switch (evt.type) {
            case "click":
            case "touchstart":
                // click and touchstart share click handler
                this.handlers.click(e);
                break;
            case "touchend":
                this.handlers.touchend(e);
                break;
            default:
                this.handlers.default(e);
        }
    }
}

Object.keys(eventHandler.handlers)
    .map(eventName =&gt; el.addEventListener(eventName, eventHandler))
</code></pre>


blocks|key|2144200|text|也许你可以像这样使用一个辅助函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2144201|//+events+and+args+should+be+of+type+Array
function+addMultipleListeners(element,events,handler,useCapture,args){
++if+(!(events+instanceof+Array)){
++++throw+'addMultipleListeners:+'%2B
++++++++++'please+supply+an+array+of+eventstrings+'%2B
++++++++++'(like+["click","mouseover"])';
++}
++//create+a+wrapper+to+be+able+to+use+additional+arguments
++var+handlerFn+=+function(e){
++++handler.apply(this,+args+&&+args+instanceof+Array+?+args+:+[]);
++}
++for+(var+i=0;i<events.length;i%2B=1){
++++element.addEventListener(events[i],handlerFn,useCapture);
++}
}

function+handler(e)+{
++//+do+things
};

//+usage
addMultipleListeners(
++++document.getElementById('first'),
++++['touchstart','click'],
++++handler,
++++false);|code-block|syntax|javascript|2144202|编辑11月2020这个答案已经很古老了。现在我解决这个问题的方法是使用一个actions对象，其中为每个事件类型指定了处理程序，一个元素的data-attribute指示应该在它上执行哪个操作，以及一个通用的文档范围处理程序方法(所以是event+delegation)。|offset|length|style|BOLD|CODE|2144203|​|2144204|const+firstElemHandler+=+(elem,+evt)+=>
++elem.textContent+=+`You+${evt.type+===+"click"+?+"clicked"+:+"touched"}!`;
const+actions+=+{
++click:+{
++++firstElemHandler,
++},
++touchstart:+{
++++firstElemHandler,
++},
++mouseover:+{
++++firstElemHandler:+elem+=>+elem.textContent+=+"Now+...+click+me!",
++++outerHandling:+elem+=>+{
++++++console.clear();
++++++console.log(`Hi+from+outerHandling,+handle+time+${
++++++++new+Date().toLocaleTimeString()}`);
++++},
++}
};

Object.keys(actions).forEach(key+=>+document.addEventListener(key,+handle));

function+handle(evt)+{
++const+origin+=+evt.target.closest("[data-action]");
++return+origin+&&
++++actions[evt.type]+&&
++++actions[evt.type][origin.dataset.action]+&&
++++actions[evt.type][origin.dataset.action](origin,+evt)+%7C%7C
++++true;
}|2144205|[data-action]:hover+{
++cursor:+pointer;
}|2144206|<div+data-action="outerHandling">
++<div+id="first"+data-action="firstElemHandler">
++++<b>Hover,+click+or+tap</b>
++</div>
++this+is+handled+too+(on+mouse+over)
</div>|2144207|2144208|entityMap|0|LINK|mutability|MUTABLE|url|https://javascript.info/event-delegation^0|0|0|0|9|11|7|1X|E|3A|G|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|16|8|@$I|17|J|18|K|L]|$I|19|J|1A|K|M]|$I|1B|J|1C|K|M]]|9|@$I|1D|J|1E|1|1F]]|A|$]]|$1|N|3|O|5|6|7|1G|8|@]|9|@]|A|$]]|$1|P|3|Q|5|D|7|1H|8|@]|9|@]|A|$E|F]]|$1|R|3|S|5|D|7|1I|8|@]|9|@]|A|$E|F]]|$1|T|3|U|5|D|7|1J|8|@]|9|@]|A|$E|F]]|$1|V|3|O|5|6|7|1K|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]]]

<p>Maybe you can use a helper function like this:</p>
<pre><code>// events and args should be of type Array
function addMultipleListeners(element,events,handler,useCapture,args){
  if (!(events instanceof Array)){
    throw 'addMultipleListeners: '+
          'please supply an array of eventstrings '+
          '(like [&quot;click&quot;,&quot;mouseover&quot;])';
  }
  //create a wrapper to be able to use additional arguments
  var handlerFn = function(e){
    handler.apply(this, args &amp;&amp; args instanceof Array ? args : []);
  }
  for (var i=0;i&lt;events.length;i+=1){
    element.addEventListener(events[i],handlerFn,useCapture);
  }
}

function handler(e) {
  // do things
};

// usage
addMultipleListeners(
    document.getElementById('first'),
    ['touchstart','click'],
    handler,
    false);
</code></pre>
<p>[<strong>Edit nov. 2020</strong>] This answer is pretty old. The way I solve this nowadays is by using an <code>actions</code> object where handlers are specified per event type, a <code>data-attribute</code> for an element to indicate which action should be executed on it  and one generic document wide handler method (so <a href="https://javascript.info/event-delegation" rel="noreferrer">event delegation</a>).</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const firstElemHandler = (elem, evt) =&gt;
  elem.textContent = `You ${evt.type === "click" ? "clicked" : "touched"}!`;
const actions = {
  click: {
    firstElemHandler,
  },
  touchstart: {
    firstElemHandler,
  },
  mouseover: {
    firstElemHandler: elem =&gt; elem.textContent = "Now ... click me!",
    outerHandling: elem =&gt; {
      console.clear();
      console.log(`Hi from outerHandling, handle time ${
        new Date().toLocaleTimeString()}`);
    },
  }
};

Object.keys(actions).forEach(key =&gt; document.addEventListener(key, handle));

function handle(evt) {
  const origin = evt.target.closest("[data-action]");
  return origin &amp;&amp;
    actions[evt.type] &amp;&amp;
    actions[evt.type][origin.dataset.action] &amp;&amp;
    actions[evt.type][origin.dataset.action](origin, evt) ||
    true;
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>[data-action]:hover {
  cursor: pointer;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div data-action="outerHandling"&gt;
  &lt;div id="first" data-action="firstElemHandler"&gt;
    &lt;b&gt;Hover, click or tap&lt;/b&gt;
  &lt;/div&gt;
  this is handled too (on mouse over)
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|3779077|text|我知道这是一个古老的问题，但我认为有些人可能会发现这种方法很有用；它可以应用于任何类似的重复代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3779078|ES6|3779079|['click','ontouchstart'].forEach(+evt+=>+
++++element.addEventListener(evt,+dosomething,+false)
);|code-block|syntax|javascript|3779080|ES5|3779081|['click','ontouchstart'].forEach(+function(evt)+{
++++element.addEventListener(evt,+dosomething,+false);
});|3779082|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I know this is an old question, but I thought some might find this approach useful; it could be applied to any similarly repetitive code:</p>

<p>ES6</p>

<pre><code>['click','ontouchstart'].forEach( evt =&gt; 
    element.addEventListener(evt, dosomething, false)
);
</code></pre>

<p>ES5</p>

<pre><code>['click','ontouchstart'].forEach( function(evt) {
    element.addEventListener(evt, dosomething, false);
});
</code></pre>


blocks|key|2144242|text|这个迷你javascript库(1.3KB)可以做所有这些事情|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2144243|https://github.com/Norair1997/norjs/|offset|length|2144244|nor.event(["#first"],+["touchstart",+"click"],+[doSomething,+doSomething]);|code-block|syntax|javascript|2144245|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|10|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|C]]]]

<p>This mini javascript libary (1.3 KB) can do all these things</p>

<p><a href="https://github.com/Norair1997/norjs/" rel="nofollow noreferrer">https://github.com/Norair1997/norjs/</a>
</p>

<pre><code>nor.event(["#first"], ["touchstart", "click"], [doSomething, doSomething]);
</code></pre>


blocks|key|3869621|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3869622|document.getElementById('first').addEventListener('touchstart',myFunction);

document.getElementById('first').addEventListener('click',myFunction);
++++
function+myFunction(e){
++e.preventDefault();e.stopPropagation()
++do_something();
}++++|code-block|syntax|javascript|3869623|3869624|您应该使用e.stopPropagation()，否则，您的函数将在移动设备上触发两次|offset|length|style|CODE|3869625|entityMap^0|0|0|0|5|J|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|S|8|@$J|T|K|U|L|M]]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>document.getElementById('first').addEventListener('touchstart',myFunction);

document.getElementById('first').addEventListener('click',myFunction);
    
function myFunction(e){
  e.preventDefault();e.stopPropagation()
  do_something();
}    </code></pre>
</div>
</div>
</p>

<p>You should be using <code>e.stopPropagation()</code> because if not, your function will fired twice on mobile</p>


blocks|key|2144325|text|我有一个附加到原型上的小解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2144326|++EventTarget.prototype.addEventListeners+=+function(type,+listener,+options,extra)+{
++let+arr+=+type;
++if(typeof+type+==+'string'){
++++let+sp+=+type.split(/[\s,;]%2B/);
++++arr+=+sp;+++
++}
++for(let+a+of+arr){
++++this.addEventListener(a,listener,options,extra);
++}
};|code-block|syntax|javascript|2144327|允许您为其提供字符串或数组。字符串可以用空格(‘')、逗号(’，')或分号(‘；’)分隔|2144328|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I have a small solution that attaches to the prototype</p>

<pre><code>  EventTarget.prototype.addEventListeners = function(type, listener, options,extra) {
  let arr = type;
  if(typeof type == 'string'){
    let sp = type.split(/[\s,;]+/);
    arr = sp;   
  }
  for(let a of arr){
    this.addEventListener(a,listener,options,extra);
  }
};
</code></pre>

<p>Allows you to give it a string or Array. The string can be separated with a space(' '), a comma(',') OR a Semicolon(';') </p>


blocks|key|2125941|text|我只是创建了这个函数(有意缩小)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2125942|((i,e,f)=>e.forEach(o=>i.addEventListener(o,f)))(element,+events,+handler)|code-block|syntax|javascript|2125943|用法：|2125944|((i,e,f)=>e.forEach(o=>i.addEventListener(o,f)))(element,+['click',+'touchstart'],+(event)+=>+{
++++//+function+body
});|2125945|与其他方法的不同之处在于，处理函数只定义一次，然后传递给每个addEventListener。|offset|length|style|CODE|2125946|编辑：|2125947|添加一个非精简版本，使其更易于理解。缩小的版本只是为了被复制、粘贴和使用。|2125948|((element,+event_names,+handler)+=>+{

++++event_names.forEach(+(event_name)+=>+{
++++++++element.addEventListener(event_name,+handler)
++++})

})(element,+['click',+'touchstart'],+(event)+=>+{

++++//+function+body

});|2125949|entityMap^0|0|0|0|0|U|G|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|12|8|@$M|13|N|14|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|15|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|16|8|@]|9|@]|A|$]]|$1|U|3|V|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

<p>I just made this function (intentionally minified):</p>

<pre><code>((i,e,f)=&gt;e.forEach(o=&gt;i.addEventListener(o,f)))(element, events, handler)
</code></pre>

<p>Usage:</p>

<pre><code>((i,e,f)=&gt;e.forEach(o=&gt;i.addEventListener(o,f)))(element, ['click', 'touchstart'], (event) =&gt; {
    // function body
});
</code></pre>

<p>The difference compared to other approaches is that the handling function is defined only once and then passed to every <code>addEventListener</code>.</p>

<h3>EDIT:</h3>

<p>Adding a non-minified version to make it more comprehensible. The minified version was meant just to be copy-pasted and used.</p>

<pre class="lang-js prettyprint-override"><code>((element, event_names, handler) =&gt; {

    event_names.forEach( (event_name) =&gt; {
        element.addEventListener(event_name, handler)
    })

})(element, ['click', 'touchstart'], (event) =&gt; {

    // function body

});
</code></pre>


blocks|key|3779288|text|半相关，但这是为了初始化每个元素特定的唯一事件侦听器。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3779289|您可以使用滑块实时显示值，也可以查看控制台。在<input>元素上，我有一个名为data-whatever的attr标记，因此如果需要，您可以自定义该数据。|offset|length|style|CODE|3779290|​|3779291|sliders+=+document.querySelectorAll("input");
sliders.forEach(item=>+{
++item.addEventListener('input',+(e)+=>+{
++++console.log(`${item.getAttribute("data-whatever")}+is+this+value:+${e.target.value}`);
++++item.nextElementSibling.textContent+=+e.target.value;
++});
})|code-block|syntax|javascript|3779292|.wrapper+{
++display:+flex;
}
span+{
++padding-right:+30px;
++margin-left:+5px;
}
*+{
++font-size:+12px
}|3779293|<div+class="wrapper">
++<input+type="range"+min="1"+data-whatever="size"+max="800"+value="50"+id="sliderSize">
++<em>50</em>
++<span>Size</span>
++<br>
++<input+type="range"+min="1"+data-whatever="OriginY"+max="800"+value="50"+id="sliderOriginY">
++<em>50</em>
++<span>OriginY</span>
++<br>
++<input+type="range"+min="1"+data-whatever="OriginX"+max="800"+value="50"+id="sliderOriginX">
++<em>50</em>
++<span>OriginX</span>
</div>|3779294|3779295|entityMap^0|0|N|7|14|D|1I|4|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@$D|X|E|Y|F|G]|$D|Z|E|10|F|G]|$D|11|E|12|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|13|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|14|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|L|7|15|8|@]|9|@]|A|$M|N]]|$1|Q|3|R|5|L|7|16|8|@]|9|@]|A|$M|N]]|$1|S|3|I|5|6|7|17|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|U|$]]

<p>Semi-related, but this is for initializing one unique event listener specific per element.</p>

<p>You can use the slider to show the values in realtime, or check the console.
On the <code>&lt;input&gt;</code> element I have a <code>attr</code> tag called <code>data-whatever</code>, so you can customize that data if you want to.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>sliders = document.querySelectorAll("input");
sliders.forEach(item=&gt; {
  item.addEventListener('input', (e) =&gt; {
    console.log(`${item.getAttribute("data-whatever")} is this value: ${e.target.value}`);
    item.nextElementSibling.textContent = e.target.value;
  });
})</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
  display: flex;
}
span {
  padding-right: 30px;
  margin-left: 5px;
}
* {
  font-size: 12px
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
  &lt;input type="range" min="1" data-whatever="size" max="800" value="50" id="sliderSize"&gt;
  &lt;em&gt;50&lt;/em&gt;
  &lt;span&gt;Size&lt;/span&gt;
  &lt;br&gt;
  &lt;input type="range" min="1" data-whatever="OriginY" max="800" value="50" id="sliderOriginY"&gt;
  &lt;em&gt;50&lt;/em&gt;
  &lt;span&gt;OriginY&lt;/span&gt;
  &lt;br&gt;
  &lt;input type="range" min="1" data-whatever="OriginX" max="800" value="50" id="sliderOriginX"&gt;
  &lt;em&gt;50&lt;/em&gt;
  &lt;span&gt;OriginX&lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2126006|text|对我来说，最简单的解决方案是将代码传递到一个单独的函数中，然后在事件侦听器中调用该函数，效果非常好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2126007|function+somefunction()+{+..code+goes+here+..}

variable.addEventListener('keyup',+function()+{
+++somefunction();+//+calling+function+on+keyup+event
})

variable.addEventListener('keydown',+function()+{
+++somefunction();+//calling+function+on+keydown+event
})|code-block|syntax|javascript|2126008|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Simplest solution for me was passing the code into a separate function and then calling that function in an event listener, works like a charm.</p>

<pre><code>function somefunction() { ..code goes here ..}

variable.addEventListener('keyup', function() {
   somefunction(); // calling function on keyup event
})

variable.addEventListener('keydown', function() {
   somefunction(); //calling function on keydown event
})
</code></pre>


blocks|key|3869818|text|这是我的解决方案，我在其中处理我的工作流中的多个事件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3869819|​|3869820|let+h2+=+document.querySelector("h2");

function+addMultipleEvents(eventsArray,+targetElem,+handler)+{
++++++++eventsArray.map(function(event)+{
++++++++++++targetElem.addEventListener(event,+handler,+false);
++++++++}
++++);
}
let+counter+=+0;
function+countP()+{
++++counter%2B%2B;
++++h2.innerHTML+=+counter;
}

//+magic+starts+over+here...
addMultipleEvents(['click',+'mouseleave',+'mouseenter'],+h2,+countP);|code-block|syntax|javascript|3869821|<h1>MULTI+EVENTS+DEMO+-+If+you+click,+move+away+or+enter+the+mouse+on+the+number,+it+counts...</h1>

<h2+style="text-align:center;+font:+bold+3em+comic;+cursor:+pointer">0</h2>|3869822|3869823|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>This is my solution in which I deal with multiple events in my workflow.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let h2 = document.querySelector("h2");

function addMultipleEvents(eventsArray, targetElem, handler) {
        eventsArray.map(function(event) {
            targetElem.addEventListener(event, handler, false);
        }
    );
}
let counter = 0;
function countP() {
    counter++;
    h2.innerHTML = counter;
}

// magic starts over here...
addMultipleEvents(['click', 'mouseleave', 'mouseenter'], h2, countP);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;MULTI EVENTS DEMO - If you click, move away or enter the mouse on the number, it counts...&lt;/h1&gt;

&lt;h2 style="text-align:center; font: bold 3em comic; cursor: pointer"&gt;0&lt;/h2&gt;</code></pre>
</div>
</div>
</p>


blocks|key|3779370|text|//catch+volume+update
var+volEvents+=+"change,input";
var+volEventsArr+=+volEvents.split(",");
for(var+i+=+0;i<volknob.length;i%2B%2B)+{
++++for(var+k=0;k<volEventsArr.length;k%2B%2B)+{
++++volknob[i].addEventListener(volEventsArr[k],+function()+{
++++++++var+cfa+=+document.getElementsByClassName('watch_televised');
++++++++for+(var+j+=+0;+j<cfa.length;+j%2B%2B)+{
++++++++++++cfa[j].volume+=+this.value+/+100;
++++++++}
++++});
}
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3779371|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>//catch volume update
var volEvents = "change,input";
var volEventsArr = volEvents.split(",");
for(var i = 0;i&lt;volknob.length;i++) {
    for(var k=0;k&lt;volEventsArr.length;k++) {
    volknob[i].addEventListener(volEventsArr[k], function() {
        var cfa = document.getElementsByClassName('watch_televised');
        for (var j = 0; j&lt;cfa.length; j++) {
            cfa[j].volume = this.value / 100;
        }
    });
}
}
</code></pre>


blocks|key|3779373|text|下面这样的内容如何：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3779374|['focusout','keydown'].forEach(+function(evt)+{
++++++++self.slave.addEventListener(evt,+function(event)+{
++++++++++++//+Here+`this`+is+for+the+slave,+i.e.+`self.slave`
++++++++++++if+((event.type+===+'keydown'+&&+event.which+===+27)+%7C%7C+event.type+===+'focusout')+{
++++++++++++++++this.style.display+=+'none';
++++++++++++++++this.parentNode.querySelector('.master').style.display+=+'';
++++++++++++++++this.parentNode.querySelector('.master').value+=+this.value;
++++++++++++++++console.log('out');
++++++++++++}
++++++++},+false);
});

//+The+above+is+replacement+of:
+/*+++self.slave.addEventListener("focusout",+function(event)+{+})
++++++self.slave.addEventListener("keydown",+function(event)+{
+++++++++if+(event.which+===+27)+{++//+Esc
++++++++++++}
++++++})
*/|code-block|syntax|javascript|3779375|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>What about something like this:</p>

<pre class="lang-js prettyprint-override"><code>['focusout','keydown'].forEach( function(evt) {
        self.slave.addEventListener(evt, function(event) {
            // Here `this` is for the slave, i.e. `self.slave`
            if ((event.type === 'keydown' &amp;&amp; event.which === 27) || event.type === 'focusout') {
                this.style.display = 'none';
                this.parentNode.querySelector('.master').style.display = '';
                this.parentNode.querySelector('.master').value = this.value;
                console.log('out');
            }
        }, false);
});

// The above is replacement of:
 /*   self.slave.addEventListener("focusout", function(event) { })
      self.slave.addEventListener("keydown", function(event) {
         if (event.which === 27) {  // Esc
            }
      })
*/
</code></pre>


blocks|key|3869910|text|您可以简单地通过迭代Object来实现。这可以与单个或多个元素一起使用。这是一个示例：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3869911|const+ELEMENTS+=+{'click':+element1,+...};
for+(const+[key,+value]+of+Object.entries(ELEMENTS))+{
++++value.addEventListener(key,+()+=>+{
++++++++do_something();
++++});
}|code-block|syntax|javascript|3869912|在添加事件时，如果key是事件类型，而value是元素，则可以编辑ELEMENTS，添加元素和事件类型。|3869913|entityMap^0|A|6|0|0|9|3|J|5|X|8|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|N|$]]

<p>You can simply do it iterating an <code>Object</code>. This can work with a single or multiple elements. This is an example:</p>
<pre><code>const ELEMENTS = {'click': element1, ...};
for (const [key, value] of Object.entries(ELEMENTS)) {
    value.addEventListener(key, () =&gt; {
        do_something();
    });
}
</code></pre>
<p>When <code>key</code> is the type of event and <code>value</code> is the element when you are adding the event, so you can edit <code>ELEMENTS</code> adding your elements and the type of event.</p>


<p>So my dilemma is that I don't want to write the same code twice. Once for the click event and another for the <code>touchstart</code> event.</p>

<p>Here is the original code:</p>

<pre><code>document.getElementById('first').addEventListener('touchstart', function(event) {
    do_something();
    });

document.getElementById('first').addEventListener('click', function(event) {
    do_something(); 
    });
</code></pre>

<p>How can I compact this? There HAS to be a simpler way!</p>


adding multiple event listeners to one element

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

所以我的困境是，我不想把相同的代码写两次。一次用于click事件，另一次用于touchstart事件。以下是原始代码：document.getElementById('first').addEventListener('touchstart', function(event) {    do_something(); ...

问将多个事件侦听器添加到一个元素
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将多个事件侦听器添加到一个元素EN