事件（绑定DOM0级事件，事件监听DOM2级事件，解除事件处理函数）

最新推荐文章于 2024-08-16 12:17:52 发布

巧克力很苦

最新推荐文章于 2024-08-16 12:17:52 发布

阅读量1.3k

点赞数 1

分类专栏： JavaScript 文章标签：事件（绑定DOM0级事件，事件监听DOM2级事件，解除事件处理函数）

本文链接：https://blog.csdn.net/qq_44607694/article/details/95318657

版权

JavaScript 专栏收录该内容

60 篇文章 5 订阅

订阅专栏

什么是事件？？？

事件是可以被 JavaScript 检测到的用户行为的。

事件的分类

鼠标事件
滚轮事件
键盘事件
资源事件
window事件

那么如何绑定一个点击事件？？（`DOM`0级事件）只能添加一个

通过等号赋值的方式绑定一个点击事件

       #box{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        <div id="box"></div>

 var oBox = document.getElementById('box');//通过id的方式获取元素
       //给oBox绑定了一个点击事件   等号右侧的是事件处理函数
        oBox.onclick = function(){
            console.log('我被点击了');
        };
        //通过等号赋值把事件函数赋值给了oBox的onclick属性

点击鼠标左键触发了五次我被点击了在这里插入图片描述

那么怎么验证通过等号赋值把事件函数赋值给了oBox的onclick属性？？

 var oBox = document.getElementById('box');
        oBox.onclick = function(){
            console.log('我被点击了');
        };
        console.dir(oBox);//没有赋值onclick结果是null

console.dir() 可以显示一个对象所有的属性和方法。
oBox属性上的onclick属性：后面是事件函数在这里插入图片描述
oBox属性上的onclick属性：后面没有赋值事件函数

通过等号赋值的方式给元素绑定的一个点击事件，等号后面的是事件函数。

直接在HTML标签上绑定onclick点击事件（缺点：会造成HTML和JS的代码混乱）不符合表现形式分离的理念（不建议用）

       #box{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
         <div id="box" onclick="heaven()"></div><!-- 必须加() -->
         <!--也是相当于个id="box"绑了一个点击事件,heaven是函数表达式名字加上()执行函数-->

 var oBox = document.getElementById('box');
        function heaven (){
             console.log('我被点击了');
        };

在这里插入图片描述
那么这种方法有没有赋值给了oBox的onclick属性呢？？

<div id="box" onclick="heaven()"></div>
    var oBox = document.getElementById('box');
        function heaven (){
             console.log('我被点击了');
        };

能通过直接在HTML标签上绑定onclick实现点击事件的在这里插入图片描述

那么我们可以把onclick上的函数打印出来

<div id="box" onclick="heaven()"></div>
var oBox = document.getElementById('box');
        function heaven (){
             console.log('我被点击了');
        };
        console.log(oBox.onclick);//打印当前的onclick里面的函数

在这里插入图片描述
通过直接在HTML标签上直接写一个onclick属性，等号右边的代码会写在原生JS中的一个叫
onclick函数当中

那么一个dom元素可以绑定多个事件处理函数吗？？

 var oBox = document.getElementById('box');
        oBox.onclick = function(){
            console.log('我被点击了');
        };
        oBox.onclick = function(){
            console.log('heaven');
        };

那么后面赋值的函数肯定把前面赋值的函数给覆盖掉在这里插入图片描述
看oBox里面的onclick属性里面是什么

一个dom对象只能绑定一个事件处理函数

通过事件绑定的形式 dom元素只能有一个事件处理函数则这种形式叫做DOM0级事件（弊端只能绑定一个dom元素）

事件监听（`DOM2`级事件）可以添加多个【常用】

那怎么给oBox这个元素添加一个事件监听器呢？？？

给dom这个节点添加事件监听器

dom.addEventListener(事件字符串,回调函数（具名/匿名）,布尔值)IE8以上

 var oBox = document.getElementById('box');
        //给oBox这个节点添加事件监听器
        oBox.addEventListener('click',function(){//回调函数
             console.log('我被点击了');
        },false);//监听点击事件做的事情

在这里插入图片描述
那怎么让一个dom元素添加多个事件监听器呢

 var oBox = document.getElementById('box');
        oBox.addEventListener('click',function(){//'click':事件字符串
            console.log('我被点击了');
        },false);
        oBox.addEventListener('click',function(){//事件处理函数
            console.log('heaven');
        }, false);//click事件有多个事件处理函数
        //DOM2级事件可以给一个dom元素添加多个事件监听器

点击了2回在这里插入图片描述

通过事件监听的形式， dom元素可以有多个事件处理函数，则这种形式叫做DOM2级事件

那IE8以上版本的，事件监听器里面的回调函数this指向谁？？？

var oBox = document.getElementById('box');
         oBox.addEventListener('click',function(){
            console.log(this);
         },false);

点击了3回在这里插入图片描述

在IE8以上版本的浏览器addEventListener事件监听器，里面的回调函数内部的this指向自身

如何在在IE低版本给oBox这个节点添加事件监听器？？？

给dom这个节点添加事件监听器

dom.attachEvent(事件字符串,回调函数（具名/匿名）)IE8以下

var oBox = document.getElementById('box');
         oBox.attachEvent('onclick',function(){//添加事件监听器IE8以下
             console.log('heaven');
         });//事件字符串需要加on

点击了5回在这里插入图片描述

那IE低版本的，事件监听器里面的回调函数this指向谁？？？

var oBox = document.getElementById('box');
         oBox.attachEvent('onclick',function(){
            console.log(this);
         })

在这里插入图片描述
在IE低版本dom.attachEvent事件监听器，里面的回调函数内部的this指向window

解除事件处理函数

解除事件处理函数（DOM0级事件）

有的时候我们需要解除这个事件处理函数的，那个怎么办？？？

var oBox = document.getElementById('box');
        oBox.onclick = function(){
            console.log('我被点击了');
        };
        //让oBox解除事件处理函数（解除DOM0级事件）
        oBox.onclick = null;//改变onclick的值

在这里插入图片描述
怎么让oBox元素1000ms之后解除事件处理函数呢？？

var oBox = document.getElementById('box');
        oBox.onclick = function(){
            console.log('我被点击了');
        };
        //1000ms之后给oBox解除事件处理函数
        setTimeout(function(){
            oBox.onclick = null;
        },1000);

1000ms之前点击了6下（已经解除不能点击）在这里插入图片描述

解除事件处理函数（DOM2级事件）

给dom这个节点解除事件处理函数

dom.removeEventListener(事件字符串,回调函数（必须是具名）,布尔值)（IE8以上）

在DOM2级事件中，匿名函数不能解除监听器，那我们需要把匿名函数改为具名函数函数表达式，然后再解除事件处理函数。

有的时候我们需要解除这个事件处理函数的，那个怎么办？？？（有名函数）

var oBox = document.getElementById('box');
       oBox.addEventListener('click',auto,false);
       function auto(){
          console.log('我被点击了');
       };
       oBox.removeEventListener('click',auto,false);
       //让oBox解除事件处理函数（解除DOM2级事件）

在这里插入图片描述
怎么让oBox元素1000ms之后解除事件处理函数呢？？ （有名函数）

 var oBox = document.getElementById('box');
       oBox.addEventListener('click',auto,false);
       function auto (){
          console.log('我被点击了');
       };
       setTimeout(function(){
          oBox.removeEventListener('click',auto,false);
          //解除click事件，函数名auto；
       },1000);//1秒钟之后解除了click事件

1000ms之前点击了4下（已经解除不能点击）在这里插入图片描述

为什么匿名函数不能解除事件处理函数呢？？

那为什么，解除事件处理函数（DOM2级事件）中只能用具名的回调函数？？

因为：function函数是引用值，引用值操作的是地址。function(){}而匿名的回调函数他是能占据内存地址的但是操作不到地址，function auto (){}而具名的函数回调他能操作到本身地址的（因为也名字）也能占据内存

验证：arguments.callee是指向自身函数

验证：1

 var x = (function(){//匿名函数表达式
          return arguments.callee;
       })();//加上()执行

在这里插入图片描述
上面画白圈的地方是等于下面的函数的

验证： 2

function auto (){
         console.log(auto);
         console.log(arguments.callee);
       }
       auto();

在这里插入图片描述
console.log(auto)是完全等于 console.log(arguments.callee)的，那么这两个做=== 运算呢？？？

=== 判断两个数据是否全等：true全等，flase不全等

结果是true全等，说明了auto在内存中的地址和arguments.callee在内存中地址是一样的

结论：任何函数的arguments.callee 都指向自函数

那如何解绑匿名事件处理函数呢？？？（匿名函数）

var oBox = document.getElementById('box');//获取id元素
       oBox.addEventListener('click',function(){
             console.log('我被点击了');//打印我被点击了
             oBox.removeEventListener('click',arguments.callee,false);
             //arguments.callee指向自身函数
       },false);

JS是重上到下加载的，他是清除掉下面的事件函数而不是上面的在这里插入图片描述

怎么让oBox元素1000ms之后解除事件处理函数呢？？ （匿名函数）

 var oBox = document.getElementById('box');//获取id元素
       oBox.addEventListener('click',function(){
             var fn = arguments.callee;
             //arguments.callee 指向自身函数，这是才能指向上面的回调函数，先存储起来在使用。
             console.log('我被点击了');//打印
             setTimeout(function(){
                oBox.removeEventListener('click',fn,false);//清除事件处理函数
             },1000);//一秒之后清除事件处理函数
       },false)

1000ms之前点击了4下（已经解除不能点击）在这里插入图片描述

那IE8以下的浏览器该怎么事件处理函数？？

dom.detachEvent(事件字符串,回调函数（必须是具名）)（IE8以下）

解除具名函数回调

var oBox = document.getElementById('box');
      oBox.attachEvent('onclick',auto);
      function auto (){
        console.log('我被点击了');
      };
      //解除IE8以下具名函数
      oBox.detachEvent('onclick',auto);

解除IE8以下匿名函数

var oBox = document.getElementById('box');
       oBox.attachEvent('onclick',function(){
          console.log('我被点击了');//JS程序从上到下先打印在解除
          //解除IE8以下匿名函数
           oBox.detachEvent('onclick',arguments.callee);
       });

1000毫秒之后解除IE8以下匿名函数

 var oBox = document.getElementById('box');
       oBox.attachEvent('onclick',function(){
           var fn = arguments.callee;
           console.log('我被点击了');
           setTimeout(function(){
              oBox.detachEvent('onclick',fn);
           },1000);//1000毫秒之后解除匿名函数
       });

封装addEvent兼容函数

var oBox = document.getElementById('box');
  function addEvent(dom,type,callBack){
        if(dom.addEventListener){   //如果是谷歌
            dom.addEventListener(type,callBack)
        }else{       //如果是IE低版本
            dom.attachEvent('on'+type,function(){//这个匿名的回调函数this-->window
                callBack.call(dom);//修改callBack的this指向
            })
        }
    }
    addEvent(oBox,'click',function(){
        console.log('我被点击了')
    })