为同一个元素绑定多个相同的事件

  1. element.addEventListener(event, function, useCapture)
  2. // event 必须 字符串，指定事件名, 不要使用 "on" 前缀
  3. // function 必须 指定要事件触发时执行的函数。
  4. // useCapture 可选 布尔值，指定事件是否在捕获或冒泡阶段执行。 true - 事件句柄在捕获阶段执行  false- false- 默认。事件句柄在冒泡阶段执行
  1. element.attachEvent(event,function);
  2. // event 有on前缀的事件名
  3. // function 指定要事件触发时执行的函数

解绑事件

  1. //  element.on事件名字=null;
  3. element.addEventListener("没有on的事件名字",命名函数,false);
  4. element.removeEventListener("没有on的事件名字",命名函数,false);
  6. element.attachEvent("有on事件名字",命名函数);
  7. element.detachEvent("有on事件名字",函数名字);

兼容代码

  1. // 绑定事件兼容代码
  2. function addEventListener(element, type, fn) {
  3.   if (element.addEventListener) {
  4.     element.addEventListener(type, fn, false);
  5.   } else if (element.attachEvent) {
  6.     element.attachEvent("on" + type, fn);
  7.   } else {
  8.     element["on" + type] = fn;
  9.   }
  10. }
  1. // 解绑事件兼容代码
  2. function removeEventListener(element, type, fn) {
  3.   if (element.removeEventListener) {
  4.     element.removeEventListener(type, fn, false);
  5.   } else if (element.detachEvent) {
  6.     element.detachEvent("on" + type, fn);
  7.   } else {
  8.     element["on" + type] = null;
  9.   }
  10. }

事件阶段

  • 捕获阶段
  • 目标阶段
  • 冒泡阶段

一般默认都是冒泡阶段,很少用捕获阶段
冒泡阶段:从里向外
捕获阶段:从外向里

事件冒泡

多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了

阻止事件冒泡

  1. window.event.cancelBubble = ture; // ie8
  2. event.stopPropagation();
  3. event.preventDefault(); // 阻止默认行为

事件委托

事件委托就是利用了浏览器事件冒泡的机制，因为事件在冒泡的过程中会上传到父节点，并且父节点可以通过事件对象获取到目标节点，所以可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件