js進階 12-6 如何獲取正在發生事件的名字和是哪個元素在發生事件
一、總結
一句話總結：event.type 描述事件的類型。 event.target 觸發該事件的 DOM 元素。 event.currentTarget 在事件冒泡階段中的當前DOM元素,等同於'this'。
1、event.target和event.currentTarget的區別是什么？
target屬性的值是發生事件的那個元素，currentTarget是綁定事件的那個元素，相當於this
你給哪個元素設置了事件監聽，event.currentTarget始終返回的就是哪個元素
- event.target 觸發該事件的 DOM 元素。
- event.currentTarget 在事件冒泡階段中的當前DOM元素,等同於'this'
2、如何獲取正在發生事件的名字？
event的type屬性
22 $('#btn1').click(function(e){ 23 //event.type 獲取觸發事件名 24 //alert(e.type)
3、如何獲取是哪個元素在發生事件？、
target屬性的值是發生事件的那個元素，currentTarget是綁定事件的那個元素，相當於this
event.target 觸發該事件的 DOM 元素。
31 $('#div1').click(function(e){ 32 //event.target觸發該事件的 DOM 元素 33 alert(e.target.tagName) 34 //currentTarget表示綁定事件的元素 35 alert(e.currentTarget.tagName) 36 })
- event.target 觸發該事件的 DOM 元素。
- event.currentTarget 在事件冒泡階段中的當前DOM元素,等同於'this'
二、如何獲取正在發生事件的名字和是哪個元素在發生事件
1、事件對象
JavaScript在事件處理函數中默認傳遞了event對象，在入門視頻中我們已經詳細講解過事件對象。jQuery對JavaScript原有的事件對象進行封裝，解決了瀏覽器的兼容性問題，並且創建了一些新的屬性和方法，使我們使用起來更加方便。
event對象的屬性
- event.type 描述事件的類型。
- event.target 觸發該事件的 DOM 元素。
- event.currentTarget 在事件冒泡階段中的當前DOM元素,等同於'this'
2、代碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <style> 4 </style> 5 <head> 6 <meta charset="UTF-8"> 7 <title>演示文檔</title> 8 <script type="text/javascript" src="jquery.min.js"></script> 9 <style type="text/css"> 10 body{height: 3000px} 11 div{width: 150px;height: 100px;border:1px solid orange;position: fixed;left:150px;} 12 p{width: 50px;height:50px;background: green} 13 </style> 14 </style> 15 </head> 16 <body> 17 <h3>jQuery事件對象</h3> 18 <div id="div1"><p></p></div> 19 <input id="btn1" type="button" value="事件對象"> 20 <script type="text/javascript"> 21 $(function(){ 22 $('#btn1').click(function(e){ 23 //event.type 獲取觸發事件名 24 //alert(e.type) 25 26 //event.target觸發該事件的 DOM 元素 27 alert(e.target.tagName) 28 alert(e.currentTarget.tagName) 29 }) 30 31 $('#div1').click(function(e){ 32 //event.target觸發該事件的 DOM 元素 33 alert(e.target.tagName) 34 //currentTarget表示綁定事件的元素 35 alert(e.currentTarget.tagName) 36 }) 37 }) 38 </script> 39 </body> 40 </html>