在使用浏览器事件时,我已经开始将Safari的touchEvents用于移动设备。我发现addEventListener
s正在堆积条件。这个项目不能使用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);
JQuery的bind
允许多个事件,如下所示:
$(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的简单字符串。所以你需要编写一个自定义函数来迭代多个事件。
这是通过使用.split(“”)在jQuery中处理,然后遍历列表以为每个types
设置eventListeners。
// 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>