jquery中一個點選事件累計觸發問題詳解。
阿新 • • 發佈：2018-11-09
最近維護老的公司專案，jquery中事件累計觸發的bug是一個老生長談的問題，因此想要弄清楚就必須先弄清楚addEventListener和onclick系列方法的區別
W3C上原文如下
addEventListener is the way to register an event listener as specified in W3C DOM. Its benefits are as follows:
- It allows adding more than a single handler for an event. This is particularly useful for DHTML libraries or Mozilla
- extensions that need to work well even if other libraries/extensions are used.
- It gives you finer-grained control of the phase when the listener gets activated (capturing vs. bubbling)
- It works on any DOM element, not just HTML elements.
在一個元素上onclick事件只會觸發一次，不能疊加觸發，而addEventListener則不一樣，會多次註冊，然後等點選的時候觸發，上述問題的關鍵原因所在
demo如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style