js监听事件的绑定与移除

时间：2023-11-22 15:03:56

监听事件的绑定与移除主要是addEventListener和removeEventListener的运用。

addEventListener语法

element.addEventListener(type，handler，false/true)

type:事件类型

handler:事件执行触发的函数

false/true:false为冒泡/ture为捕获，参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

事件捕获：父级元素先触发，子集元素后触发；

事件冒泡：子集元素先触发，父级元素后触发；

一般的绑定事件，都是采用冒泡方式，也就是使用false

removeEventListener语法

element.removeEventListener(type，handler，false/true)

参数值含义和上述一样。

接下来用例子进一步理解监听事件的绑定与移除

例1：

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

 <input type="button" value="test1" id="btn1">

 <input type="button" value="test2" id="btn2">

 <script>

     var btn1=document.getElementById("btn1");/*实名函数*/

     var count=0;

     var handle1=function() {

         alert(count++);

         if (count == 3) {

             alert("事件结束")

             btn1.removeEventListener("click",handle1,false);

         }

     }

     btn1.addEventListener('click',handle1,false);

     var btn2=document.getElementById("btn2");/*匿名函数*/

     btn2.addEventListener("click",function(){

         alert(123);

         removeEventListener("click",function(){

             alert(123)

         },false)

     },false)

 </script>

 </body>

 </html>

通过匿名函数是无法消除监听事件，只有通过实名函数才能。

例2：利用库来处理事件的绑定和移除会更加方便

（1）js事件的绑定与移除库

 /**

  * Created by asus on 2016/11/1.

  */

 var EventUtil={

     /*检测绑定事件*/

     addHandler:function(element,type,handler){

         if(element.addEventListener){

             element.addEventListener(type,handler,false);

         }

         else if(element.attachEvent){

             element.attachEvent('on'+type,handler);

         }

         else{

             element["on"+type]=handler /*直接赋给事件*/

         }

     },

     /*通过removeHandler*/

     removeHandler:function(element,type,handler) {   /*Chrome*/

         if (element.removeEventListener)

             element.removeEventListener(type, handler, false);

         else if (element.deattachEvent) {               /*IE*/

             element.deattachEvent('on' + type, handler);

         }

         else {

             element["on" + type] = null;

             /*直接赋给事件*/

         }

     }

 };

（2）HTML

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script src="封装监听事件.js"></script>

 </head>

 <body>

 <input type="button" value="bangding" id="btn">

 <input type="button" value="yichu" id="btn1">

     <script type="text/javascript">

         var btn=document.getElementById("btn");

         var bangding=function(){

             alert("你好！")

             }

         EventUtil.addHandler(btn,"click",bangding);

         var btn1=document.getElementById("btn1");

         var yichu=function(){

            alert("你好已被移除！");

              EventUtil.removeHandler(btn,"click",bangding)

         }

         EventUtil.addHandler(btn1,"click",yichu)

     </script>

 </body>

 </html>

这就是简单的监听事件的绑定与移除。

相关文章