事件对象使用方法大全（源码解析）

最新推荐文章于 2022-11-26 11:17:11 发布

不易撞的网名

最新推荐文章于 2022-11-26 11:17:11 发布

阅读量235

点赞数

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

本文链接：https://blog.csdn.net/weixin_50569789/article/details/120092095

版权

前端专栏收录该内容

264 篇文章 5 订阅

订阅专栏

事件对象使用方法

<!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>事件对象</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;
            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>

事件对象e.target

<!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>事件对象e.target</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>123</div>
    <ul>
        <li>abc</li>
        <li>abc</li>
        <li>abc</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);
            //currentTarget 事件属性返回其监听器触发事件的节点，即当前处理该事件的元素、文档或窗口。
            //在捕获和起泡阶段，该属性是非常有用的，因为在这两个节点，它不同于 target 属性。
            // e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li
            console.log(e.target);

        })

            // 了解兼容性
            // div.onclick = function(e) {
            //     e = e || window.event;
            //     var target = e.target || e.srcElement;
            //     console.log(target);

        // }
        // 2. 了解 跟 this 有个非常相似的属性 currentTarget  ie678不认识
    </script>
</body>

</html>

事件对象阻止默认行为

<!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>事件对象阻止默认行为</title>
    <style>

    </style>
</head>

<body>
    <div>123</div>
    <a href="http://www.baidu.com">百度</a>
    <form action="http://www.baidu.com">
        <input type="submit" value="提交" name="sub">
    </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);

        }

        // 2. 阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交
        var a = document.querySelector('a');
        a.addEventListener('click', function (e) {
            e.preventDefault(); //  dom 标准写法
        })



        // 3. 传统的注册方式
        a.onclick = function (e) {
            // 普通浏览器 e.preventDefault();  方法
            // e.preventDefault();

            // 低版本浏览器 ie678  returnValue  属性

            // e.returnValue;
            // 我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点： return 后面的代码不执行了， 而且只限于传统的注册方式
            return false;
            alert(11);
        }
    </script>
</body>

</html>

<!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>
        .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 推荐的标准 stopPropagation() 

        var son = document.querySelector('.son');

        son.addEventListener('click', function (e) {
            alert('son');

            e.stopPropagation(); // stop 停止  Propagation 传播  阻止 click 事件冒泡到父元素：

            e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
        }, false);



        var father = document.querySelector('.father');

        father.addEventListener('click', function () {
            alert('father');
        }, false);

        document.addEventListener('click', function () {
            alert('document');
        })
    </script>
</body>

</html>

不易撞的网名

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
事件对象使用方法大全（源码解析）

事件对象使用方法<!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"> <ti
复制链接

扫一扫