本文主要是介绍DOM操作-事件的绑定与解绑，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
首先要明确什么是事件？
元素在某种状态(浏览器实现的也叫事件触发)达成时，要执行的提前设定好的程序 我们称之为事件句柄。（比如：鼠标点击、键盘按键、鼠标轴滚动、鼠标拖拽等）。
事件的三要素：
事件源、事件类型(不同状态不同类型，如点击、鼠标滚动、按键) 、事件处理程序(handler)
事件的绑定：
事件绑定的方式：
1.行内式：绑定的全局的函数、方法等。可以绑定多个函数/handler
2.属性绑定：获取对象，再添加属性(如：box.onclick)。只能绑一个handler/函数，如果想要绑定多个函数，就在绑定的函数里面去调用两个函数
复习：添加属性的两种方式：
（1）例如：box["name"]=xx 就算原型上有这个属性，也会添加
（2）例如：box.name=xx ....不会重复添加
3.给元素添加一个事件监听器(尽量使用这一种方式)，可以绑定多个函数，可以重复绑定相同的函数。
语法：addEventListener(事件类型，执行程序，布尔值(有默认值))
以下代码都是用这个页面结构：
<body><div class="box" onclick="javaScript:console.log('行内式')"><span class="text">是否购买这件商品</span><!-- 直接写myconsole.mylog() 也可以 --><div class="son" id="son1" onclick="javaScript:myconsole.mylog(),fn()">是</div><div class="son" id="son2" onclick="fn()">否</div></div><div class="test"><div class="test1">11111</div><div class="test2">22222</div><div class="test3">33333</div></div> </body>根据这个演示效果：
行内式绑定方法： 在标签里面绑定事件
<div class="box" onclick="javaScript:console.log('行内式')"><span class="text">是否购买这件商品</span><!-- 直接写myconsole.mylog() 也可以 --><div class="son" id="son1" onclick="javaScript:myconsole.mylog(),fn()">是</div><div class="son" id="son2" onclick="fn()">否</div> </div><script>//window.myconsole.mylog()var myconsole = {mylog() { console.log("自己写的") }}//window.fnfunction fn(){console.log("自己写的222")} </script>注意：
1. 事件="javaScript: 自定义内容"：一般的标准的写法 前面写触发的事件，后面写事件的处理程序。
2.如果内容是函数：事件="函数"：简写形式
3.行内式事件里可以有多个函数：如：οnclick="javaScript:myconsole.mylog(),fn()"。函数与函数之间用逗号隔开。（也不一定是函数，可以是打印或者其他执行程序）。
4.行内式绑定方式可以绑定多个事件：但每个事件只能绑定一次。如：可以在行内绑定一个点击事件和一个滚动事件
属性绑定方式： 获取对象，再添加属性
<script>// 属性绑定var sure = document.querySelector("#son1")//点击事件：当我点击“是” 控制台返回文字sure.onclick = function () {console.log("您已购买此商品！")}//.语法：不会重复添加sure.onclick = function () {console.log("您已购买此商品！")} </script>结果：
分析：当我点击“是”，控制台给我执行事件处理程序，就返回了“您已购买此商品这句话”。虽然我写了两个一样的事件处理程序，但只执行了一个，说明：属性绑定方式不能重复绑定相同的事件处理程序。可以绑定不同类型的事件。综上，属性绑定方式同一种类型的事件只能绑定一次，可以绑定不同类型的事件。
给元素添加一个事件监听器(尽量使用这一种方式)： 可以绑定相同的函数
addEventListener(事件类型，执行程序，布尔值(有默认值))
<script>//给元素添加一个事件监听器var unsure=document.querySelector("#son2")//"click":监听用户的点击事件；前面有on 一般为属性，没有为事件unsure.addEventListener("click",function fm(){console.log("您已取消购买！")}) </script>结果：
分析：当我点击“否”，就会执行事件处理程序。
<script>var test1=document.querySelector(".test1")test1.addEventListener("click",function relog(){console.log("第一次打印")})test1.addEventListener("click",function relog(){console.log("第二次打印") }) </script>
分析：绑定监听器的方式可以重复绑定相同类型的事件，而不会覆盖。
可以对addEventListener()、attchEvent()做一个兼容：但是现在的IE没有了attchEvent这个功能了，所以运行它会报错
test1.attchEvent("click",function relog(){console.log("第三次打印") })//因为IE没有这个功能了，运行会报错。//attchEvent()只有两个参数，没有最后的那个捕获和冒泡//对attchEvent()和addEventListener()做一个兼容//如果前者为真就运行前面的那个，后面就不会运行，否则就运行第二个test1.adde=test1.addEventListener||test1.attchEventtest1.adde("click",function relog(){console.log("第三次打印") })
事件解绑：
<script>//属性绑定方式和行内绑定方式的解绑//但是行内式解绑是直接置空，一般是 void 0 那种var test2=document.querySelector(".test2")test2.onclick=function unbind(){test2.onclick=nullconsole.log("解绑test")}//监听器的解绑var test3=document.querySelector(".test3")test3.addEventListener("click",function unbind2(){console.log("监听器解绑test1")})function unbind3(){console.log("监听器解绑test2")}test3.addEventListener("click",unbind3)//removeEventListener(type:事件类型,需要移除的函数)test3.removeEventListener("click",unbind3) </script>属性绑定方式的解绑和行内式绑定方式的解绑是将属性的值置空或是返回void 0。
监听器绑定方式的解绑是调用removeEventListener函数，removeEventListener()的两个参数是：事件类型、需要解绑的函数。
这篇关于DOM操作-事件的绑定与解绑的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
