Event事件学习实用路线（3）——Event事件之事件对象

最新推荐文章于 2022-10-26 22:48:44 发布

溜_x_i_a_o_迪

最新推荐文章于 2022-10-26 22:48:44 发布

阅读量154

点赞数

分类专栏： # JS——Event事件 Web前端原生JavaScript 文章标签： javascript js html5 前端 event

本文链接：https://blog.csdn.net/u013946061/article/details/105739651

版权

原生JavaScript 同时被 3 个专栏收录

34 篇文章 0 订阅

订阅专栏

Web前端

32 篇文章 0 订阅

订阅专栏

JS——Event事件

11 篇文章 0 订阅

订阅专栏

Event事件之事件对象

事件对象

事件对象

默认事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<a href="https://www.csdn.net/">CSDN</a>
<script>
    {
        var a=document.querySelector('a');
        a.addEventListener('click',function(e){
        // e 事件对象
        console.log(e);
    })
    }
</script>
</body>
</html>

这里因为a标签有默认跳转事件，因此刚打印完毕事件对象e，就马上执行跳转了。
在这里插入图片描述
这里a默认行为是浏览器给的，浏览器给的功能都是默认事件（默认行为）。
我们要想看事件对象，就需要阻止默认行为！！

    {
        var a=document.querySelector('a');
        a.addEventListener('click',function(e){
            // e 事件对象
            console.log(e);

            // 阻止浏览器默认行为！
            e.preventDefault();
        })
    }

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<a href="https://www.csdn.net/">a标签</a>
<script>
    {
        var a=document.querySelector('a');
        a.addEventListener('click',function(e){
            alert("a标签！");
        })
    }
</script>
</body>
</html>

先执行事件监听中事件处理函数，再执行a标签的默认事件。
在这里插入图片描述

{
    var a=document.querySelector('a');
    a.addEventListener('click',function(e){
        alert("a标签！");
        // 阻止浏览器默认行为
        e.preventDefault();
    })
}

在这里插入图片描述

{
    var a=document.querySelector('a');

    a.addEventListener('click',function(e){
        alert('a');
        e.preventDefault();
    },{
        passive:true
    });
}

事件监听函数的第三个参数还可以传递对象：{}

capture:true/false 是否在捕获阶段执行
once:true/false 只执行一次事件
passive:false/true //阻止取消默认事件

在这里插入图片描述

取消事件监听

<!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>
        div{
            width: 100px;
            height: 100px;
            background: crimson;
        }
    </style>
</head>
<body>
<div></div>
<input type="button" value="取消事件">
<script>
    {
        var div = document.querySelector('div');
        var inp = document.querySelector("input");

        div.addEventListener('click', function(){
            alert("点击事件");
        });

        inp.addEventListener('click', function(){
            div.removeEventListener('click', function(){
                alert("点击事件");
            });
        });
    }
</script>
</body>
</html>

我们发现取消了事件监听，但没有任何效果。
在这里插入图片描述

removeEventListener(event,fn)
绑定的事件函数-必须是命名函数！(不能是匿名函数)

    {
        var div = document.querySelector('div');
        var inp = document.querySelector("input");

        function fn(){
           alert('点击事件')
       }

        div.addEventListener('click', fn);

        inp.addEventListener('click', function(){
            div.removeEventListener('click', fn);
        });
    }

在这里插入图片描述

Event事件对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: red;
            margin: 100px auto;
        }
        p{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
    <script>
        var div=document.querySelector('div');
        var p=document.querySelector('p');

        // 事件函数中有一个默认参数ev（事件对象）
        div.addEventListener('click',function(e){
            console.log(e);
        })


        
    </script>
</body>
</html>

形参e：事件对象 - 存储了许多和这个事件相关的属性！
在这里插入图片描述

e.target 事件触发的目标源元素

        var div=document.querySelector('div');
        var p=document.querySelector('p');

        // 事件函数中有一个默认参数ev（事件对象）
        div.addEventListener('click',function(e){
            // console.log(e);
            console.log(e.target);
        })

没给p标签添加点击事件，但是点击之后就执行了。因为这里其实就是事件冒泡，点击子元素，就相当于点击了父元素，然后它会一层一层的往上找，找到父元素有点击事件，那就会执行父元素的点击事件。但这里的target拿到的是事件触发的目标元素，这里主要看目标源。
在这里插入图片描述

（后续待补充）

溜_x_i_a_o_迪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Event事件学习实用路线（3）——Event事件之事件对象

Event事件之事件对象事件对象默认事件取消事件监听Event事件对象事件对象默认事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i...
复制链接

扫一扫

专栏目录