{事件}

事件流

描述从页面中接收事件的顺序，有三种模型：

• **IE事件冒泡 **
  事件在目标元素上触发后，随着DOM树一层层向上冒泡，直到到达根节点。
• Netscape事件捕获
  事件从文档的根节点出发，途经各层DOM节点，并触发捕获事件，直到到达目标节点。
• DOM2级事件流
  第一阶段** 事件捕获阶段** 事件从根节点--->目标节点。
  第二阶段** 处于目标阶段** 事件到达目标节点，在目标节点上被触发。
  第三阶段** 事件冒泡阶段** 事件从目标节点--->根节点 。

事件监听

响应事件的方法 即 事件处理程序

• 方法

  • DOM0级事件
    通过JavaScript的传统定制方式去处理事件程序，
    就是 给一个元素的事件处理程序属性赋值
    将 元素的事件处理程序属性的值 设置为一个函数：指定事件处理程序
    将 元素的事件处理程序属性的值 设置为 null：删除事件处理程序
    <input id="btnClick" type="button" value="Click Here" />

    <script type="text/javascript">
        var btnClick = document.getElementById('btnClick');
        btnClick.onclick = function showMessage() { ----------------->指定
            alert(this.id);
        };
        btnClick.onclick = null;-------------------------------------->删除
    </script>
    

  • DOM2级事件
    addEventListener ：为节点添加事件
    removeEventListener ：为节点移除事件
    <input id="btnClick" type="button" value="Click Here" />

    <script type="text/javascript">
      var btnClick = document.getElementById('btnClick');
      var handler=function() {
            alert(this.id);
        }
       
      btnClick.addEventListener('click', handler, false);
      btnClick.removeEventListener('click', handler, false);//移除必须与添加参数相同
    
      参数1   事件类型；
      参数2   事件处理程序方法；
      参数3   true事件捕获阶段/false事件冒泡阶段
    </script>
    

  • IE事件
    IE并不支持addEventListener和removeEventListener方法，而实现：
    attachEvent：添加事件处理程序
    detachEvent：移除事件处理程序
    <input id="btnClick" type="button" value="Click Here" />

    <script type="text/javascript">
        var btnClick = document.getElementById('btnClick');
        var handler=function() {
            alert(this.id);
        }
    
        btnClick.attachEvent('onclick', handler);-------->添加
        btnClick.detachEvent('onclick', handler);-------->移除 （参数名与添加相同）
    
        参数1   事件处理程序名称；
        参数2   事件处理程序方法；
    </script>
    

• 区别

  • DOM0级事件 只能添加一个执行函数；兼容不同浏览器。
    DOM2级事件 可以添加多个执行函数；对IE兼容不足。

  • addEventListenerVSattachEvent
    1 参数 数量
    addEventListener的参数3 决定了事件监听的阶段可以在 捕获&冒泡；
    attachEvent只能在冒泡阶段。
    2 参数 意义
    addEventListener参数1是事件类型（click，load）；
    attachEvent参数1 是事件处理程序名称（onclick，onload）。
    3 事件处理程序 作用域
    addEventListener的作用域是元素本身，this指向触发元素；
    attachEvent事件处理程序会在全局变量内运行，this指向window。

事件操作

• 停止事件传播
  stopPropagation()：阻止冒泡。
  stopImmediatePropagation()：阻止此节点上的所有事件传播。
  <ul> <li >demo</li> </ul>

  var ul = document.querySelector('ul')
  var li = document.querySelector('li')
      function hello(){
        console.log('hello')
      }
      function world(){
        console.log('world')
      }
  
  1-->   ul.addEventListener('click',hello)
  2-->   li.addEventListener('click',world)
  4--------->    li.addEventListener('click',function(event){
                 event.stopPropagation();
                  })
  5------------------->    li.addEventListener('click',function(event){
                            event.stopImmediatePropagation();
                            })
  3-->   li.addEventListener('click',hello)
  
  执行1-2-3     事件li 为 "hello" "world" "hello"
  执行1-2-3-4   事件li 为 "hello" "hello" //stopPropagation仅阻止"world"
  执行1-2-3-5   事件li 为 "hello" //stopImmediatePropagation 阻止li的所有事件
  

• 阻止默认行为
  preventDefault()：阻止默认行为
  <a href = "http://baidu.com">baidu</a>

  var a = document.querySelector('a')
  var handler = function(event){
                  event.preventDefault();
                  console.log('阻止跳转')
                }
  a.addEventListener('click',handler)
  

• 应用
  demo 事件绑定
  demo 模态框
  demo tab组件