JS 事件高级（二）

最新推荐文章于 2022-11-25 19:18:53 发布

MartinYP

最新推荐文章于 2022-11-25 19:18:53 发布

阅读量248

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/MartinYP/article/details/125951613

版权

这篇博客介绍了JavaScript事件处理的高级技巧，包括如何阻止事件冒泡，详细讲解了事件委托的概念和优势，并探讨了常用的鼠标和键盘事件及其对象，提供了相关案例来加深理解。

摘要由CSDN通过智能技术生成

2022年7月23日周六学习记录博客学习时长：3h 学习内容：阻止事件冒泡、事件委托、鼠标事件、键盘事件

事件高级

5. 阻止事件冒泡

<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>

5.1 阻止事件冒泡的两种方式

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点。

事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。

标准写法：利用事件对象里面的 stopPropagation()方法

非标准写法：IE 6-8 利用事件对象 cancelBubble 属性

<body>
    <div class="father">
        &

最低0.47元/天解锁文章

MartinYP

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫