<!DOCTYPE html> <html>
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1 { width: 200px; height: 200px; background-color: black; }
.box2 { width: 100px; height: 100px; background-color: red; }
.box3 { width: 50px; height: 50px; background-color: blue; } </style> <script type="text/javascript"> //案例中點擊box3時：分別會出現以下情況
// 使用target會彈出三次box3 // 使用this會彈出box3 box2 box1(冒泡) window.onload = function () { var box1 = document.getElementsByClassName("box1")[0]; var box2 = document.getElementsByClassName("box2")[0]; var box3 = document.getElementsByClassName("box3")[0]; box1.onclick = function (event) { event = event || window.event; //估計是兼容性寫法 alert(event.target.className); //event.target指向的是被觸發事件（被點擊）的物件 // alert(this.className); //this指向的是事件系結的物件 } box2.onclick = function (event) { event = event || window.event; alert(event.target.className); // alert(this.className); } box3.onclick = function (event) { event = event || window.event; alert(event.target.className); // alert(this.className); } }
// 運行這個DEMO，在事件冒泡的背景下，點擊box3，event.target.className為box3，之后冒泡的事件彈出的資訊也為box3； // 這是因為event.target指向的是被觸發事件（被點擊）的物件（box3），僅通過box3觸發了一次事件（點擊），所以只彈出一次box3； // 而this.name則依次彈出的為box3，box3，box1，這是因為this指向的是事件系結的物件，事件冒泡中連續觸發了三次事件，這三次事件系結的物件都不同， // 簡單的說就是，你點擊了box3，那么e.target就是box3；并且由于你點擊了box3，通過點擊box3冒泡觸發了box1，box2， // 在box1和box2的事件中，e.target也是box3，但是this是誰，就和由誰觸發了事件無關了，比如，無論是box2，還是box3觸發了box1的事件，還是box1的事件根本沒有被觸發，box1的事件的this永遠都是box1，忠心耿耿
// ========================總結========================== // 1.this是Javascript語言的一個關鍵字，
// 2.this代表函式運行時，自動生成的一個內部物件，只能在函式內部使用，
// 3.event 物件代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、滑鼠的位置、滑鼠按鈕的狀態，
// 4.this和event.target的區別：
// js中事件是會冒泡的，所以this是可以變化的，但event.target不會變化（在事件觸發時，只傳遞當前event物件的參考），它永遠是直接接受事件的目標DOM元素；
// 另外，this和event.target都是dom物件，如果要使用jquey中的方法可以將他們轉換為jquery物件：$(this)和$(event.target);
</script> </head>
<body> <div > <div > <div >
</div> </div> </div> </body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/501288.html
標籤：JavaScript
上一篇：Vue生命周期鉤子
下一篇：Vue3系列9--插槽slot