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

js事件冒泡默认行为以及vue的事件修饰符_第1张图片
如图所示:点击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 指的是给子组件添加事件,直接把事件作用在子组件上

你可能感兴趣的:(js事件冒泡默认行为以及vue的事件修饰符)