event-阻止默认+事件委托+冒泡+捕获

最新推荐文章于 2024-05-28 17:29:02 发布

WindSearcher

最新推荐文章于 2024-05-28 17:29:02 发布

阅读量796

点赞数

分类专栏： web 文章标签： js阻止默认事件和委托事件

本文链接：https://blog.csdn.net/qq_40511966/article/details/96111356

版权

web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

阻止默认事件

　　
有一些html元素默认的行为，比如说a标签，点击后有跳转动作；form表单中的submit类型的input有一个默认提交跳转事件；reset类型的input有重置表单行为。

如果你想阻止这些浏览器默认行为，JavaScript为你提供了方法。

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{list-style:none;}
        a{text-decoration: none}
        .elist>li{
            width:150px;
            height:30px;
            line-height:30px;
            text-align:center;
            border:1px solid #c00;
            margin:10px;
            font-size:14px;
        }
        .elist>.selected{
            background-color:#c00;
        }

    </style>
</head>
<body>
   <ul class="elist">
       <li><a href="http://baidu.com">百度</a></li>
       <li><a href="http://baidu.com">百度</a></li>
       <li><a href="http://baidu.com">百度</a></li>
       <li><a href="http://baidu.com">百度</a></li>
       <li><a href="http://baidu.com">百度</a></li>
   </ul>
</body>
<script>
    //需求1：阻止超链接，点击超链接不跳转，而是alert网址
    var elist = document.getElementsByClassName('elist')[0];
    var link  = elist.getElementsByTagName('a');
    for(let i = 0;i < link.length;++i){
        link[i].onclick = function(e){
            e.preventDefault();
            alert(link[i].href);
        }
    }

</script>
</html>

默认事件没有了。

既然return false 和 e.preventDefault()都是一样的效果，那它们有区别吗？当然有。

仅仅是在HTML事件属性和 DOM0级事件处理方法中才能通过返回 return false 的形式组织事件宿主的默认行为。

在DOM2中return false是不能阻止默认事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{list-style:none;}
        a{text-decoration: none}
        .elist>li{
            width:150px;
            height:30px;
            line-height:30px;
            text-align:center;
            border:1px solid #c00;
            margin:10px;
            font-size:14px;
        }
        .elist>.selected{
            background-color:#c00;
        }

    </style>
</head>
<body>
   <ul class="elist">
       <li><a href="http://baidu.com">百度</a></li>
       <li><a href="http://baidu.com">百度</a></li>
       <li><a href="http://baidu.com">百度</a></li>
       <li><a href="http://baidu.com">百度</a></li>
       <li><a href="http://baidu.com">百度</a></li>
   </ul>
</body>
<script>
    //需求1：阻止超链接，点击超链接不跳转，而是alert网址
    var elist = document.getElementsByClassName('elist')[0];
    var link  = elist.getElementsByTagName('a');
    for(let i = 0;i < link.length;++i){
        //DOM2方式
        link[i].addEventListener('click',function(e){
             alert(link[i].href);
             return false;
        })
        
    }

 


</script>
</html>

事件委托

1，什么是事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，只定义一个事件完成类似功能，不需要为每个元素加一个事件。

也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。

好处呢：1，提高性能。

我们可以看一个例子：需要触发每个li来改变他们的背景颜色(常规思路可能是为每个LI元素添加一个onclick事件，但比较耗性能)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{list-style:none;}
        a{text-decoration: none}
        .elist>li{
            width:150px;
            height:30px;
            line-height:30px;
            text-align:center;
            border:1px solid #c00;
            margin:10px;
            font-size:14px;
        }
        .elist>.selected{
            background-color:#c00;
        }

    </style>
</head>
<body>
   <ul class="elist">
       <li><a href="http://baidu.com">百度</a></li>
       <li><a href="http://baidu.com">百度</a></li>
       <li><a href="http://baidu.com">百度</a></li>
       <li><a href="http://baidu.com">百度</a></li>
       <li><a href="http://baidu.com">百度</a></li>
   </ul>
</body>
<script>
   
    //需求2：只定义一个事件，完成类似功能，事件定义在父元素上，事件委托
    var elist = document.getElementsByClassName('elist')[0];
    elist.onclick = function(e){
        if(e.target.nodeName == 'LI'){
            if(e.target.className == 'selected')
                e.target.classList.remove('selected');
            else
                e.target.classList.add('selected');
        }
    }


</script>
</html>

这样只给父元素添加事件，然后只需要判断点击的是否为LI 元素，如果是，则为其改变样式

冒泡和捕获都是DOM2中新增的概念，所谓DOM0其实就是注册一个onclick事件，形式一般为在html元素中加一个οnclick=""或者在js中onclick = function(){}的形式。DOM2形式为addEveneListener('click',function(){})

冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
     <div id="box">
         <h2>Javascript<span>事件</span></h2>
     </div>
</body>
<script>

    //定义DOM2事件
    var box = document.getElementById('box');
    var h2 = document.getElementsByTagName('h2')[0];
    var span = document.getElementsByTagName('span')[0];

    span.addEventListener('click',function(e){
        alert('span');
        //只适用DOM2
        //e.stopPropagation();
    });

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

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


</script>
</html>

此时点击span，会依次弹出span,h2,box,这就是浏览器默认的冒泡事件，在DOM2中如何阻止呢？将注释删除，即可阻止冒泡事件

捕获

就是和冒泡顺序相反执行，从子元素->父元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
     <div id="box">
         <h2>Javascript<span>事件</span></h2>
     </div>
</body>
<script>
   
    //定义DOM2事件
    var box = document.getElementById('box');
    var h2 = document.getElementsByTagName('h2')[0];
    var span = document.getElementsByTagName('span')[0];

    span.addEventListener('click',function(e){
        alert('span');
        // //只适用DOM2
        // e.stopPropagation();
    });

    h2.addEventListener('click',function(){
        alert('h2');
    },true);

    box.addEventListener('click',function(){
        alert('box');
    },true);


</script>
</html>

WindSearcher

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
event-阻止默认+事件委托+冒泡+捕获

阻止默认事件　　有一些html元素默认的行为，比如说a标签，点击后有跳转动作；form表单中的submit类型的input有一个默认提交跳转事件；reset类型的input有重置表单行为。如果你想阻止这些浏览器默认行为，JavaScript为你提供了方法。代码如下<!DOCTYPE html><html lang="en"><head>...
复制链接

扫一扫

专栏目录