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); 

这仅仅是你需要知道的关于处理和委托的事件，但如果你不能确定的东西随便问任何一件事。