首页 > 其他分享> 文章详细

事件的绑定和解绑

2022-07-18 19:34:34 阅读：129 来源： 互联网

标签：box function console 和解绑定事件 click

事件

元素在某种状态（浏览器实现的也叫事件触发）达成时，要执行的提前设定好程序，又被称之为事件句柄

事件要素

三大事件要素：事件源、事件类型、事件处理程序（handler）

事件绑定方式

1.行内式：标签的属性值是事件，触发时执行代码，也就是在标签里面绑定事件

<div class="box" onclick="javaScript:console.log(66666)">
hello2
</div>

2.属性绑定：只能绑定一个handler

var box = document.querySelector(".box")
//获取classname为box的节点
box.onclick = function() {
console.log("你是帅哥/美女")
}
//给这个节点绑定一个点击事件，点击后会在控制台打印“你是帅哥/美女”

注意：一个属性只能绑定一个事件，如果绑定多个事件的话最后一个事件会覆盖前面的事件，导致前面的事件不生效

3.绑定时间监听器

box.addEventListener("click",function(){
console.log(“放假啦！！！”)
})
//给box这个节点绑定一个点击事件，控制台打印“放假了！！！”
box.attchEvent("click",function(){
console.log(“真的放假啦！！！”)
})
//这是老版本的IE浏览器的写法
box.adde=box.addEventListener||box.attchEvent
box.adde("click",function(){
console.log(666663)
})
//可以解决和旧版本的IE浏览器兼容问题，但是现在IE浏览器已经退休了，所以了解一下就好了

事件的解绑

1.行内和属性解绑事件

var box = document.querySelector(".box")
//获取绑定事件的节点
box.onclick=function(){
box.onclick=null;
}
//将点击事件置空就行了

2.移除对应元素的监听程序

 var box = document.querySelector(".box")
//还是先获取节点
function fn1 () {
console.log("真放假！！")
}
//写一个函数
box.addEventListener("click",fn1)
//先给box绑定名为fn1的监听程序
box.removeEventListener("click",fn1)
//给box解绑名字为fn1的监听程序

标签：box,function,console,和解,绑定,事件,click
来源： https://www.cnblogs.com/forever-ljf/p/16491734.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

事件的绑定和解绑