将多个事件绑定到侦听器(没有JQuery)?

2020/11/13 21:22 · javascript ·  · 0评论

在处理浏览器事件时,我已经开始为移动设备合并Safari的touchEvents。我发现addEventListeners与条件堆叠在一起。该项目不能使用JQuery。

标准事件侦听器:

/* option 1 */
window.addEventListener('mousemove', this.mouseMoveHandler, false);
window.addEventListener('touchmove', this.mouseMoveHandler, false);

/* option 2, only enables the required event */
var isTouchEnabled = window.Touch || false;
window.addEventListener(isTouchEnabled ? 'touchmove' : 'mousemove', this.mouseMoveHandler, false);

jQuerybind允许多个事件,如下所示:

$(window).bind('mousemove touchmove', function(e) {
    //do something;
});

有没有办法像JQuery示例中那样组合两个事件侦听器?例如:

window.addEventListener('mousemove touchmove', this.mouseMoveHandler, false);

任何建议或提示表示赞赏!

在POJS中,您一次添加一个侦听器。在同一元素上为两个不同的事件添加相同的侦听器并不常见。您可以编写自己的小函数来完成这项工作,例如:

/* Add one or more listeners to an element
** @param {DOMElement} element - DOM element to add listeners to
** @param {string} eventNames - space separated list of event names, e.g. 'click change'
** @param {Function} listener - function to attach for each event as a listener
*/
function addListenerMulti(element, eventNames, listener) {
  var events = eventNames.split(' ');
  for (var i=0, iLen=events.length; i<iLen; i++) {
    element.addEventListener(events[i], listener, false);
  }
}

addListenerMulti(window, 'mousemove touchmove', function(){…});

希望它能说明这个概念。

编辑2016-02-25

达格德的评论使我重新审视了这一点。我想现在可以在一个元素上为多个事件添加相同的侦听器,以覆盖正在使用的各种接口类型,这很普遍,而Isaac的答案很好地利用了内置方法来减少代码(尽管代码本身很少) ,不一定是奖金)。使用ECMAScript 2015扩展的箭头功能可提供:

function addListenerMulti(el, s, fn) {
  s.split(' ').forEach(e => el.addEventListener(e, fn, false));
}

类似的策略可以将相同的侦听器添加到多个元素,但是需要这样做可能是事件委派的指示器。

一些实现预期结果的紧凑语法,POJS:

   "mousemove touchmove".split(" ").forEach(function(e){
      window.addEventListener(e,mouseMoveHandler,false);
    });

清理以撒的答案:

['mousemove', 'touchmove'].forEach(function(e) {
  window.addEventListener(e, mouseMoveHandler);
});

编辑

ES6助手功能:

function addMultipleEventListener(element, events, handler) {
  events.forEach(e => element.addEventListener(e, handler))
}

为了我; 该代码可以正常工作,并且是使用相同(内联)函数处理多个事件的最短代码。

var eventList = ["change", "keyup", "paste", "input", "propertychange", "..."];
for(event of eventList) {
    element.addEventListener(event, function() {
        // your function body...
        console.log("you inserted things by paste or typing etc.");
    });
}

ES2015:

let el = document.getElementById("el");
let handler =()=> console.log("changed");
['change', 'keyup', 'cut'].forEach(event => el.addEventListener(event, handler));

我为您提供了一个更简单的解决方案:

window.onload = window.onresize = (event) => {
    //Your Code Here
}

我已经对其进行了测试,效果很好,从正面来看,它像这里的其他示例一样紧凑而简单。

AddEventListener采用一个简单的字符串表示event.type因此,您需要编写一个自定义函数来迭代多个事件。

这是在jQuery中通过使用.split(“”)进行处理,然后遍历列表以为每个设置eventListeners types

    // Add elem as a property of the handle function
    // This is to prevent a memory leak with non-native events in IE.
    eventHandle.elem = elem;

    // Handle multiple events separated by a space
    // jQuery(...).bind("mouseover mouseout", fn);
    types = types.split(" ");  

    var type, i = 0, namespaces;

    while ( (type = types[ i++ ]) ) {  <-- iterates thru 1 by 1

一种方法:

const troll = document.getElementById('troll');

['mousedown', 'mouseup'].forEach(type => {
	if (type === 'mousedown') {
		troll.addEventListener(type, () => console.log('Mouse is down'));
	}
        else if (type === 'mouseup') {
                troll.addEventListener(type, () => console.log('Mouse is up'));
        }
});
img {
  width: 100px;
  cursor: pointer;
}
<div id="troll">
  <img src="http://images.mmorpg.com/features/7909/images/Troll.png" alt="Troll">
</div>
本文地址:http://javascript.askforanswer.com/jiangduogeshijianbangdingdaozhentingqimeiyoujquery.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!