js事件冒泡默认行为以及vue的事件修饰符

最新推荐文章于 2024-04-17 01:14:11 发布

浅蓝色·

最新推荐文章于 2024-04-17 01:14:11 发布

阅读量142

点赞数 1

本文链接：https://blog.csdn.net/m0_46627254/article/details/107141831

版权

jsd本身是有默认行为的，首先事件执行顺序是
点击后–事件捕捉，目标阶段 , 事件冒泡

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
    <script type="text/javascript" src="../jquery-1.11.2.min.js"></script>
    <style type="text/css">
    #a {
        width: 200px;
        height: 200px;
        background-color: gray;
    }
 
    #b {
        width: 100px;
        height: 100px;
        background-color: pink;
        position: absolute;
        top: 0;
        right: 0;
    }
    p{
        width: 100px;
        height: 100px;
        background-color: pink;
        position: absolute;
        top: 0;
       left: 0;
    }
    </style>
</head>
 
<body>
    <div id="a">
        <div id="b">
        	<b  target="_blank">百度一下</b>
        </div>
      
    </div>

    <p id="p" target="_blank">p</p>
    <script type="text/javascript">
    document.getElementById("a").onclick=function(){
        console.log('a')
    }
    document.getElementById("b").onclick=function(){
        console.log('b')
    }
  //默认行为是事件冒泡的时候执行事件打印结果 为先b 然后是a.
  //且点击的是和y元素位置没关系的和dom元素有关系,只和html结构有关系也就是说即使b定位到
  //和父元素不重叠了但是触发还是先触发a在触发B

   
    </script>
</body>
 
</html>

在这里插入图片描述
如图所示：点击P，只执行P，点击b执行b又执行a。

这个时候谈到一个属性 addEventListener，事件绑定

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
    <script type="text/javascript" src="../jquery-1.11.2.min.js"></script>
    <style type="text/css">
    #a {
        width: 200px;
        height: 200px;
        background-color: gray;
    }
 
    #b {
        width: 100px;
        height: 100px;
        background-color: pink;
        position: absolute;
        top: 0;
        right: 0;
    }
    p{
        width: 100px;
        height: 100px;
        background-color: pink;
        position: absolute;
        top: 0;
       left: 0;
    }
    </style>
</head>
 
<body>
    <div id="a">
        <div id="b">
        	<b  target="_blank">百度一下</b>
        </div>
      
    </div>

    <p id="p" target="_blank">p</p>
    <script type="text/javascript">


  document.getElementById("b").addEventListener("click", function(e) {
      console.log("b事件被触发，" + this.id);
  }, true);
  document.getElementById("p").addEventListener("click", function(e) {
      console.log("b事件被触发，" + this.id);
  }, true);
    </script>
</body>
 
</html>

true为事件捕捉的时候触发，flase是事件冒泡时触发时间，默认是false，jquery事件委托应该就是用时间监听达到的，封装jquery框架的时候点击子元素，会把最大的父元素比如body 设置为事件捕捉，通过判断className而判断是点击的哪个元素，而被点击的元素静止冒泡，就可以达到事件委托的作用。

关于vue的事件修饰符，vue本身为事件默认行为封装了一些方法如下
.stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件，而不往上冒泡
.prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交
.self 是只有是自己触发的自己才会执行,点击的不是自己，而是自己的子元素不会触发这个时间
.capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式
.once 是将事件设置为只执行一次,如 .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件本身的行为会执行z，
.stop.once指的是事件只执行一次，并且这一次执行的时候阻止冒泡，
.passive 滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 onScroll 完成。这个 .passive 修饰符尤其能够提升移动端的性能。
.nativa 指的是给子组件添加事件，直接把事件作用在子组件上

浅蓝色·

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js事件冒泡默认行为以及vue的事件修饰符

jsd本身是有默认行为的，首先事件执行顺序是点击后–事件捕捉，目标阶段 , 事件冒泡<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>事件冒泡</title> <script type="text/javascript" src="../jquery-1.11.2.min.js"></scrip
复制链接

扫一扫