事件练习

var EventUtil = {
        addHandler: function (oElement, sEvent, fnHandler) {
            oElement.addEventListener ? oElement.addEventListener(sEvent, fnHandler, false) : oElement.attachEvent('on' + sEvent, fnHandler)
        },
        removeHandler: function (oElement, sEvent, fnHandler) {
            oElement.removeEventListener ? oElement.removeEventListener(sEvent, fnHandler, false) : oElement.detachEvent('on' + sEvent, fnHandler)
        },
        addLoadHandler: function (fnHandler) {
            // 初始化加载函数fnHandler
            this.addHandler(window, "load", fnHandler)
        }
    };


    EventUtil.addLoadHandler(function () {
        var btns = document.getElementsByTagName('button');

        function handler() {
            alert('事件绑定成功')
        }

        EventUtil.addHandler(btns[1],'click', function () {
            EventUtil.addHandler(btns[0], 'click', handler);
            btns[0].innerText = '我可以点击了'
        });

        EventUtil.addHandler(btns[2], 'click', function () {
            EventUtil.removeHandler(btns[0], 'click', handler);
            btns[0].innerText = '毫无用处的按钮'
        })
    })

• EventTarget.addEventListener将指定的监听器注册到EventTarget上, 当该对象出发指定的事件时, 指定的回调函数就会被执行, 主要好处是可以添加多个事件
  • 语法 target.addEventListener(type, listener, options);
    1. type表示监听事件类型的字符串
    2. listener当所监听的事件类型触发时，会接收到一个事件通知对象。listener 必须是一个实现了 EventListener接口的对象，或者是一个函数
    3. options一个布尔值, 如果布尔值为true, 表示在捕获阶段调用事件处理程序,如果是false, 表示在冒泡阶段调用事件处理程序. **最好只需要在事件到达目标之前截获它的时候将事件处理程序添加到捕获阶段
• removeEventListener通过addEventListener添加的事件处理程序只能通过removeEventListener()来移除名时传入的参数与添加处理程序时使用的参数相同, 这也意味着添加的匿名函数无法移除

attachEvent()和detachEvent()是IE中实现与DOM中类似的两个方法,这两个方法接收两个参数: 事件处理程序名称和事件处理程序函数