首页  >  问答  >  正文

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

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

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

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

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

伊谢尔伦伊谢尔伦2772 天前317

全部回复(4)我来回复

  • 阿神

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

    回复
    0
  • 阿神

    阿神2017-04-11 11:47:45

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

    比如:

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

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

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

    回复
    0
  • PHP中文网

    PHP中文网2017-04-11 11:47:45

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

    回复
    0
  • 黄舟

    黄舟2017-04-11 11:47:45

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

    回复
    0
  • 取消回复