HTML 元素的属性事件绑定\在内部如何工作？

Question

想了解一些关于HTML元素事件机制的详细知识。

例如，我们在 HTML 的事件属性中调用 javascript 方法。此事件属性如何在内部处理此事件。

Answer 1

首先，它是关于在浏览器中实现的 JavaScript API，而不是相反。虽然您可以使用onclick="doSomeStuff()"attribute（参见下面的示例）或addEventListenermethod，但现在所有方法都允许您将处理程序bind 处理到一个元素，但有一些小的区别。

方法 1 - 使用 onclick 属性定义您的按钮，然后定义处理程序

您可以像这样使用onclick 属性简单地将处理程序挂钩到您的HTMLElement：

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

这几乎是您需要了解的有关处理和委派事件的所有信息，但如果您不确定，请随时提出任何问题。