欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

JavaScript事件对象、target和this的区别、阻止默认事件、阻止冒泡、事件委托

程序员文章站 2022-05-06 09:14:13
...

JavaScript事件对象

  1. event就是一个事件对象，写在侦听函数的小括号里面当形参来看。

  2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数

  3. 事件对象是我们事件的一系列相关数据的集合，根事件相关的信息，如果是鼠标点击事件里面包含了鼠标的相关信息，例如鼠标的坐标等，如果是键盘时间里面就包含了键盘时间的信息，比如用户按下了哪个键。

  4. 时间对象可以自己命名，不一定非要使用event，比如可以为event、evt、e等

  5. 存在兼容性问题，IE678通过window.event获取。

<body>
    <div>
        12121212
    </div>
    <script>
    	var div = document.querySelector('div');
        // 传统的事件对象
       // div.onclick = function(event){
       //     console.log(event);
       // }
        //方法监听方式
        div.addEventListener('click',function(e){
            console.log(e);
        })
    </script>
</body>

事件对象的常见属性和方法

事件对象属性方法 说明
e.target 该属性返回触发事件的对象 标准
e.srcElement 该属性返回触发事件的对象 非标准（IE 6/7/8使用）
e.type 该属性返回事件的类型 比如 click mouseover 不带on
e.cancelBubble 该属性阻止冒泡 非标准 （IE 6/7/8使用）
e.stopPropagation() 该方法阻止冒泡 标准
e.returnValue 该属性阻止默认事件（默认行为） 非标准 （IE6/7/8使用）
e.preventDefault() 该方法阻止默认事件（默认行为） 标准 比如不让链接跳转

e.target和this的区别

e.target返回的是触发事件的对象，this返回的是绑定事件的对象。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>e.target和this的区别</div></title>

    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        div {
            margin: auto;
            width: 100px;
            height: 100px;
            background-color: blue;        }
        ul {
            margin: auto;
            width: 200px;
            height: 300px;
            background-color: brown;
        }    
        ul li {
            list-style: none;
            width: 150px;
            height: 100px;
            background-color: coral;
        }
    </style>
</head>
<body>
    <div>1212</div>
    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
    </ul>
    <a href="https://blog.csdn.net/weixin_42579348?spm=1010.2135.3001.5113">我的CSDN博客地址</a>

    <script>
        //第一段程序
        var div = document.querySelector('div');
        //div.addEventListener('click',function(e){
        //    console.log(e.target);
         //   console.log(this);
        //})
        //运行程序，点击div框，会出现两条相同的结果
		
        //第二段程序
        var ul = document.querySelector('ul');
        ul.addEventListener('click',function(event){
            console.log(event.target);
            console.log(this);
        })
        //运行程序，点击ul中的一个li，会出现两条结果，但是结果不同。
        
        //第三段程序  返回事件类型
        div.addEventListener('click',function(e){
            console.log(e.type);
        })
        
         //第四段程序，阻止默认事件   让链接不跳转  （或者让提交按钮不提交等）
        //var a = document.querySelector('a');
        //a.addEventListener('click',function (e) {
        //    e.preventDefault();
        //})
    </script>
</body>
</html>
  1. 运行第一段程序，可以得到两条相同的结果：

JavaScript事件对象、target和this的区别、阻止默认事件、阻止冒泡、事件委托

  1. 运行第二段程序，可以得到两条不同的结果

JavaScript事件对象、target和this的区别、阻止默认事件、阻止冒泡、事件委托

通过两次程序运行结果的比较，可以看出第二次程序运行后event.target返回的是li，而this返回的是整个ul。因为当前绑定的是ul，点击的是li；event.target返回的是触发事件的对象，this返回的是绑定事件的对象。

返回事件类型

  1. 运行第三段程序结果会返回一个click，是这个事件的类型。

阻止默认事件

  1. 在注释掉第四段代码块的时候运行，点击链接会跳转到我的CSDN博客页面，但是在运行第四段程序的时候，点击链接是不会发生跳转的。

阻止事件冒泡

冒泡事件和阻止冒泡事件博文地址：
阻止事件冒泡博文链接

事件委托（代理、委托）

原理：不是每个子节点单独设置事件监听器，而是将事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

作用：只操作了一次DOM，提高了程序的性能。

JavaScript事件对象、target和this的区别、阻止默认事件、阻止冒泡、事件委托

在上面程序的第一段代码中加入上面的语句，点击li则返回li中的内容。

JavaScript事件对象、target和this的区别、阻止默认事件、阻止冒泡、事件委托

相关标签： 前端开发 java js javascript dom css

上一篇： DOM事件，捕获与冒泡处理,委托模式

下一篇： 弹出层

推荐阅读