Javascript 向一个元素添加多个事件侦听器

所以我的困境是我不想写两次相同的代码。一次用于单击事件，另一次用于

touchstart

事件

以下是原始代码：

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

document.getElementById('first').addEventListener('click', function(event) {
    do_something(); 
    });

---

我怎样才能压缩这个？必须有一个更简单的方法

您可以定义一个函数并传递它。匿名函数在任何方面都不是特别的，所有函数都可以作为值传递

var elem = document.getElementById('first');

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

function handler(event) {
    do_something();
}

---

除非您的

do\u something

函数实际使用任何给定参数执行某些操作，否则您可以将其作为事件处理程序传递

var first = document.getElementById('first');
first.addEventListener('touchstart', do_something, false);
first.addEventListener('click', do_something, false);

---

对于大量事件，这可能会有所帮助：

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++) {
    element.addEventListener(myEvents[i], handler, false);
}

如果你想处理很多事件，并且每个侦听器都有不同的要求，你也可以这样做，而大多数人往往会忘记这一点

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);

2019年5月更新：

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 => el.addEventListener(eventName, eventHandler))

---

也许您可以使用以下帮助器函数：

// 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 ["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+=1){
    element.addEventListener(events[i],handlerFn,useCapture);
  }
}

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

// usage
addMultipleListeners(
    document.getElementById('first'),
    ['touchstart','click'],
    handler,
    false);

[数据操作]：悬停{
光标：指针；
}

悬停、单击或轻按
这也被处理过（在鼠标上方）

我知道这是一个老问题，但我想有些人可能会发现这种方法很有用；它可以应用于任何类似的重复代码：

ES6

ES5

---

这个小型javascript库（1.3KB）可以完成所有这些任务

document.getElementById（'first'）.addEventListener（'touchstart'，myFunction）；
document.getElementById（'first'）。addEventListener（'click'，myFunction）；
函数myFunction（e）{
e、 preventDefault（）；例如stopPropagation（））
做某事；
}

我有一个小型解决方案连接到原型上

  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);
  }
};

允许您为其指定字符串或数组。字符串可以用空格（“”）、逗号（“，”）或分号（“；”）分隔

用法：

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

与其他方法相比，处理函数只定义一次，然后传递给每个

addEventListener

编辑： 添加一个非精简版本以使其更易于理解。缩小版只是为了复制粘贴和使用

（（元素、事件名称、处理程序）=>{
事件名称。forEach（（事件名称）=>{
元素。addEventListener（事件名称，处理程序）
})
})（元素，['click'，'touchstart']，（事件）=>{
//功能体
});

半相关，但这用于初始化每个元素特定的唯一事件侦听器

您可以使用滑块实时显示值，或检查控制台。 在

元素上，我有一个名为

data which

的

attr

标记，因此如果需要，您可以自定义该数据

sliders=document.querySelectorAll（“输入”）；
sliders.forEach（项目=>{
item.addEventListener（'输入'，（e）=>{
log（`${item.getAttribute（“data whatever”）}是这个值：${e.target.value}`）；
item.nextElementSibling.textContent=e.target.value；
});
})

.wrapper{
显示器：flex；
}
跨度{
右侧填充：30px；
左边距：5px；
}
* {
字号：12px
}

50
大小


50
原创的


50
原创

对我来说，最简单的解决方案是将代码传递到一个单独的函数中，然后在事件侦听器中调用该函数，效果非常好

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
})

---

这是我的解决方案，我在其中处理工作流中的多个事件

设h2=document.querySelector（“h2”）；
函数addMultipleEvents（eventsArray、targetElem、handler）{
eventsArray.map（函数（事件）{
addEventListener（事件，处理程序，false）；
}
);
}
设计数器=0；
函数countP（）{
计数器++；
h2.innerHTML=计数器；
}
//魔法从这里开始。。。
添加多个事件（['click'，'mouseleave'，'mouseenter']，h2，countP）
多事件演示-如果单击、移开或在数字上输入鼠标，它将计数。。。
0
//捕获卷更新
var volEvents=“更改，输入”；
var volEventsArr=volEvents.split（“，”）；
对于（var i=0；i这样的东西怎么样：

// 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 ["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+=1){
    element.addEventListener(events[i],handlerFn,useCapture);
  }
}

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

// usage
addMultipleListeners(
    document.getElementById('first'),
    ['touchstart','click'],
    handler,
    false);

['focusout'，'keydown'].forEach（函数（evt）{
self.slave.addEventListener（evt，函数（事件）{
//这里的‘this’是给奴隶的，即‘self.slave’`
if（（event.type=='keydown'&&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'）；
}
}，假）；
});
//以上内容取代了：
/*self.slave.addEventListener（“focusout”，函数（事件）{}）
self.slave.addEventListener（“键控”，函数（事件）{
如果（event.which==27）{//Esc
}
})
*/
我只是觉得可能有一种更快的方法..比如：（'touchstart，click'，do_something，false）@Pedrosperança Nope。我同意，如果能够传递一组字符串，比如
['touchstart'，'click']，那就太好了
但是没有这样的东西。警告：事件在句柄函数中不可用。我修复了此错误，但如何定位特定的选择器？您可以使用类似于：document.querySelectorAll（选择器）。forEach（（元素）=>{…}）；当我尝试使用此函数时，我在您编写“dosomething”的地方编写函数加载页面时激发。这是为什么？即使整行是：
burgerElement.addEventListener（event，alertFunction（），false）
而“burgerElement”是
var burgerElement=document.querySelector（'.burger'）；
您正在执行alertFunction（），并分配该函数的返回值（未定义）到事件处理程序。不执行函数（使用（）），只需将函数名/引用传递给eventListener函数。请注意，在我的示例中，dosomething后面没有（）
  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);
  }
};

((i,e,f)=>e.forEach(o=>i.addEventListener(o,f)))(element, events, handler)

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

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
})

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