事件的绑定和解绑

事件

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

事件要素

三大事件要素：事件源、事件类型、事件处理程序（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