事件詳解 · web前端

[TOC] # 注冊/移除事件的三種方式 ~~~ var box = document.getElementById('box'); box.onclick = function () { console.log('點擊后執行'); }; box.onclick = null; box.addEventListener('click', eventCode, false); box.removeEventListener('click', eventCode, false); box.attachEvent('onclick', eventCode); box.detachEvent('onclick', eventCode); function eventCode() { console.log('點擊后執行'); } ~~~ ## 兼容代碼 ~~~ function addEventListener(element, type, fn) { if (element.addEventListener) { element.addEventListener(type, fn, false); } else if (element.attachEvent){ element.attachEvent('on' + type,fn); } else { element['on'+type] = fn; } } function removeEventListener(element, type, fn) { if (element.removeEventListener) { element.removeEventListener(type, fn, false); } else if (element.detachEvent) { element.detachEvent('on' + type, fn); } else { element['on'+type] = null; } } ~~~ # 事件的三個階段 **onclick只有事件冒泡** 代碼只能執行捕獲和冒泡其中一個 1. 捕獲階段 ![](https://img.kancloud.cn/41/a6/41a631feb8053542d3c7c1270ab47878_537x424.png) 2. 當前目標階段, 執行當前點擊元素 3. 冒泡階段 ![](https://img.kancloud.cn/2f/f8/2ff857fa9e24ea02d9683b6cdf105d65_516x415.png) ~~~ box.onclick 只有事件冒泡 attachEvent只有兩個參數，只有事件冒泡 ~~~ ~~~ addEventListener 的第三個參數為false的時候：事件冒泡,從最里面到外面點擊 addEventListener 的第三個參數為true的時候：事件捕獲,從外面點擊到里面 ~~~ ~~~ for (var i = 0; i < array.length; i++) { array[i].addEventListener('click', function () { console.log(this.id); }, true); } ~~~ ## 查看事件階段事件對象.eventPhase屬性可以查看事件觸發時所處的階段 `事件的階段：1 捕獲階段 2 目標階段 3 冒泡階段` # 事件委托利用父點擊, 子會捕獲來做 ~~~ <body> <ul id="ul"> <li>西施</li> <li>貂蟬</li> <li>昭君</li> <li>鳳姐</li> <li>芙蓉姐姐</li> </ul> </body> <script type="text/javascript"> //事件委托 var ul = document.getElementById('ul'); ul.onclick = function (e) { // e 事件參數（事件對象）: 當事件發生的時候，可以獲取一些和事件相關的數據 // 獲取到當前點擊的li // e.target 是真正觸發事件的對象 // console.log(e.target); // 讓當前點擊的li高亮顯示 e.target.style.backgroundColor = 'red'; } </script> ~~~ # 事件對象的屬性和方法 * event.type 獲取事件類型 * clientX/clientY 所有瀏覽器都支持，窗口位置 * pageX/pageY IE8以前不支持，頁面位置 * event.target || event.srcElement 用于獲取觸發事件的元素 * event.preventDefault() 取消默認行為 ~~~ var btn = document.getElementById('btn'); btn.onclick = function (e) { // DOM標準中，是給事件處理函數一個參數 // e就是事件對象 // 在老版本的IE中獲取事件對象的方式 window.event // // 處理事件對象的瀏覽器兼容性 e = e || window.event; // 事件的階段：1 捕獲階段 2 目標階段 3 冒泡階段了解 // console.log(e.eventPhase); // e.target 獲取真正觸發事件的對象瀏覽器兼容問題 // 在老版本的IE中 srcElement // 處理兼容性問題 var target = e.target || e.srcElement; console.log(e.target); // ul li里, 獲取的是li, 始終是點擊的那個 // // e.currentTarget 事件處理函數所屬的對象this console.log(e.currentTarget); // ul li里, ul注冊的,那就是ul 和this一樣 } ~~~ # 阻止事件傳播的方式 * 標準方式 event.stopPropagation(); * IE低版本 event.cancelBubble = true; 標準中已廢棄 # 常用的鼠標和鍵盤事件 * onmouseup 鼠標按鍵放開時觸發 * onmousedown 鼠標按鍵按下觸發 * onmousemove 鼠標移動觸發 * onkeyup 鍵盤按鍵按下觸發 * onkeydown 鍵盤按鍵抬起觸發 ~~~ box.onclick = fn; box.onmouseover = fn; box.onmouseout = fn; function fn(e) { e = e || window.event; switch (e.type) { case 'click': console.log('點擊box'); break; case 'mouseover': console.log('鼠標經過box'); break; case 'mouseout': console.log('鼠標離開box'); break; } } ~~~ ## mouseenter 和 mouseover的區別鼠標懸停事件 ~~~ <style> #box1 { width: 300px; height: 300px; background-color: red; } #box2 { width: 150px; height: 150px; background-color: blue; } </style> <body> <div id="box1"> <div id="box2"> </div> </div> <script> // mouseenter 和 mouseover的區別 var box1 = document.getElementById('box1'); var i = 0; // 觸發子元素的mouseover，會冒泡到父元素上 box1.onmouseover = function () { i++; console.log(i); } // 此事件不觸發事件冒泡 // box1.onmouseenter = function () { // i++; // console.log(i); // } </script> </body> ~~~ # 鼠標位置 ~~~ var box = document.getElementById('box'); box.onclick = function (e) { e = e || window.event; // 獲取的鼠標在瀏覽器的可視區域的坐標 // console.log(e.clientX); // console.log(e.clientY); // 鼠標在當前頁面的位置 console.log(e.pageX); console.log(e.pageY); } ~~~ ## 圖片跟著鼠標 ~~~ var ts = document.getElementById('ts'); document.onmousemove = function (e) { e = e || window.event; ts.style.left = e.pageX - 10 + 'px'; ts.style.top = e.pageY - 10 + 'px'; } ~~~ # 元素在頁面上位置 ~~~ var box = document.getElementById('box'); box.onclick = function (e) { console.log(this.offsetLeft); console.log(this.offsetTop); } ~~~ # 頁面滾動出去的距離 ~~~ // e.clientX/e.clientY 鼠標在可視區域中的位置 // e.pageX/e.pageY 鼠標在頁面中的位置有兼容性問題從IE9以后才支持 // pageY = clientY + 頁面滾動出去的距離 document.onclick = function () { // 輸出頁面滾動出去的距離 // console.log(document.body.scrollLeft); // console.log(document.body.scrollTop); // documentElement 文檔的根元素 html標簽 // console.log(document.documentElement); // 有些瀏覽器是使用這兩個屬性來獲取的 console.log(document.documentElement.scrollLeft); console.log(document.documentElement.scrollTop); } // 獲取頁面滾動距離的瀏覽器兼容性問題 // 獲取頁面滾動出去的距離 function getScroll() { var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft; var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; return { scrollLeft: scrollLeft, scrollTop: scrollTop } } ~~~ # 取消默認的執行行為 ~~~ <a id="link" href="http://www.baidu.com">baidu</a> var link = document.getElementById('link'); link.onclick = function (e) { alert('hello'); // 取消默認行為執行 // return false; // DOM標準方法 // e.preventDefault(); // IE的老版本，非標準方式 // e.returnValue = false; } ~~~