元素的绑定,解绑以及兼容代码

最新推荐文章于 2023-09-14 16:59:10 发布

Maple...Leaf

最新推荐文章于 2023-09-14 16:59:10 发布

阅读量174

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_45741441/article/details/104998340

版权

元素的绑定、解绑以及兼容代码

- 元素的绑定与解绑

元素的绑定与解绑

元素绑定的三种方法

1.对象.on事件名称 = 事件处理函数
此方法如果注册多个相同事件，前面注册的事件会被最后一个注册的事件覆盖
代码

document.getElementById("btn").oncilck = function(){}
//为id属性是btn的元素绑定了鼠标点击事件

2.对象.addEventListener(“没有on事件名称”，事件处理函数，false)代码

document.getElementById("btn").addEventListener("click",function(){},false)
//为id属性是btn的元素绑定了鼠标点击事件

3.对象.attachEvent

document.getElementById("btn").attachEvent("onclick",function(){})

attachEvent和addEventListener方法的区别

相同点：都可以为元素绑定事件
不同点：
1.参数个数不同

attachEvent("on"+type,function(){})
addEventListener(type,function(){},false)

2.attachEvent IE浏览器支持其他浏览器不支持
addEventListener 火狐、谷歌支持，IE不支持
3.this指向的事务不同
attachEvent指向window
addEventListener指向当前绑定的事件对象
4.事件名字不同
attachEvent事项名字有“on”
addEventListener事项名字没有“on”

移除绑定元素的三种方法

用什么方式绑定，就应该用对应的方式解绑
1.对象.on事件名称 = null
代码

//事件绑定
document.getElementById("btn").onclick = function(){};
//移除事件绑定
document.getElementById("btn").onclick = null;

2.removeEventListener
此事件绑定函数需要匿名函数（IE8不支持）
代码

function f1(){  
  console.log("匿名函数")
}
document.getElementById("btn").removeEventListener("click",f1,false)

3.detachEvent(IE8支持)

function f1(){
  console.log("匿名函数")
}
document.getElementById("btn").detachEvent("onclick",f1);

绑定移除的兼容代码

<body>
<input type="button" value="添加绑定" id="btn1" />
<input type="button" value="移除绑定" id="btn2" />

<script>
//绑定事件的兼容代码
function addEventListener(element,type,fn){//element是绑定事件元素，type是绑定事件类型，fn是事件处理函数
  if(element.addEventListener){//判断浏览器是否支持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){
  //fnName为命名函数的名称
  if(element.removeEventListener){
  //判断浏览器是否支持removeEventListener
    element.removeEventListener(type,fnName,false);
  }else if(element.detachEvent){
    element.detachEvent("on"+type,fnName);
  }else{
    element["on"+type] = null;
  }
}
function f1(){
  console.log("事件1");
}
function f2(){
  console.log("事件2");
}

//鼠标点击绑定第一个事件
addEventListener(document.getElementById("btn1"),"click",f1);
//鼠标点击绑定第二个事件
addEventListener(document.getElementById("btn1"),"click",f2);
//鼠标点击移除第一个绑定事件
document.getElementById("btn2").onclick = function(){
  removeEventListener(document.getElementById("btn1"),"click",f1);
}
</script>

</body>

运行结果
1.点击第一个按钮
在这里插入图片描述
2.点击第二个按钮

Maple...Leaf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
元素的绑定,解绑以及兼容代码

元素的绑定与解绑元素的绑定与解绑元素绑定的三种方法元素的绑定与解绑元素绑定的三种方法1.对象.on事件名称 = 事件处理函数此方法如果注册多个相同事件，前面注册的事件会被最后一个注册的事件覆盖代码document.getElementById("btn").oncilck = function(){}//为id属性是btn的元素绑定了鼠标点击事件2.对象.addEventListe...
复制链接

扫一扫