綁定事件 · 前端菜鳥成長記

[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找到真正的目標 ```