如何更加优雅的给dom绑定事件

Question

通常要给很多元素加上事件，比如点击等等。这时候可能就会写很多类型下面的语句

document.querySelector('#id').addEventListener()

可能你要绑定多少元素就会要写多少句，感觉十分的不好看。
如果在dom上直接写 onclick = xx函数。 然后js里只需要写上相关的回调函数，这些回调函数可以单独写在一个js文件里，感觉就会优雅一些。

不知道你们一般怎么写事件绑定的。 当然是在不用框架的前提下，不过用框架的话，写法和我上面提到的类似。

Answer 1

首先对于事件绑定，可以采用惰性加载的方法。

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

Answer 2

自己写工具库啊，就比如jQuery就是一个很好的工具库(这类我不喜欢叫它框架)

比如：

function $(ele, event, callback){
    document.querySelector(ele).addEventListener(event,callback);
}

类似这样，之后你每次就只需要

$('#id','click',function(){ /*xxx*/ });

Answer 3

如果是同种类型的的绑定事件例如一个ul下面的li点击事件可以用事件委托，还有不会随着你li的dom改变而事件失效或是重叠。

Answer 4

关于题主的如何优雅的写代码绑定代码，可以参照jquery源码！至于在dom绑定onclick，不推荐！主要耦合性高，要是代码量多了，你需要绑定N个，难道交给后台帮你循环？onclick，事件单一，不支持多事件。注意页面的表现与行为分离，如果你用MVVM就当我没有说！