HTML元素如何點擊工作？

Question

我想知道一些關於HTML元素事件機制的詳細知識。

例如，如果我們使用JQuery事件，我們可以在JQuery源文件中找到事件綁定。就像在HTML元素內部綁定事件的方式一樣？

感謝您的提前。

Answer 1

首先，它是關於在瀏覽器中實現的JavaScript API而不是其他方式。儘管您可以使用onclick="doSomeStuff()"attribute（請參閱下面的示例）或addEventListenermethod，但現在所有方法都允許您將bind處理程序指向元素，但存在一些小差異。

方法1 - 定義與onclick屬性的按鈕，然後定義處理程序

你可以簡單地將一個處理器連接到您的HTMLElement像這樣，用onclick屬性：

<button id="myButton" onclick="doSomeStuff()" type="button"> 
 
    Click <span class="my-child-selector">ME</span> 
 
</button> 
 

 
<script> 
 
function doSomeStuff(){ 
 
    element.innerHTML = 'CLICKED ELEMENT'; 
 
} 
 
</script>

<script>標籤必須總是排在第二位，因爲我們不使用DOMContentLoaded事件（jQuery(document).ready(callback)）。請注意，我們無法使用此方法訪問event對象。

方法2 - 通過JavaScript定義onclick屬性

有時候我們這樣寫，這是一個好一點的方法：

<button id="myButton" type="button"> 
 
    Click <span class="my-child-selector">ME</span> 
 
</button> 
 

 
<script> 
 
    // elements 
 
    var element = document.getElementById('myButton'), 
 
    child = element.querySelector('.my-child-selector'); 
 

 
    function doSomeStuff(event) { 
 

 
    // we have access to the event object 
 
    // get to know the event target 
 
    var target = event.target; 
 

 
    // respond only when the button element is clicked 
 
    if (target === element) { 
 
     element.innerHTML = 'CLICKED ELEMENT'; 
 

 
     // or delegate to a child 
 
    } else if (target.parentNode === element) { 
 
     element.innerHTML = 'CLICKED CHILD'; 
 
    } 
 
    } 
 

 
    // add listener to your element 
 
    element.onclick = doSomeStuff; 
 

 
    // alternativelly you can also write an anonymous function 
 
    // element.onclick = function(event){ /* do the stuff with event object access*/ }; 
 
</script>

請注意，我們現在有機會到event對象，我們可以正確委託處理程序。

方法3 - 定義按鈕，並通過addEventListener

新的JavaScript API連接處理程序是一個英里性能更好的方式，更靈活，更容易維護，基本上最好的辦法：

<button id="myButton" type="button"> 
 
    Click <span class="my-child-selector">ME</span> 
 
</button> 
 

 
<script> 
 
    // elements 
 
    var element = document.getElementById('myButton'), 
 
    child = element.querySelector('.my-child-selector'); 
 

 
    function doSomeStuff(event) { 
 

 
    // we have access to the event object 
 
    // get to know the event target 
 
    var target = event.target; 
 

 
    // respond only when the button element is clicked 
 
    if (target === element) { 
 
     element.innerHTML = 'CLICKED ELEMENT'; 
 

 
     // or delegate to a child 
 
    } else if (target.parentNode === element) { 
 
     element.innerHTML = 'CLICKED CHILD'; 
 
    } 
 
    } 
 

 
    // add listener to your element 
 
    element.addEventListener('click', doSomeStuff, false); 
 
</script>

作爲此方法的替代方法，您還可以創建一個匿名函數作爲手對於獨特的用例，當你想要某個特定元素的特定行爲時。

// add listener to your element 
myUniqueElement.addEventListener('click', function (event){ 
    // do some stuff with access to event object 
}, false); 

這僅僅是你需要知道的關於處理和委託的事件，但如果你不能確定的東西隨便問任何一件事。