乐趣区

关于javascript:JavaScript中的事件详解

jiezi

三个阶段

  1. 捕捉阶段：捕捉阶段是先从父元素开始一级级向上查问子元素的
  2. 处于指标阶段：事件从最顶层的子节点一步步冒泡到各级父元素阶段
  3. 冒泡阶段

如何查看以后事件的阶段？
办法：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>

勾销默认行为执行

  1. return false(罕用)
  2. DOM 规范办法：

e.preventDefault

  1. IE 的老版本，非标准形式

e.returnValue = false

进行事件流传，勾销冒泡

e.stopPropagation();: 规范的 DOM 办法
e.cancelBubble = true：非标准的 DOM 办法，老版本 IE 反对

退出移动版