1. 首页
  2. IT资讯

JavaScript中的事件详解

三个阶段

  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.onclickbtn.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支持

本文来自投稿,不代表程序员编程网立场,如若转载,请注明出处:http://www.cxybcw.com/203243.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code