JavaScript中，.click()和.onclick()有什么区别？

Question

什么是以下两者的区别：

document.getElementById("id").click();

并且

document.getElementById("id").onclick();

?

- user8476829

---

https://dev59.com/DVoU5IYBdhLWcg3w559R - codemax

@rene: 不，如果你仔细阅读那个的话不是这样的。 - T.J. Crowder

Answer 1

click 是 HTML 元素上的一个函数，可以调用它来触发点击处理程序：element.click();

onclick 是一个属性，反映了 onclick 属性，并允许您为元素附加“DOM0”处理程序，以响应点击事件：element.onclick = function() { /*...*/};（现代等效方法是 addEventListener("click", ...) [或在旧版 IE 上使用 attachEvent]）。如果您调用 onclick（element.onclick()），那么它将调用与其附加的函数 - 但不包括使用现代方法附加的处理程序。

例如，click 触发一个模拟点击；另一个允许您设置点击处理程序。（如果您调用 onclick，它只会调用通过旧的 DOM0 机制附加的处理程序。）

示例：

var btn = document.querySelector("input[type=button]");
// Add a modern handler to it
btn.addEventListener("click", function() {
  console.log("Modern handler called");
});
// Add an obsolete DOM0 handler to it
btn.onclick = function() {
  console.log("DOM0 handler called");
};
// Call `click`
console.log("Calling click():");
btn.click();
// Call `onclick` (which would be VERY unusual)
console.log("Calling onclick():");
btn.onclick();

<input type="button" value="Click Me">

- T.J. Crowder

---

onclick是一个属性，因此应该作为document.getElementById("id").onclick进行访问，对吗？document.getElementById("id").onclick()会调用返回的函数吗？尽管行为可能有所不同。 - Ajay Brahmakshatriya

@AjayBrahmakshatriya：是的，会的。我会澄清。 - T.J. Crowder

此外，在这两种情况下，“this” 不同，对吗？在“click（）”中，它将是侦听器附加的对象。在“onclick（）”中，它将是普通函数调用，并且“this”将从调用上下文继承。（我不确定这一点）。 - Ajay Brahmakshatriya

@AjayBrahmakshatriya：“这将是一个普通的函数调用，并且将从调用上下文继承。” 这不是 this 的工作方式。更多信息：https://dev59.com/zHA75IYBdhLWcg3wv70j （而且，如果被调用的函数没有被绑定或是箭头函数，那么 this 在两种情况下都是相同的。） - T.J. Crowder

谢谢！我对大小写不确定。 - Ajay Brahmakshatriya