Question

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

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

Answer 1

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

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

您可以使用HTMLElement属性将处理程序简单地挂钩到onclick {/ p>}：

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

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

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

1 个答案: