JavaScript事件机制

[xchunzhao]

• JS事件执行顺序

  • a标签的href中的代码总是最后执行，最低的优先级。
  • 无论是 onclick 还是 addEventListener的执行顺序是按照绑定的顺序在执行，就是先绑定的就先执行。
  • 如果 onclick事件被重复绑定，则以最后一次的绑定所在的顺序为准。
  • 如果在DOM中直接使用onclick，并且没有覆盖，则onclick的绑定是早于addEventListener的。
  • 如果绑定多个addEventListener事件，在任意一个事件中stopPropagation();都会阻止事件的冒泡，但不会阻止后续事件的执行。

• 事件的触发有三个阶段

  • document 往事件触发地点，捕获前进，遇到相同注册事件立即触发执行
  • 到达事件位置，触发事件 如果该处既注册了冒泡事件，也注册了捕获事件， 按照注册顺序执行
  • 从事件触发地点往 document 方向，冒泡前进，遇到相同注册事件立即触发

误区
1.在同一个对象上注册事件，并不一定按照注册顺序执行。
这一点，从上面的例子可以看出，你随便打乱四个事件绑定的顺序，结果一般不变！出现这样结果的原因是存在捕获模式和冒泡模式。但是值得注意的是，之所以如此是因为事件目的地节点既绑定了冒泡事件也绑定了捕获事件，此时的执行顺序按照绑定的先后顺序执行（情况比较少见）。
2.event.stopPropagation();就是阻止事件的冒泡。
这个表述不能说他错误，但是是不完整的，他除了阻止事件的冒泡，还阻止事件的继续捕获，简而言之就是阻止事件的进一步传播。

• 事件捕获、事件冒泡

  • 事件捕获从最外层元素开始document，一直到最具体的元素。
  • 事件冒泡从最具体的元素开始，一直冒泡到最外层元素ducoment

• 事件委托

  • 当存在多个同级元素，需要为每个元素添加一个事件。写法会比较麻烦，可以通过事件冒泡的机制，在外层元素上加上事件，进行处理。