JavaScript中的事件详解

三个阶段

捕获阶段：捕获阶段是先从父元素开始一级级向上查询子元素的
处于目标阶段：事件从最顶层的子节点一步步冒泡到各级父元素阶段
冒泡阶段

如何查看当前事件的阶段？
方法：e.eventPhase：
数值1表示:捕获阶段数值2：目标阶段数值3：冒泡阶段

注册事件

创建事件的三种方式

第一种方式：onclick
btn.onclick = function () {}无法给同一个对象的同一个事件注册多个事件处理函数

第二种方式：addEventListener

 btn.addEventListener('click', function () {
                alert('hello world');
            })

IE9以后才支持

第三种方式：attachEvent

 btn.attachEvent('onclick',function(){
                alert('hello world');
            })

只有IE老版本浏览器支持,IE6-10

处理注册事件兼容性问题：

 // 处理注册事件的兼容性问题
    // eventName, 不带on，  click  mouseover  mouseout
    function addEventListener(element, eventName, fn) {
      // 判断当前浏览器是否支持addEventListener 方法
      if (element.addEventListener) {
        element.addEventListener(eventName, fn);  // 第三个参数 默认是false
      } else if (element.attachEvent) {
        element.attachEvent('on' + eventName, fn);
      } else {
        // 相当于 element.onclick = fn;
        element['on' + eventName] = fn;
      }
    }

移除事件

如果想要移除事件，注册事件的时候不能用匿名函数

第一种方法：

 var btn = document.getElementById('btn');
     btn.onclick=function(){
     alert('hello world');
     //移除事件
      btn.onclick = null;
      }

第二种方法：常用

 var btn = document.getElementById('btn');
 
  function onClick() {
    alert('hello liuheng');
    btn.removeEventListener('click', onClick);
    }
  btn.addEventListener('click', onClick);

第三种方法：只有IE9-10支持(attachEvent配套使用)

function onClick(){
                alert('hello world');
                btn.detachEvent('onclick',btnClick);
            }
   btn.attachEvent('onclick',btnClick);

兼容性处理

// 处理移除事件的兼容性处理
function removeEventListener(element, eventName, fn) {
  if (element.removeEventListener) {
    element.removeEventListener(eventName, fn);
  } else if (element.detachEvent) {
    element.detachEvent('on' + eventName, fn);
  } else {
    element['on' + eventName] = null;
  }
}

addEventListener的第三个参数的作用：

flase:事件冒泡（内>外）
true:事件捕获（外<内）

btn.onclick和btn.attachEvent只有事件冒泡，没有事件捕获

事件委托

原理：事件冒泡

e 事件参数（事件对象）：当事件发生的时候，可以获取一些和事件相关的数据。

e.target是真正触发事件的对象

处理兼容性问题：
var target = e.target || e.srcElement;后者是兼容IE老版本浏览器

e.currentTarget：事件处理函数所属的对象(和this一样)

事件对象

e是事件对象，在老版本IE中获取事件对象的方式：window.event

处理兼容性问题：e = e || window.event;

e.eventPhase：事件的阶段 1:捕获阶段 2：目标阶段 3：冒泡阶段

e.type：获取事件名称（简化注册事件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        var box = document.getElementById('box');
        box.onclick= fn;
        box.onmouseover = fn;
        box.onmouseout = fn;
        function fn(e){
            e =  e || window.event;
            switch(e.type){
                case 'click':
                console.log('点击box');
                break;
                case 'mouseover':
                console.log('鼠标经过box');
                break;
                case 'mouseout':
                console.log('鼠标离开box');
                break;
            }
        }
    </script>
</body>

</html>

取消默认行为执行

return false(常用)
DOM标准方法：

e.preventDefault

IE的老版本，非标准方式

e.returnValue = false

停止事件传播，取消冒泡

e.stopPropagation();:标准的DOM方法
e.cancelBubble = true：非标准的DOM方法，老版本IE支持

JavaScript中的事件详解

三个阶段

注册事件

创建事件的三种方式

移除事件

addEventListener的第三个参数的作用：

事件委托

事件对象

取消默认行为执行

停止事件传播，取消冒泡

FredLiu

引用和评论

jQuery笔记整理教程（常用的API和基础）

100个React最佳实践小技巧

前端如何入门 Go 语言

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具