JS Dom事件绑定及解绑-蒲公英云

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