07 事件处理函数，冒泡捕获，阻止冒泡默认事件

事件是元素天生就具备的。所有的事件源都是对象。事件作用在谁的身上谁就是事件源

事件处理函数

1. 绑定事件 = 绑定事件处理函数（事件的反馈）

2. 事件 + 事件的反馈 = 前端交互 交互体验。

   绑定事件处理函数

3. elem.onclick = function(){} 事件句柄

   1. 一个元素绑定两个相同类型的处理函数，会造成覆盖。

4. elem.addEventListener(事件类型，事件处理函数，冒泡false/捕获true)；

   1. IE9 以下不兼容。W3C规范。
   2. 同一个元素可以绑定多个事件。

      var oBtn = document.getElementsByTagName('button')[0];
      oBtn.addEventListener('click', function () {
      this.innerHTML = '加载中。。';
      }, fasle)
      oBtn.addEventListener('click', function () {
      this.innerHTML = '加载中更多事件';
      }, fasle)
      //  这两个都会执行

      var oBtn = document.getElementsByTagName('button')[0];
      oBtn.addEventListener('click', test, fasle);
      oBtn.addEventListener('click', test, fasle);
      function test() {
      console.log(1)
      }
      //只会执行一次因为绑定的是同一个函数引用。

5. elem.attachEvent(事件类型，事件处理函数)

   1. IE8以及下
   2. this指向window

      oBtn.attachEvent('onclick', function () {
      test.call(oBtn);//改变this指向。
      })
      function test() {
      console.log(this)
      }

      封装

      function bindType(el, type, fn) {
      if (el.addEventListener) {
      el.addEventListener(type, fn, false);
      } else if (el.attchEvent) {
      el.attchEvent("on" + type, function () {
      fn.call(el);
      })
      } else {
      el['on' + type] = fn;
      }
      }

      解除事件绑定

6. elem.onclick =null/false;

7. elem.removeEventListener(参数要和绑定事件处理函数一摸一样)

   oBtn.addEventListener('click', function () {
   this.innerHTML = '加载中。。';
   //非严格模式下使用。
   this.removeEventListener('click', arguments.callee, false);
   }, fasle)

8. elem.detachEvent(事件类型，事件处理函数)；

   事件的冒泡和捕获

   标签知识补充
   行内元素嵌套

   冒泡和捕获

   DOM结构上存在着嵌套关系就会出现冒泡。

9. 冒泡：子元素向父元素一级一级传递相同事件类型的处理函数现象

10. 捕获：嵌套关系最顶层向子元素一级一级传递相同事件类型的处理函数现象，直到事件源。
11. 只要点击谁 谁就是事件源 就不存在捕获或者冒泡。按照顺序执行。
12. focus blur change submit reset select 没有冒泡

13. 老版本IE 没有捕获。

    阻止事件冒泡

14. W3C e.stopPropagation(). e=>Event。 此方法存在Event.prototype上，IE8 window.event

    oBtn.addEventListener('click', function (e) {
    var e = e || window.event;
    e.stopPropagation();
    }, fasle)

15. IE e.cancalBubble = true;

    oBtn.addEventListener('click', function (e) {
    var e = e || window.event;
    e.cancelBubble = true;
    }, fasle)

    封装

    function cancelBubble(e) {
    var e = e || window.event;//兼容性写法
    if (e.stopPropagation) {
     e.stopPropagation();
    } else {
     e.cancelBubble = true;
    }
    }

    取消默认事件

16. 取消右键菜单

    • oncontextmenu return false

      document.oncontextmenu = function (e) {
      var e = e || window.event;
      return false;
      }

    • W3C e.preventDefault() IE9不兼容.

      document.oncontextmenu = function (e) {
      var e = e || window.event;
      e.preventDefault();
      }

    • e.returnValue = false;

      document.oncontextmenu = function (e) {
      var e = e || window.event;
      e.returnValue = false;
      }

17. 阻止a标签跳转

    1. href = ‘javascript:;’
    2. href = ‘javascript:void(0)’ return 0
    3. e.preventDefault

       var a = document.getElementsByTagName('a')[0];
       a.onclick = function (e) {
       e.preventDefault();
       }