<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1 { width: 200px; height: 200px; background-color: bl ...
<!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 class="box1"> <div class="box2"> <div class="box3">
</div> </div> </div> </body>
</html>
