DOM：事件-绑定与解绑

事件

事件,就是函数在某种状态下被调用.JS捕捉到的发生在网页上的行为,官方称为事件句柄,是交互体验的核心功能

事件的三要素:

1 事件源

2 事件类型（点中，点中不松开，鼠标滚动...）

click

3 事件处理程序handler

绑定事件

1.行内绑定方式

在标签行内 的事件值上写上标志"javaScript:后跟js代码"

<a href="javaScript:alert(666)">点我</a>
<a href="javaScript:void(0)">点我</a>
<button onclick="javaScript:alert(666)">点我</button>

2.元素属性绑定方式

ele.onxxx=function(event){}
//兼容性很好，但是一个元素的同一个时间上只能绑定一个处理程序
//句柄式写法，基本等同于写在HTML行间上

3.同元素多处理程序绑定方式1

obj.addEventListener(type,fn,false)
//IE9以下不兼容，可以为一个事件绑定多个处理程序
//第三个参数表示是否捕获阶段触发,跟冒泡没关系(笔试陷阱题)

4.同元素多处理程序绑定方式2

obj.attachEvent('on'+type,fn);
//IE专有( ie11例外)，一个事件同样可以绑定多个处理程序
// <meta http-equiv="X-UA-Compatible" content="IE=10" />，解决 IE11向后兼容 IE10的问题

为同一个元素绑定不同的事件

　　　　　　　box.addEventListener("click",function(){
                console.log(666662)
            })
            box.addEventListener("click",function(){
                console.log(666663)
            })

 

5.多元素同事件同处理程序绑定方式==>代理模式

​
box.onclick=function(e) {
    e.target
}
//父元素绑定事件  通过事件对象来区分用户触发的事件属于哪一个具体的对象

尽量使用第三种方式——addEventListener

 

*IE（低版本）了解

            box.attchEvent("click",function(){
                console.log(666663)
            })
            box.adde=box.addEventListener||box.attchEvent
            box.adde("click",function(){
                console.log(666663)
            })

 

 

事件解绑

1.行内和属性绑定的事件

ele.onclick=false/''/null;

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

ele.removeEventListener(type,fn,false);
ele.detachEvent("on"+type,fn);

 

总结:

            box.onclick=函数   box.onclick=null

            box.addEventListener  box.removeEventListener

注:上面绑事件方法2,3若绑定的是匿名函数，则永远无法解除