js元素事件的绑定与解绑,绑定事件的区别

时间:2022-06-30 04:34:29

一、元素事件的绑定

  1. 第一种方式
    /**
    *  @param {*} element 元素
    *  @param {*} type    事件类型
     * @param {*} fn      事件处理函数
    */
    element["on"+type]=fn;
    
    例如:
        element.onclick = function(){
              console.log("我是element元素的点击事件");  
        }
  2. 第二种方式
    /**
     * 为任意元素绑定任意事件
     * @param {*} element 元素
     * @param {*} type    事件类型
     * @param {*} fn      事件处理函数
     */
    element.addEventListener(type,fn,false);
    例如:
        element.addEventListener('click',function(){
                console.log("我是element元素的点击事件");
        },false);
  3.  

    第三种方式
    /**
     * 为任意元素绑定任意事件
     * @param {*} element 元素
     * @param {*} type    事件类型
     * @param {*} fn      事件处理函数
     */
    element.attachEvent(type,fn);
    例如:
        element.attachEvent('onclick',function(){
                console.log("我是element元素的点击事件");
        });
       

二、元素事件的解绑

  1. 第一种事件绑定方式的解绑
    /**
     * 为元素解绑事件
     * @param {*} element 标签元素
     * @param {*} type 事件类型
     */
    element["on"+type] = null;
    例如:
    element.onclick = null;  
  2. 第二种事件绑定方式的解绑
    /**
     * 为元素绑定事件
     * @param {*} element 元素
     * @param {*} type    事件类型
     * @param {*} fn      事件处理函数
     */
    element.removeEventListener(type,fn,false);
    例如:
       element.removeEventListener("click",function(){
            console.log("我是第二种事件绑定方式的解绑");
        },false);  
  3. 第三中事件绑定方式的解绑
    /**
     * 为元素解绑事件
     * @param {*} element 元素
     * @param {*} type    事件类型
     * @param {*} fn      事件处理函数
     */
    element.detachEvent(type,fn);
    例如:
    element.detachEvent("onclick",function(){
        console.log("我是第三种事件绑定方式的解绑事件");
    });

  注意:

  1. 用什么方式绑定事件,就用什么方式解绑事件;
  2. element.removeEventListener(type,fn,false) ====> element.addEventListener(type,fn,false)
    fn必须是命名函数,不能是匿名函数
    IE8不支持
    type是没有on的事件类型
    第三个参数是用来控制事件阶段的,false代表是冒泡阶段,true代表是捕获阶段
  3. element.detachEvent(type,fn) ====> element.attachEvent(type,fn)
    fn必须是命名函数,不能是匿名函数
    谷歌火狐不支持,IE8支持
    type是有on的事件类型 

  

三、绑定事件的区别

  addEventListener() 与 attachEvent() 
  
   相同点:
    都可以为元素绑定事件
   不同点:
    1.方法名不一样
    2.参数不一样,addEventListener接收三个参数,attachEvent接收两个参数
    3.addEventListener 谷歌,火狐,IE11支持,IE8不支持
       attachEvent 谷歌,火狐,IE11不支持,IE8支持
    4.this不同,addEventListener 中this是当前绑定事件的对象,attachEvent 中的this是window
    5.addEventListener 中事件的类型(事件的名字)没有on
       attachEvent 中时间的类型(事件的名字)有on