JS Dom事件绑定及解绑

 1.行内式

            在标签中直接通过on+事件类型 属性 去绑定事件

  2.内联式

            （1）直接绑定匿名函数

            （2）先定义函数，再去绑定

 

  3.监听

            addEventListener

                语法：事件源.addEventListener("事件类型",事件处理函数);

                使用监听，可以给同一个事件类型绑定多个事件处理函数。

                多个事件处理函数执行顺序是按照绑定顺序来的

                先绑定先执行

                在IE低版本不支持

            attachEvent()

                IE低版本支持

                语法：事件源.attachEvent("on+事件类型",事件处理函数);

                多个事件处理函数的执行顺序是按照绑定顺序的倒序来的

                先绑定后执行

注册事件

eventTarget.addEventListener(type, listener[,useCapture])

• evenTarget 表示要绑定事件的DOM元素

• type 表示要绑定的事件，如："click"

• listener 表示要绑定的函数

• useCapture 可选参数，表示是否捕获过程

NOTE：useCapture 为设定是否为捕获过程，默认事件均为冒泡过程，只有 useCapture 为 true 时才会启用捕获过程。

// 获取元素
var elem = document.getElemenyById('id');

// 事件处理函数
var clickHandler = function(event) {
  // statements
};

// 注册事件
elem.addEventListener('click', clickHandler, false);

// 第二种方式，不建议使用
elem.onclick = clickHandler;
// 或者来弥补只可触发一个处理函数的缺陷
elem.onclick = function(){
  clickHandler();
  func();
  // 其他处理函数
};

取消事件

eventTarget.removeEventListener(type, listener[,useCapture]);

• evenTarget 表示要绑定事件的DOM元素

• type 表示要绑定的事件，如："click"

• listener 表示要绑定的函数

• useCapture 可选参数，表示是否捕获过程

// 获取元素
var elem = document.getElemenyById('id');

// 取消事件
elem.removeEventListener('click', clickHandler, false);

// 第二种方式。不建议使用
elem.onclick = null;

 

浏览器兼容型

以上均为 W3C定义的标准定义，但早期浏览器 IE8 及其以下版本，均没有采用标准的实现方式。不过这些低版本浏览器也提供了对于 DOM 事件的注册、取消以及触发的实现。

绑定兼容性写法：

 function f(event) {
            alert
        }
        // ele：触发事件的元素 type：事件类型 handler:事件处理函数
        function on(ele, type, handler) {
            if (ele.addEventListener) {
                ele.addEventListener(type, handler);
            } else {
                ele.attachEvent("on" + type, handler)
            }
        }

解除绑定兼容性写法：

 // ele：触发事件的元素 type：事件类型 handler:事件处理函数
        function j(ele, type, handler) {
            if (ele.removeEventlistener) {
                ele.removeEventlistener(type, handler);
            } else {
                ele.detachEvent("on" + type, handler)
            }
        }