vue跟jQuery中的事件冒泡、事件捕获、事件委托（事件代理）

1、事件捕获、事件冒泡

在JS中，我们管事件发生的顺序叫“事件流”

标准的事件流：当dom触发了事件后，会先通过事件传播捕获到目标元素，然后目标节点通过事件传播实现事件冒泡

事件传播：无论是捕获还是冒泡，都是靠事件传播一层一层传递的，当在某一层禁止事件传播，那么之后的步骤就不再进行了

Tips：目标元素指的是触发事件的节点

（1）事件捕获

鼠标点击或者触发了dom事件，浏览器会从根节点（Document 对象）流向目标元素，途中会经过目标元素的各个父级节点，并在这些节点上触发捕获事件，直至到达事件的目标元素

（2）事件冒泡

在捕获完成后，与事件捕获相反，事件会从目标元素流向文档根节点，途中会经过目标元素的各个父级节点，并在这些节点上触发捕获事件，直至到达文档的根节点

2、如何创建事件捕获、事件冒泡

（1）jQuery

addEventListener(type,listener,useCapture)
type：事件类型
listener：事件监听处理函数
useCapture：设置事件查找方式（布尔值，可选）
false，冒泡事件（默认值）
true，捕获事件
useCapture设置为true后，是在捕获时进行的事件，默认为false是在冒泡时进行的事件


<div class="outer">
  outer
  <div class="center">
    center
    <div class="inside">inside</div>
  </div>
</div>

<script>
const outer = document.querySelector('.outer')
const center = document.querySelector('.center')
const inside = document.querySelector('.inside')

outer.addEventListener(
  'click',
  (e) => {
    console.log('捕获 outer clicked')
  },
  true
)

center.addEventListener(
  'click',
  (e) => {
    console.log('捕获 center clicked')
  },
  true
)

inside.addEventListener(
  'click',
  (e) => {
    console.log('捕获 inside clicked')
  },
  true
)

outer.addEventListener('click', (e) => {
  console.log('冒泡 outer clicked')
})

center.addEventListener('center', (e) => {
  console.log('冒泡 center clicked')
})

inside.addEventListener('click', (e) => {
  console.log('冒泡 inside clicked')
})
</script>

（2）Vue

Vue使用@click绑定事件，默认是事件冒泡，Vue提供了@click.capture来监听事件捕获

<template>
  <div class="outer" @click.capture="clickOuterCapture" @click="clickOuter">
    outer
    <div class="center" @click.capture="clickCenterCapture" @click="clickCenter">
      center
      <div class="inside" @click.capture="clickInsideCapture" @click="clickInside">inside</div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    clickOuterCapture() {
      console.log('捕获 outer clicked')
    },
    clickCenterCapture() {
      console.log('捕获 center clicked')
    },
    clickInsideCapture() {
      console.log('捕获 inside clicked')
    },
    clickOuter() {
      console.log('冒泡 outer clicked')
    },
    clickCenter() {
      console.log('冒泡 center clicked')
    },
    clickInside() {
      console.log('冒泡 inside clicked')
    }
  }
}
</script>

点击inside执行顺序：

3、如何阻止事件的冒泡

（1）jQuery

event.stopPropagation()和event.stopImmediatePropagation()；

如果元素绑定多个事件stopImmediatePropagation会阻止该元素的其他事件，stopPropagation则不会

<div class="outer">
  outer
  <div class="center">
    center
    <div class="inside">inside</div>
  </div>
</div>

<script>
const outer = document.querySelector('.outer')
const center = document.querySelector('.center')
const inside = document.querySelector('.inside')

outer.addEventListener(
  'click',
  (e) => {
    console.log('捕获 outer clicked')
  },
  true
)

center.addEventListener(
  'click',
  (e) => {
    console.log('捕获 center clicked')
  },
  true
)

inside.addEventListener(
  'click',
  (e) => {
    console.log('捕获 inside clicked')
  },
  true
)

outer.addEventListener('click', (e) => {
  console.log('冒泡 outer clicked')
})

center.addEventListener('center', (e) => {
  console.log('冒泡 center clicked')
})

inside.addEventListener('click', (e) => {
  e.stopPropagation()
  console.log('冒泡 inside clicked')
})
</script>

（2）Vue

@click.stop="fun"

<template>
  <div class="outer" @click.capture="clickOuterCapture" @click="clickOuter">
    outer
    <div class="center" @click.capture="clickCenterCapture" @click="clickCenter">
      center
      <div class="inside" @click.capture="clickInsideCapture" @click.stop="clickInside">inside</div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    clickOuterCapture() {
      console.log('捕获 outer clicked')
    },
    clickCenterCapture() {
      console.log('捕获 center clicked')
    },
    clickInsideCapture() {
      console.log('捕获 inside clicked')
    },
    clickOuter() {
      console.log('冒泡 outer clicked')
    },
    clickCenter() {
      console.log('冒泡 center clicked')
    },
    clickInside() {
      console.log('冒泡 inside clicked')
    }
  }
}
</script>

就算是父元素绑定了点击事件处理器，它们也不会被触发

点击inside执行顺序：

4、元素绑定多个事件时，事件捕获，事件冒泡执行顺序

无论是冒泡事件还是捕获事件，元素都会先执行捕获阶段。

从上往下，如有捕获事件，则执行；一直向下到目标元素后，从目标元素开始向上执行冒泡元素

<div id='one'>
  <div id='two'>
    <div id='three'>
      <div id='four'>
      </div>
    </div>
  </div>
</div>

<script type='text/javascript'>
  var one=document.getElementById('one');
  var two=document.getElementById('two');
  var three=document.getElementById('three');
  var four=document.getElementById('four');
</script>

（1）分析一

one.addEventListener('click',function(){
  alert('one 捕获');
},true);

two.addEventListener('click',function(){
  alert('two 冒泡');
},false);

three.addEventListener('click',function(){
  alert('three 捕获');
},true);

four.addEventListener('click',function(){
  alert('four 冒泡');
},false);

（1）点击four元素，four元素为目标元素，one为根元素祖先，从one开始向下判断执行。

分析：

one为捕获事件，输出one 捕获；
two为冒泡事件，忽略；
three为捕获时间，输出three 捕获；
four为目标元素，开始向上冒泡执行，输出four 冒泡；
three为捕获已执行，忽略;
two为冒泡事件，输出two 冒泡；
one为捕获已执行，忽略。

（2）点击three元素，three元素为目标元素，one为根元素祖先，从one开始向下判断执行。

one为捕获事件，输出one 捕获；
two为冒泡事件，忽略；
three为捕获时间，输出three 捕获，然后开始向上冒泡；
two为冒泡事件，输出two 冒泡；
one为捕获已执行，忽略。

（2）分析二

one.addEventListener('click',function(){
  alert('one 捕获');
},true);

two.addEventListener('click',function(){
  alert('two 冒泡');
},false);

two.addEventListener('click',function(){
  alert('two 捕获');
},true);

three.addEventListener('click',function(){
  alert('three 冒泡');
},true);

four.addEventListener('click',function(){
  alert('four 捕获');
},true);

（1）点击two元素，two为目标元素；one为根元素祖先，从one开始向下判断执行。

分析：
one为捕获事件，输出one 捕获；
two先执行冒泡事件，two 冒泡；
two再执行捕获事件，two 捕获；
one为捕获已执行，忽略。

（2）点击three元素，three为目标元素；one为根元素祖先，从one开始向下判断执行。

分析：

one为捕获事件，输出one 捕获；
two先执行捕获事件，输出two 捕获；
three为目标元素，开始向上冒泡执行，输出three 冒泡；
two再执行冒泡事件；输出two 冒泡；
one为捕获已执行，忽略。

5、事件委托（事件代理）

事件委托又称事件代理，是 JavaScript 中常用绑定事件的常用技巧。事件委托即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。

事件委托的原理是DOM元素的事件冒泡。

优点

（1）减少内存消耗

使用事件委托可以大量节省内存，减少事件的定义，例如使用事件委托的方式将点击事件绑定到 ul 标签上，就可以实现监听所有 li 标签，简洁、高效。

（2）动态绑定

在网页中，有时我们需要动态增加或移除页面中的元素，使用事件委托不需要再为新增的元素绑定事件，也不需要为删除的元素解绑事件。

5-1、如何创建事件委托

（1）JQuery

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
</ul>

<script>
// 事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点
var ul = document.querySelector('ul')
ul.addEventListener('click', function (e) {
  // e.target 这个可以得到我们点击的对象
  for (var i = 0; i < ul.children.length; i++) {
    ul.children[i].style.backgroundColor = ''
  }
  e.target.style.backgroundColor = 'pink'
})

（2）Vue

<template>
  <ul @click.passive="select">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
  </ul>
</template>

<script>
export default {
  methods: {
    select(event) {
      // 获取点击的元素
      if (event.target.tagName === 'li') {
        // 如果点击的是li，执行相应的操作
        console.log('li clicked')
      }
    }
  }
}
</script>

注意：当目标元素有子元素时

（1）JQuery

$(selector).on(event, childSelector,data,function)；

event：必选；事件的名称(可以自定义) 支持绑定多个事件，多个事件用空格分开，也可以是map参数和数组；
childSelector：可选，添加事件程序的子元素而且不是父选择器本身；
data：可选，传递到事件对象 event的额外的参数；
function：必选；规定事件发生时运行的函数

<div id="parent">
  <button class="child">按钮1</button>
  <a href="#" class="child">链接1</a>
  <div class="child">其他元素</div>
</div>

<script>
$(document).ready(function () {
  $('#parent').on('click', '.child', function (event) {
    // 检查触发事件的子元素类型
    if ($(this).is('button')) {
      console.log('按钮被点击')
    } else if ($(this).is('a')) {
      console.log('链接被点击')
    } else {
      console.log('其他元素被点击')
    }
  })
})

// $(this).is('selector')来检查当前点击的子元素是什么类型
</script>

（2）Vue

<template>
  <ul @click.passive="select">
    <button class="child">按钮1</button>
    <a href="#" class="child">链接1</a>
    <div class="child">其他元素</div>
  </ul>
</template>

<script>
export default {
  methods: {
    select(event) {
      // 获取点击的元素
      if (event.target.tagName === 'buttom') {
        console.log('按钮被点击')
      } else if (event.target.tagName === 'a') {
        // 如果点击的是a，执行相应的操作
        console.log('链接被点击')
      } else {
        console.log('其他元素被点击')
      }
    }
  }
}
</script>