给DOM元素绑定事件

Posted by CodingWithAlice on July 1, 2021

给DOM元素绑定事件

1、利用 addEventListener 绑定【推荐】(DOM2)

  • 优点:『可以给同一个元素添加1个/多个事件
button.addEventListener('click', handleClick);

现代浏览器已经很少使用以下两种 DOM0 的绑定事件的写法了

2、利用 HTML 属性 - onclick (DOM0)

  • 注意:属性值为可执行代码,而不只是函数名
  • 缺点:一个元素只能添加一个事件
<!-- 内联,事件优先级最高 -->
<body onload="doSomething()">
<div onclick="console.log('触发事件')">

3、利用 DOM 属性(DOM0)

  • 注意:属性值指向函数即可,不需要手动调用执行
  • 缺点:一个元素只能添加一个事件
window.onload = doSomething;
button.onclick = function () {console.log('click');};