绑定事件 · 前端菜鸟成长记

[TOC] ## 注册事件的三个方式 ### 1.带on的事件常用的带on的事件有onclick,onmourseover,onmouseout,onblur,onfocus，mousewheel等 ***** **注意** 对同一个按钮做多个点击事件的时候会有bug，不支持事件重写，先写的会被覆盖 ``` my$("btn").onclick = function () { console.log("ajdo"); }; ``` #### mousewheel事件（用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时，就会触发mousewheel事件） 1.1 “mousewheel” 事件中的 “event.wheelDelta” 属性值：返回的值，如果是正值说明滚轮是向上滚动，如果是负值说明滚轮是向下滚动；返回的值，均为 120 的倍数，即：幅度大小 = 返回的值 / 120。 2.2 “DOMMouseScroll” 事件中的 “event.detail” 属性值：返回的值，如果是负值说明滚轮是向上滚动（与 “event.wheelDelta” 正好相反），如果是正值说明滚轮是向下滚动；返回的值，均为 3 的倍数，即：幅度大小 = 返回的值 / ***** ### 2.addEventListener 格式：对象.addEventListener（“不带on的事件类型”，事件处理函数，false） **ie8不支持** true：事件捕获 (添加事件时一般用false) false：事件冒泡 ``` my$("btn").addEventListener("click",function () { console.log("第一个事件"); },false); ``` ### 3.attachEvent 格式：对象.attachEvent（“事件类型”，事件处理函数） **谷歌和火狐不支持不过在框架中已经做了兼容** ``` my$("btn").attachEvent("onclick",function () {//谷歌和火狐不支持 console.log("我是第一个点击事件");//审查元素会报错 }) ``` ## 事件的解绑方式对象使用什么方式绑定事件就用什么方式解绑事件，解绑后的事件不起作用 ### 1带on的事件解绑格式：事件源.on事件名字=事件处理函数--->绑定事件事件源.on事件名字=null; ``` my$("btn").onclick = function () { console.log("我是绑定事件"); }; my$("btn2").onclick = function () { my$("btn").onclick = null;/*使得绑定事件的值为空带on的事件*/ } ``` ### 2.removeEventListener 使用这个解绑事件时，对匿名函数是不起作用的。倘若绑定事件中使用了匿名函数，则需要将匿名函数变为命名函数才可以进行解绑格式：事件源.addEventListener("没有on的事件类型",命名函数,false);---绑定事件 ``` function f1() { console.log("第一个"); } function f2() { console.log("第二个"); } my$("btn").addEventListener("click",f1,false); my$("btn").addEventListener("click",f2,false); //点击第二个按钮把第一个按钮的第一个点击事件解绑 my$("btn2").onclick = function () { my$("btn").removeEventListener("click",f1,false); } ``` ### 3. detachEvent **IE8才支持** 格式：事件源.attachEvent("on事件类型",命名函数);---绑定事件事件源.detachEvent("on事件类型",函数名字); ``` function f1(){ console.log("nasl"); } my$("btn").attachEvent("onclick",f1);/*绑定事件 IE8可以用*/ my$("bnt2").onclick = function () { my$("btn").detachEvent("onclick",f1);/*解绑*/ } ``` ## 事件的三个阶段在JavaScript中，事件有以下三个阶段第一阶段：捕获阶段代表数字是1，从外到里执行第二阶段：目标阶段（执行当前点击的元素）代表数字是2，当前执行的元素第三阶段：冒泡阶段代表数字是三，从里到外 ***** eventPhase属性返回事件传播的当前阶段，返回的为1 2 3常量 1，代表捕获阶段 2，代表目标阶段，即当前被执行的元素 3，代表冒泡阶段 ``` <script> functionmy$(id){ returndocument.getElementById(id); } vararr\= \[my$('id1'),my$('id2'),my$('id3')\]; // 冒泡阶段执行的事件 for(vari\=0;i<arr.length;i++){ arr\[i\].addEventListener('click',function(e){ console.log(this.id+'\-----'+e.eventPhase) },false) } // 捕获阶段阶段执行的事件 for(varj\=0;i<arr.length;j++){ arr\[j\].addEventListener('click',function(e){ console.log(this.id+'\-----'+e.eventPhase) },ture) } </script> ``` ### 捕获阶段 ![](https://img.kancloud.cn/e1/13/e113dd0a93800870665bab08972adca3_575x357.png) ### 冒泡阶段 ![](https://img.kancloud.cn/19/40/1940d10eeb6f5c5149dc620335b2c200_564x350.png) 事件冒泡的条件：有盒子嵌套每一个盒子有相同的事件触发里面的盒子身上的事件，外面的盒子上面的事件也会被触发 ``` ~~~ <body> <div id="dv1"> <div id="dv2"> <div id="dv3"></div> </div> </div> </body> <script> my$("dv3").onclick = function () { console.log(this.id); }; my$("dv2").onclick = function () { console.log(this.id); }; my$("dv1").onclick = function () { console.log(this.id); }; </script> //小小的测试题 document.body.onclick = function () {//因为事件冒泡了，所有body也会被冒泡触发了。 console.log("看我body有没有被触发");/*body的高度是根据里面的盒子来决定的。*/ } ~~~ ``` ### 阻止事件冒泡 stopPropagation 阻止事件冒泡，谁要阻止就赋予谁 e.stopPropagation();/* 兼容谷歌和火狐*/ e.cancelBubble = true;/*兼容ie8 */ ***** (e--是event的简写，是当DOM 树中某个事件被触发的时候，会自动产生一个用来描述事件所有的相关信息的对象，这个对象就是event（事件对象）；可通过window.event/event来获取。非IE还可以通过函数传参的形式来使用，一般而言我们使用【形参e或eve】来代替使用；)） ***** ``` my$("dv3").onclick = function (e) { e.stopPropagation();/*阻止事件冒泡谁要阻止就给谁加兼容谷歌和火狐*/ e.cancelBubble = true;/*阻止事件冒泡 IE*/ console.log(this.id); }; ``` ## 事件委托 1、事件委托：原理就是事件冒泡。此处的事件委托是，当li被点击时，li并没有做事件处理，而是委托ul做了事件处理，ul事件中可以使用事件对象e获取target属性，完成事件处理。 2、事件对象（事件处理函数的参数e） ``` <ul id="ul"> <li>西施</li> <li>貂蝉</li> <li>昭君</li> <li>凤姐</li> <li>芙蓉姐姐</li> </ul> //事件冒泡的应用（事件委托） my$('ul').onclick = function (e) { //e是事件对象，通过事件对象可以获取到触发事件的真正的元素相关的信息 //e.target：获取真正触发事件的那个元素 var target = e.target; target.style.backgroundColor='lightblue'; } // 对li做点击事件的话需要循环五次，所以把事情委托给了ul,然后通过e.target找到真正的目标 ```