事件:元素在某种状态(浏览器的实现也叫事件触发)达成时,要执行的提前设定好的程序,我们称之为事件句柄
事件是与用户交互的一种常用手段
事件的三要数:事件源 事件类型 事件处理程序(handler)
事件的绑定方式:
1、行内式:写在标签的行内,其的属性值是事件触发时执行代码(按js脚本执行)
代码实例:
<div class="box" onclick="javaScript:console.log(66666)">
点我
</div>
其中触发的执行代码可以是函数的调用:
<div class="box" onclick="myconsole.mylog();fn()">
点我1
</div>
<script>
var myconsole = {
mylog: () => {console.log("我自己写的函数")}
}
function fn(){
console.log("我自己写的函数2")
}
</script>
2、属性绑定:只能绑一个事件处理程序
代码说明:
<div class="box">
点我
</div>
<script>
var box = document.querySelector(".box")
box.onclick = function() {
console.log("第一个事件")
}
box.onclick = function() {
console.log("第二个事件")
}
</script>
运行结果:
为什么只运行了第二个函数呢?
因为box点属性时,如果没有没有这个属性会添加并赋值,如果有了则覆盖。就跟对象赋值一个道理。
3、重点:尽量使用这种,可解决兼容性问题,它是一个异步非阻塞函数
给元素添加一个事件监听器:元素.addEventListener("事件类型","处理函数"),记住事件类型这里不用再写on。
一个元素可以绑定多个监听器。
<div class="box">
点我
</div>
<script>
var box = document.querySelector(".box")
box.addEventListener("click",function(){
console.log(111)
})
box.addEventListener("click",function(){
console.log(222)
})
</script>
运行结果:
事件的解绑方式:
对于行内绑定和属性绑定我们采用手动置空的方式解绑。
行内解绑:
<div class="box" onclick="javaScript:console.log(66666)">
点我
</div>
<script>
var box = document.querySelector(".box")
//onclick是box的行内属性,元素点属性即可取到
box.onclick=null
</script>
属性解绑:
<div class="box">
点我
</div>
<script>
var box = document.querySelector(".box")
box.onclick = function() {
//点击一次后就不能再点了
box.onclick=null
console.log("第一个事件")
}
</script>
对于监听器解绑有专用的方法——removeEventListener("事件类型","执行函数"),若绑定的是匿名函数,则永远无法解绑。
代码展示说明:
<div class="box">
点我
</div>
<script>
function fn1(){
console.log(111)
}
function fn2(){
console.log(222)
}
var box = document.querySelector(".box")
box.addEventListener("click",fn1)
box.addEventListener("click",fn2)
box.removeEventListener("click",fn1)
box.removeEventListener("click",fn2)
</script>