通常要给很多元素加上事件,比如点击等等。这时候可能就会写很多类型下面的语句
document.querySelector('#id').addEventListener()
可能你要绑定多少元素就会要写多少句,感觉十分的不好看。
如果在dom上直接写 onclick = xx函数。 然后js里只需要写上相关的回调函数,这些回调函数可以单独写在一个js文件里,感觉就会优雅一些。
不知道你们一般怎么写事件绑定的。 当然是在不用框架的前提下,不过用框架的话,写法和我上面提到的类似。
阿神2017-04-11 11:47:45
首先对于事件绑定,可以采用惰性加载的方法。
var addListener = null,
removeListener = null;
if (typeof window.addEventListener === 'function') {
addListener = function(el, type, fn) {
el.addEventListener(type, fn, false);
};
removeListener = function(el, type, fn) {
el.removeEventListener(type, fn, false);
};
} else if (typeof doc.attachEvent === 'function') { //'IE'
addListener = function(el, type, fn) {
el.attachEvent('on'+type, fn);
};
removeListener = function(el, type, fn) {
el.detachEvent('on'+type, fn);
};
} else {
addListener = function(el, type, fn) {
el['on'+type] = fn;
};
removeListener = function(el, type, fn) {
el['on'+type] = null;
};
}
这是能兼容绝大多浏览器的写法。
紧接着,你可以通过定义一个存储回调函数的对象EventHandler来把回调函数单独放在一个js文件里,比如
var EventHandler = {
confirmBtnClickEvent: function(e){}
...
};
最后,进行事件绑定时可以这么写:
addListener(dom, "click", EventHandler.confirmBtnClickEvent);
阿神2017-04-11 11:47:45
自己写工具库啊,就比如jQuery就是一个很好的工具库(这类我不喜欢叫它框架)
比如:
function $(ele, event, callback){
document.querySelector(ele).addEventListener(event,callback);
}
类似这样,之后你每次就只需要
$('#id','click',function(){ /*xxx*/ });
黄舟2017-04-11 11:47:45
关于题主的如何优雅的写代码绑定代码,可以参照jquery源码!至于在dom绑定onclick,不推荐!主要耦合性高,要是代码量多了,你需要绑定N个,难道交给后台帮你循环?onclick,事件单一,不支持多事件。注意页面的表现与行为分离,如果你用MVVM就当我没有说!