JavaScript事件对象

最新推荐文章于 2022-05-26 21:09:04 发布

小码哥呀

最新推荐文章于 2022-05-26 21:09:04 发布

阅读量999

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_46112274/article/details/122140624

版权

JavaScript 专栏收录该内容

50 篇文章 1 订阅

订阅专栏

JavaScript事件对象

1、事件对象

1、事件对象

1.1、什么是事件对象

在这里插入图片描述

1.2、事件对相关的使用语法

在这里插入图片描述

1.3、事件对象的兼容性解决方案

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>123</div>
    <script>
        // 事件对象
        var div = document.querySelector('div');
        div.onclick = function(e) {
                // console.log(e);
                // console.log(window.event);
                // e = e || window.event;//为了ie678和其他浏览器的兼容问题
                console.log(e);


            }
            // div.addEventListener('click', function(e) {
            //         console.log(e);

        //     })
        // 1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
        // 2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
        // 3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关
        // 信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键
        // 4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e
        // 5. 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法  e = e || window.event;
    </script>
</body>
</html>

在这里插入图片描述

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

在这里插入图片描述

1.4.1、e.target和e.currrentTarget

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 200px;
            width: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>123</div>
    <ul>
        <li>123</li>
        <li>234</li>
        <li>345</li>
    </ul>
    <script>
        // 常见事件对象的属性和方法
        // 1、e.target 返回的是触发事件的对象(元素) this返回的是绑定事件的对象(元素)
        // 区别：e.target 点击了哪个元素，就返回哪个元素 this 那个元素绑定了这个点击事件，那么就返回谁
        var div = document.querySelector('div');
        div.addEventListener('click',function(e){
            console.log(e.target);
            console.log(this);
        })
        var ul =document.querySelector('ul');
        ul.addEventListener('click',function(e){
            // 我们给ul绑定了事件  那么this就指向ul
            console.log(this);
            console.log(e.currentTarget);

            //e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li
            console.log(e.target);
        })
    </script>
</body>
</html>

点击div
点击li

1.4.2、e.type返回事件类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>123</div>
    <a href="http://www.baidu.com">百度</a>
    <form action="http://www.baidu.com">
        <input type="submit" value="提交" name="sub"></input>
    </form>
    <script>
        // 常见事件对象的属性和方法
        // 1、返回事件类型
        var div = document.querySelector("div");
        div.addEventListener('click',fn);
        div.addEventListener('mouseover',fn);
        div.addEventListener('mouseout',fn);
        function fn(e){
            console.log(e.type);//返回事件类型
        }
    </script>
</body>
</html>

在这里插入图片描述

1.4.3、阻止事件的发生

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>123</div>
    <a href="http://www.baidu.com">百度</a>
    <form action="http://www.baidu.com">
        <input type="submit" value="提交" name="sub"></input>
    </form>
    <script>
        // 2、阻止默认行为(事件) 让链接不跳转 或者让提交按钮不提交
        var a = document.querySelector('a');
        a.addEventListener('click',function(e){
            e.preventDefault();//dom标准写法
        })
        // 3、传统注册方式
        a.onclick = function(e){
            // 普通浏览器 e.preventDefault();方法
            e.preventDefault();
            // 低版本浏览器 ie678 returValue 属性
            e.returnValue;
            // 我们可以利用return false 也能阻止默认行为 没有兼容性问题
            // 特点：return 后面的代码不执行了，而且只限于传统的注册方式
            return false;
        }
    </script>
</body>
</html>

1.4.4、阻止冒泡的两种方式 e.stopPropagation();

在这里插入图片描述在下面的案例中，只会阻止son的冒泡。如果想要继续阻止father的冒泡。需要在father中也添加e.stopPropagation();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: pink;
            text-align: center;
        }
        .son {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: purple;
            line-height: 200px;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        //阻止冒泡 dom推荐的标准
        var son = document.querySelector('.son');
        son.addEventListener('click',function(e){
            alert('son');
            e.stopPropagation();//stop 停止 Propagation 传播
            e.canaleBubble = true;//非标准 cancle 取消 bubble 传播
        },false);
        var father = document.querySelector('.father');
        father.addEventListener('click',function(){
            alert('father');
        },false);
        document.addEventListener('click',function(){
            alert('document');
        })
    </script>
    
</body>
</html>

1.4.5、阻止事件冒泡的兼容性解决方案

在这里插入图片描述

1.1.6、事件委派

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>哈哈哈哈哈哈哈哈</li></li></li>
        <li>哈哈哈哈哈哈哈哈</li>
        <li>哈哈哈哈哈哈哈哈</li>
        <li>哈哈哈哈哈哈哈哈</li>
        <li>哈哈哈哈哈哈哈哈</li>
    </ul>
    <script>
        // 事件委托的核心原理：给父节点添加侦听器 ，利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click',function(e){
            // alert('哈哈哈哈哈哈哈哈');
            // e.target这个可以得到我们点击的对象
            e.target.style.backgroundColor = 'pink';
        })
    </script>
</body>
</html>

小码哥呀

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
JavaScript事件对象

JavaScript事件对象1、事件对象1.1、什么是事件对象1.2、事件对相关的使用语法1.3、事件对象的兼容性解决方案1.4、事件对象常见的属性和方法1、事件对象1.1、什么是事件对象1.2、事件对相关的使用语法1.3、事件对象的兼容性解决方案<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Com
复制链接

扫一扫