blocks|key|504284|text|我知道这是一个古老的问题，但我认为有些人可能会发现这种方法很有用；它可以应用于任何类似的重复代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|504285|ES6|504286|['click','ontouchstart'].forEach(+evt+=>+
++++element.addEventListener(evt,+dosomething,+false)
);|code-block|syntax|javascript|504287|ES5|504288|['click','ontouchstart'].forEach(+function(evt)+{
++++element.addEventListener(evt,+dosomething,+false);
});|504289|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|287444|text|您可以只定义一个函数并传递它。匿名函数没有任何特殊之处，所有函数都可以作为值传递。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|287445|var+elem+=+document.getElementById('first');

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

function+handler(event)+{
++++do_something();
}|code-block|syntax|javascript|287446|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|504243|text|除非您的do_something函数实际对任何给定的参数执行某些操作，否则您可以将其作为事件处理程序进行传递。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|504244|var+first+=+document.getElementById('first');
first.addEventListener('touchstart',+do_something,+false);
first.addEventListener('click',+do_something,+false);|code-block|syntax|javascript|504245|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|504755|text|对我来说，最简单的解决方案是将代码传递到一个单独的函数中，然后在事件侦听器中调用该函数，效果非常好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|504756|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|504757|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|287813|text|我有一个附加到原型上的小解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|287814|++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|287815|允许您为其提供字符串或数组。字符串可以用空格(‘')、逗号(’，')或分号(‘；’)分隔|287816|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|504415|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|504416|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|504417|504418|您应该使用e.stopPropagation()，否则，您的函数将在移动设备上触发两次|offset|length|style|CODE|504419|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|504614|text|我只是创建了这个函数(有意缩小)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|504615|((i,e,f)=>e.forEach(o=>i.addEventListener(o,f)))(element,+events,+handler)|code-block|syntax|javascript|504616|用法：|504617|((i,e,f)=>e.forEach(o=>i.addEventListener(o,f)))(element,+['click',+'touchstart'],+(event)+=>+{
++++//+function+body
});|504618|与其他方法的不同之处在于，处理函数只定义一次，然后传递给每个addEventListener。|offset|length|style|CODE|504619|编辑：|504620|添加一个非精简版本，使其更易于理解。缩小的版本只是为了被复制、粘贴和使用。|504621|((element,+event_names,+handler)+=>+{

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

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

++++//+function+body

});|504622|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|288113|text|下面这样的内容如何：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|288114|['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|288115|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|287957|text|半相关，但这是为了初始化每个元素特定的唯一事件侦听器。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|287958|您可以使用滑块实时显示值，也可以查看控制台。在<input>元素上，我有一个名为data-whatever的attr标记，因此如果需要，您可以自定义该数据。|offset|length|style|CODE|287959|​|287960|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|287961|.wrapper+{
++display:+flex;
}
span+{
++padding-right:+30px;
++margin-left:+5px;
}
*+{
++font-size:+12px
}|287962|<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>|287963|287964|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|288078|text|这是我的解决方案，我在其中处理我的工作流中的多个事件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|288079|​|288080|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|288081|<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>|288082|288083|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|504823|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|504824|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|288157|text|您可以简单地通过迭代Object来实现。这可以与单个或多个元素一起使用。这是一个示例：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|288158|const+ELEMENTS+=+{'click':+element1,+...};
for+(const+[key,+value]+of+Object.entries(ELEMENTS))+{
++++value.addEventListener(key,+()+=>+{
++++++++do_something();
++++});
}|code-block|syntax|javascript|288159|在添加事件时，如果key是事件类型，而value是元素，则可以编辑ELEMENTS，添加元素和事件类型。|288160|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>


blocks|key|287631|text|这个迷你javascript库(1.3KB)可以做所有这些事情|type|unstyled|depth|inlineStyleRanges|entityRanges|data|287632|https://github.com/Norair1997/norjs/|offset|length|287633|nor.event(["#first"],+["touchstart",+"click"],+[doSomething,+doSomething]);|code-block|syntax|javascript|287634|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>


<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();    });document.getElementById('first').a

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

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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