• 技术文章 >web前端 >js教程

    深入解析JS中的事件对象Event

    青灯夜游青灯夜游2022-08-04 19:56:00转载214
    事件发生以后,会产生一个事件对象(Event),代表事件的状态。下面本篇文章就来带大家深入了解一下JS中的事件对象Event,对它做一个详细的解读,希望对大家有所帮助!

    一、什么是事件对象 Event

      每一个事件触发时,都会产生一个与之对应的事件对象 event ,其中包含了触发事件的元素、键盘鼠标的状态、位置等等内容。

      每当用户触发一个事件后,JS 就会自动生成一个 event 对象,根据触发事件的不同,这个对象包含的内容也不同,比如通过鼠标触发点击事件,会产生一个 MouseEvent 对象,其中包含了鼠标的位置等内容;通过键盘触发事件,会产生一个 KeyboardEvent 对象其中包含按键相关的信息。

    Event对象本身就是一个构造函数,可以用来生成新的实例。

    event = new Event(type, options);

    Event构造函数接受两个参数。第一个参数type是字符串,表示事件的名称;第二个参数options是一个对象,表示事件对象的配置。该对象主要有下面两个属性。

    var ev = new Event(
      'look',
      {
        'bubbles': true,
        'cancelable': false
      }
    );
    document.dispatchEvent(ev);

    上面代码新建一个look事件实例,然后使用dispatchEvent方法触发该事件。

    注意,如果不是显式指定bubbles属性为true,生成的事件就只能在“捕获阶段”触发监听函数。

    // HTML 代码为
    // <div><p>Hello</p></div>
    var div = document.querySelector('div');
    var p = document.querySelector('p');
    
    function callback(event) {
      var tag = event.currentTarget.tagName;
      console.log('Tag: ' + tag); // 没有任何输出
    }
    
    div.addEventListener('click', callback, false);
    
    var click = new Event('click');
    p.dispatchEvent(click);

    上面代码中,p元素发出一个click事件,该事件默认不会冒泡。div.addEventListener方法指定在冒泡阶段监听,因此监听函数不会触发。如果写成div.addEventListener('click', callback, true),那么在“捕获阶段”可以监听到这个事件。

    另一方面,如果这个事件在div元素上触发。

    div.dispatchEvent(click);

    那么,不管div元素是在冒泡阶段监听,还是在捕获阶段监听,都会触发监听函数。因为这时div元素是事件的目标,不存在是否冒泡的问题,div元素总是会接收到事件,因此导致监听函数生效。

    二、Event 属性

      我们在前面提到,根据触发方式的不同 event 对象会具有不同的属性,我们可以将其大体分为四部分:

    通用属性 (无论是通过键盘还是鼠标触发都拥有的属性)

    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li></ul><script>
        document.querySelector('ul').addEventListener("click", fn1, true)
    
        document.querySelector('ul').addEventListener("click", fn1, false)
    
        document.querySelector("li").addEventListener("click", fn1, true)
    
        function fn1() {
            console.log(this);		// 打印当前事件对象
            console.log(event.eventPhase);		// 打印
        }</script>

      点击列表1后,控制台打印如下结果:
    控制台打印结果

    鼠标属性

    键盘属性

    IE属性

    三、Event 方法

      如果想要阻止事件元素的默认行为,例如点击 <a> 标签时执行点击事件,不要跳转链接,需要在事件处理程序中调用 preventDefault 方法:

    <a href="http://baidu.com">百度一下,你就知道</a>
    <script>
    	document.querySelector("a").onclick = function () {
    		event.preventDefault();
    		//	do something
    	}
    </script>

      如果想要阻止事件冒泡,例如点击子元素标签时执行子元素的点击事件,而不想要执行父级元素的事件处理程序,则需要调用 stopPropagation 方法:

    <ul>
    	<li>不要触发 ul 的点击事件处理程序</li>
    </ul>
    <script>
    	document.querySelector("ul").onclick = function () {
    		alert("事件冒泡,触发 ul 的点击事件")
    	}
    
    	document.querySelector("li").onclick = function () {
    		event.stopPropagation();
    		// do something
    	}
    </script>

    其他相关方法


    另外关于 createEvent 方法,根据传入参数的不同,会返回不同的 event 对象:

    四、模拟事件

    4.1 模拟鼠标事件

      我们可以通过 createEvent() 方法可以创建一个新的 event 对象,借助 initMouseEvent() 方法来对这个鼠标事件对象的值进行初始化,该方法接受十五个参数,分别与鼠标事件中的各个属性一一对应,按照 typebubblescancelableviewdetailscreenXscreenYclientXclientYctrlKeyaltKeyshiftKey、、metaKeybuttonrelatedTarget 的顺序传入即可:

    var oBtn = document.querySelector("button");
    // 为 button 绑定事件处理程序
    oBtn.addEventListener("click", function () {
        console.log(event);
    })
    
    var event = document.createEvent("MouseEvents");
    // 通过 initMouseEvent() 方法初始化鼠标事件的 event 对象
    event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    // 通过 dispatchEvent() 方法来触发 oBtn 上绑定的点击事件,此时浏览器打印的 event 对象为自定义的 event
    oBtn.dispatchEvent(event);

      初始化事件对象时,最重要的是前四个参数,因为浏览器在触发事件时,这四个参数是必须的,而剩余的参数只有在事件处理程序中才会被使用,target 会在执行 dispatchEvent 方法时自动赋值;

    4.2 模拟键盘事件

      同样需要先使用 createEvent() 方法可以创建一个新的 event 对象,但需要使用 initKeyEvent 来对键盘事件对象的值进行初始化,该方法接收八个参数,分别于键盘事件对象中的各个属性一一对应,按照 typebubblescancelableviewkeylocationmodifiersrepeat的顺序传入即可。但在 firefox 中,需要按照 typebubblescancelableviewctrlKeyaltKeyshiftKey metaKey keyCode charCode ` 的顺序传入十个参数

    document.onkeydown = function () {
        console.log(event);
    }
    
    var event = document.createEvent("KeyboardEvent");
    event.initKeyboardEvent("keydown", false, false, document.defaultView, "a", 0, "Shift", 0);
    document.dispatchEvent(event);

    4.3 模拟其他事件

      如果想要模拟其他事件,诸如 submitfocusHTML 和变动事件,则需要通过 MutationEvents 方法来创建事件,通过 initEvent 方法来进行初始化,按照typebubblescancelablerelatedNodepreValuenewValueattrNameattrChange的顺序传入参数。

    <input type="text">
    
    <script>
        var oInput = document.querySelector("input");
        oInput.addEventListener("focus", function () {
            this.style.background = "#ccc"
        })
        var event = document.createEvent("HTMLEvents");
        event.initEvent("focus", true, false);
        oInput.dispatchEvent(event);
    </script>

    4.4 自定义 DOM 事件

      自定义事件不是由 DOM 原生触发的,它的目的是让开发人员创建自己的事件。要创建新的自定义事件,可以调用 createEvent("CustomEvent"),返回的对象有一个名为 initCustomEvent() 的方法,接收 typebubblescancelabledetail 四个参数。

    var oInput = document.querySelector("input");
    
    oInput.addEventListener("myEvent", function () {
    	console.log(event);
    })
    
    var event = document.createEvent("CustomEvent");
    event.initCustomEvent("myEvent", true, false, "自定义事件myEvent");
    oInput.dispatchEvent(event);

      上方代码创建了一个自定义事件,事件名为 myEvent , 该事件可以向上冒泡,不可以执行在浏览器中的默认行为, detail 属性的值为 自定义事件myEvent,可以在绑定该事件的元素或者元素的父级元素上绑定事件处理程序来查看 event 对象。

    五、Event的兼容性处理

      主要考虑到 IE 浏览器与 Chrome 等浏览器事件对象的区别,针对下面四个属性,需要进行特殊处理:

    【相关推荐:javascript学习教程

    以上就是深入解析JS中的事件对象Event的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:csdn,如有侵犯,请联系admin@php.cn删除
    专题推荐:事件对象 javascript
    上一篇:怎么给元素添加事件?JS绑定事件三种方式解析 下一篇:一文搞懂JS中的事件冒泡机制
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• JavaScript中什么是匿名函数?应用场景浅析• JavaScript数值的方法和属性详解• 一起分析JavaScript异常处理方式• 聊聊JavaScript中怎么利用Object()函数创建对象• 什么是this?深入解析JavaScript中的this• 详解Javascript对象的5种循环遍历方法
    1/1

    PHP中文网