js中onclick 与 addEventListener的区别

文章类型:Javascript

发布者:hp

发布时间:2024-11-25

一：概述

onclick和addEventListener都可用于给元素绑定事件，实现相对于的功能，那么他们两者的区别是什么呢？

二：定义

（一）addEventListener

1：是 JavaScript 中的一个方法，允许开发人员动态地将事件处理程序附加到 HTML 元素

（二）onclick

1：是一个用于在用户点击特定元素（如按钮或链接）时执行 JavaScript 代码的 HTML 属性，直接在HTML标记定义内联事件处理

三：代码

1：addEventListener

<!DOCTYPE html>
<html>
<head>
  <title>onclick Example</title>
</head>
<body>

<button id="myButton">Click me</button>

<script>
  function handleClick() {
    alert("Button clicked!");
  }

  document.getElementById("myButton").onclick = handleClick;
</script>

</body>
</html>

2：onclick

<!DOCTYPE html>
<html>
<head>
  <title>onclick Example</title>
</head>
<body>

<button id="myButton">Click me</button>

<script>
  function handleClick() {
    alert("Button clicked!");
  }

  document.getElementById("myButton").onclick = handleClick;
</script>

</body>
</html>

四：区别

（一）语法上

1：addEventListener是一个方法，可以将多个事件处理程序添加到同一元素幕布灰覆盖现在处理程序

2：onclick只是HTML一个属性，可以直接嵌入到HTML元素中，只能有一个处理程序

（二）事件管理上

1：addEventListener适合添加多个事件监听器，并且能够在事件不同阶段进行处理，更加灵活

2：onclick只能为每个元素添加一个事件处理程序，不支持多个

（三）代码和科维护性上

1：addEventListener允许从HTML中分离，可以在外部脚本中定义事件程序

2：onclick和HTML代码混合在一起，可维护性差

（四）兼容性上

1：addEventListener符合现代事件处理标准

2：onclick是一个早期事件处理方式，某些情况有兼容性问题

五：总结

1.onclick事件在同一时间只能指向唯一对象

2.addEventListener给一个事件注册多个listener

3.addEventListener对任何DOM都是有效的，而onclick仅限于HTML

4.addEventListener可以控制listener的触发阶段，（捕获/冒泡）。对于多个相同的事件处理器，不会重复触发，不需要手动使用removeEventListener清除

六：拓展

（一）addEventListener的第三个参数

1：参数

type=>事件类型

listener =>事件的回调函数

useCapture=>可选参数对象

2：定义：addEventListener方法的第三个参数是一个布尔值，用于指定事件是在捕获阶段还是冒泡阶段触发。

修订前=>布尔值

修订后=>{}，对象

3：代码

el.addEventListener(type, listener[, useCapture])

el.addEventListener(type, listener, {
    capture: false, // === useCapture
    once: false,    // 是否设置单次监听,if true，会在调用后自动销毁listener
    passive: false  // 是否让 阻止默认行为(preventDefault()) 失效，if true, 意味着listener永远不远调用preventDefault方法
})
// 新增参数的三个属性，默认值都是 false。

4：总结

当它为布尔值时，表示 useCapture，useCapture 默认为 false，表示在事件冒泡阶段触发回调函数，为 true 表示在事件捕获阶段触发回调函数

当它为一个 options 对象时：capture 与 useCapture，作用相同，默认 false，once 表示该事件是否只触发一次，默认 false，passive 表示是否可调用 preventDefault()（阻止默认事件），默认 false

true 的触发顺序总是在 false 之前，如果多个均为 true，则外层的触发先于内层，如果多个均为 false，则内层的触发先于外层。

5：作用

决定事件在哪个阶段被触发。 false时：冒泡阶段触发 true：捕获阶段触发。默认值是 false，即冒泡触发

上一篇npm run xxx到底做了什么

下一篇js中的对象类别划分

目录收起↑