【原】JavaScript元素事件的绑定与解绑

流楚丶格念 2022-01-14

展开全文

文章目录

绑定多个事件

1. 对象.addEventListener(“事件类型”,事件处理函数,false)——谷歌和火狐支持,IE8不支持

参数1:事件的类型—事件的名字,没有on
参数2:事件处理函数—函数(命名函数,匿名函数)
参数3:布尔类型,指定事件处理函数的时期或阶段-------先写false
（第三个参数后文事件冒泡时候再说，链接：https://blog.csdn.net/weixin_45525272/article/details/108142029）

  为同一个元素绑定多个相同的事件--
 my$("btn").addEventListener("click",function () {
   console.log("你好啊");
 },false);
 my$("btn").addEventListener("click",function () {
   console.log("你好牛啊");
 },false);
 my$("btn").addEventListener("click",function () {
   console.log("你好牛逼啊");
 },false);
 my$("btn").addEventListener("click",function () {
   console.log("你是好牛逼啊");
 },false);

2. 对象.attachEvent(“有on的事件类型”,事件处理函数)——谷歌不支持,火狐不支持,IE8支持

参数1:事件类型—事件名字，有on
参数2:事件处理函数—函数(命名函数,匿名函数)


 my$("btn").attachEvent("onclick",function () {
   console.log("小杨好帅哦1");
 });

 my$("btn").attachEvent("onclick",function () {
   console.log("小杨好帅哦2");
 });

 my$("btn").attachEvent("onclick",function () {
   console.log("小杨好帅哦3");
//  });

3. 绑定事件兼容代码

  //为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数
  function addEventListener(element,type,fn) {
    //判断浏览器是否支持这个方法
    if(element.addEventListener){
      element.addEventListener(type,fn,false);
    }else if(element.attachEvent){
      element.attachEvent("on"+type,fn);
    }else{
      element["on"+type]=fn;
    }
  }

  addEventListener(my$("btn"),"click",function () {
    console.log("你好啊");
  });
  addEventListener(my$("btn"),"click",function () {
    console.log("你好二啊");
  });
  addEventListener(my$("btn"),"click",function () {
    console.log("你好二虎啊");
  });

4.两种方法的区别

相同点: 都可以为元素绑定事件
不同点:

方法名不一样
参数个数不一样
addEventListener三个参数,
attachEvent两个参数
addEventListener 谷歌,火狐,IE11支持,IE8不支持
attachEvent 谷歌火狐不支持,IE11不支持,IE8支持
this不同,
addEventListener 中的this是当前绑定事件的对象
attachEvent中的this是window
addEventListener中事件的类型(事件的名字)没有on
attachEvent中的事件的类型(事件的名字)有on

事件解绑

注意:用什么方式绑定事件,就应该用对应的方式解绑事件

1.对象.on事件名字=null

 // 1.绑定事件
 my$("btn").onclick=function () {
   console.log("我很好");
 };
 my$("btn2").onclick=function () {
   // 2.解绑事件
   my$("btn").onclick=null;
 };

2. removeEventListener解绑事件

对象.addEventListener(“没有on的事件类型”,命名函数,false);—绑定事件
对象.removeEventListener(“没有on的事件类型”,函数名字,false);

 function f1() {
   console.log("第一个事件");
 }
 function f2() {
   console.log("第二个事件");
 }
 my$("btn").addEventListener("click",f1,false);
 my$("btn").addEventListener("click",f2,false);

 //点击第二个按钮把第一个按钮的第一个点击事件解绑
 my$("btn2").onclick=function () {
   //解绑事件的时候,需要在绑定事件的时候,使用命名函数
   my$("btn").removeEventListener("click",f1,false);
 };

3. detachEvent解绑事件

对象.attachEvent(“on事件类型”,命名函数);—绑定事件
对象.detachEvent(“on事件类型”,函数名字);


  function f1() {
    console.log("第一个事件");
  }
  function f2() {
    console.log("第二个事件");
  }
  my$("btn").attachEvent("onclick",f1);
  my$("btn").attachEvent("onclick",f2);

  my$("btn2").onclick=function () {
      my$("btn").detachEvent("onclick",f1);
  };

4. 解绑兼容性代码

   //绑定事件的兼容
  function addEventListener(element,type,fn) {
     if(element.addEventListener){
       element.addEventListener(type,fn,false);
     }else if(element.attachEvent){
       element.attachEvent("on"+type,fn);
     }else{
       element["on"+type]=fn;
     }
   }

   //解绑事件的兼容
   //为任意的一个元素,解绑对应的事件
   function removeEventListener(element,type,fnName) {
     if(element.removeEventListener){
       element.removeEventListener(type,fnName,false);
     }else if(element.detachEvent){
       element.detachEvent("on"+type,fnName);
     }else{
       element["on"+type]=null;
     }
   }

案例：

 function f1() {
    console.log("第一个事件");
  }
  function f2() {
    console.log("第二个事件");
  }
  addEventListener(my$("btn1"),"click",f1);
  addEventListener(my$("btn1"),"click",f2);
  my$("btn2").onclick=function () {
    removeEventListener(my$("btn1"),"click",f1);
  };

JavaScript switch加载多个事件

common.js

function my$(id) {
    return document.getElementById(id);
}

//设置任意的标签中间的任意文本内容
function setInnerText(element,text) {
    //判断浏览器是否支持这个属性
    if(typeof element.textContent =="undefined"){//不支持
        element.innerText=text;
    }else{//支持这个属性
        element.textContent=text;
    }
}

//获取任意标签中间的文本内容
function getInnerText(element) {
    if(typeof element.textContent=="undefined"){
        return element.innerText;
    }else{
        return element.textContent;
    }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<input type="button" value="小红帽" id="btn"/>
<script src="common.js"></script>
<script>
  //为同一个元素绑定多个不同的事件,指向相同的事件处理函数
  my$("btn").onclick = f1;
  my$("btn").onmouseover = f1;
  my$("btn").onmouseout = f1;
  function f1(e) {
    switch (e.type) {
      case "click":
        alert("好帅哦");
        break;
      case "mouseover":
        this.style.backgroundColor = "red";
        break;
      case "mouseout":
        this.style.backgroundColor = "green";
        break;
    }
  }

   // my$("btn").οnmοuseοver=function (e) {
   //   console.log(e);
   // };
</script>
</body>
</html>