JavaScript基础-----事件冒泡和阻止

最新推荐文章于 2022-03-24 15:29:20 发布

Lazy_Life

最新推荐文章于 2022-03-24 15:29:20 发布

阅读量367

点赞数

分类专栏： JavaScript基础文章标签：前端 JavaScript 事件冒泡

本文链接：https://blog.csdn.net/Lazy_Life/article/details/80865627

版权

JavaScript基础专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.事件冒泡：

假设一个html结构中两个标签存在父子层级关系，父盒子和子盒子都绑定同一个事件的方法；当点击子盒子时会执行两次方法，也就是将父盒子的事件方法也执行了，也就是由里向外依次执行，这就是所谓的事件冒泡（从里向外进行传播）；摘自原作者的例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件冒泡</title>
<style>
    .one{
        width:400px;
        height:100px;
        border:1px solid #333;
    }
    .two{
        height:35px;
        line-height:35px;
        padding-left:15px;
        border:1px solid red;
    }
    .three{
        padding:10px;
        background-color: green;
        border:1px solid #999;
        cursor:pointer;
    }
</style>
<script src = "http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
    $(function(){
        $(".one").click(function(event) {
            alert($(this).text());
        });
        $(".two").click(function(event) {
            alert($(this).text());
        });
        $(".three").click(function(event) {
            alert($(this).text());
        });
    });
</script>
</head>
<body>
    <div class="one">
        我是one(div)
        <p class="two">
            我是two（p）
            <span class="three">我是three（span）</span>
        </p>
    </div>
</body>
</html>

当在span，p，div元素上个绑定一个click事件时，点击span元素时，会依次向上触发这三个事件，当然这不是想要的结果，所以就要进行阻止事件冒泡；

2.事件捕获：

事件捕获和事件冒泡正好相反，它会从外向里依次执行；

3.事件冒泡和事件捕获的切换：

使用addEventListener（事件监听）方法

element.addEventListener(event, function, useCapture)

它有三个参数，（事件类型，处理函数，boolean值（可选））；

第三个参数默认值为false，表示在事件冒泡阶段调用事件处理函数；如果参数为true，则表示在事件捕获阶段调用处理函数；

4.阻止事件冒泡：

（1）DOM中提供stopPropagation()方法，但IE不支持，使用event对象在事件函数调用；

（2）IE中提供的是cancelBubble属性，默认为false，当设置为true时，就是阻止事件冒泡，也是用event对象在事件函数中调用；

（3）jQuery中提供了stopPropagation()方法来停止事件冒泡，当需要时，只需用event对象来调用就行，即event.stopPropagtion()；

//封装阻止事件冒泡函数
function stopPropagation(event){
    var event = window.event || event;
    if(document.all){              //document.all：判断浏览器是否为IE
        event.cancelBubble = true   //IE浏览器
     }else{
        event.stoopPropagation();      //其他浏览器  
     }
}

5.默认行为：

即浏览器的一些默认行为，例如：点击超链接跳转，点击右键会弹出菜单，滑动滚轮控制滚动条等等；

6.阻止默认行为：

（1）DOM中提供preventDefault()方法来取消事件默认行为，但是只有当cancelable属性设置为true的事件，才可以使用preventDefault()来取消事件默认行为，使用event对象在函数中调用；

（2）IE中提供的是returnValue属性，默认为true，当它设置为false时，就是取消事件默认行为，也是用event对象在事件函数中调用；

（3）jQuery中提供了preventDefault()犯法来阻止元素的默认行为，只需要用event对象来调用就好，即event.preventDefault()；

（4）对于 a 链接，可以使用JavaScript伪协议来阻止默认行为，也就是：<a href="JavaScript:void(0)"></a>；

（5）还有一种简写写法，就是同时阻止事件冒泡和事件默认行为；就是直接返回一个false（return：false）；

//封装阻止事件默认行为函数
function preventDefaultActiion(event){
    var event = window.event || event;
    if(document.all){
        event.returnValue = false;       //IE；浏览器
    }else{
        event.preventDefault();         //其他浏览器
    }
}

Lazy_Life

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript基础-----事件冒泡和阻止

1.事件冒泡：假设一个html结构中两个标签存在父子层级关系，父盒子和子盒子都绑定同一个事件的方法；当点击子盒子时会执行两次方法，也就是将父盒子的事件方法也执行了，也就是由里向外依次执行，这就是所谓的事件冒泡（从里向外进行传播）；摘自原作者的例子：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&...
复制链接

扫一扫

专栏目录