JS Dom事件绑定及解绑

痛定思痛。 2023-01-06 04:21 306阅读 0赞

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