JS的DOM操作——事件

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

事件是与用户交互的一种常用手段

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