addEventListener和onclick有什么区别?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (275)

addEventListeneronclick有什么区别?

var h = document.getElementById("a");
h.onclick = dothing1;
h.addEventListener("click", dothing2);

上面的代码位于一个单独的.js文件中,它们都完美地工作。

提问于
用户回答回答于

据我所知,DOM“加载”事件仍然只能非常有限。这意味着它只会火了window objectimages<script>例如元素。直接onload分配也是如此。这两者之间没有技术差异。可能.onload =有更好的跨浏览器可用性。

用户回答回答于

根据MDN,差别如下:

addEventListener:

addEventListener()方法将指定的EventListener兼容对象添加到调用EventTarget的事件类型的事件侦听器列表中。事件目标可能是文档、文档本身、窗口或任何其他支持事件的对象(如XMLHttpRequest)中的一个元素。

onclick:

onclick属性返回当前元素上的Click事件处理程序代码。当使用单击事件触发操作时,还可以考虑将相同的操作添加到按键事件中,以允许不使用鼠标或触摸屏的人使用相同的操作。语法元素.onclick=FunctionRef;其中FunctionRef是函数-通常是在其他地方声明的函数的名称或函数表达式。有关详细信息,请参阅“JavaScript指南:函数”。

正如在以下代码中所看到的那样,在使用中也存在语法差异:

addEventListener:

// Function to change the content of t2
function modifyText() {
  var t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// add event listener to table
var el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

onclick:

function initElement() {
    var p = document.getElementById("foo");
    // NOTE: showAlert(); or showAlert(param); will NOT work here.
    // Must be a reference to a function name, not a function call.
    p.onclick = showAlert;
};

function showAlert(event) {
    alert("onclick Event detected!");
}

所属标签

可能回答问题的人

  • 嗨喽你好

    7 粉丝480 提问8 回答
  • uncle_light

    5 粉丝518 提问6 回答
  • 人生的旅途

    10 粉丝484 提问6 回答
  • 富有想象力的人

    3 粉丝0 提问6 回答

扫码关注云+社区

领取腾讯云代金券