JavaScript的事件传播

• • 一、事件传播
  • • 1、事件传播的说明
    • 2、阻止事件传播
  • 二、目标冒泡捕获
  • • 1、冒泡
    • 2、捕获
  • 三、事件委托
  • • 1、事件委托的说明
    • 2、为什么要用事件委托
  • 四、阻止默认事件
  • • 1、方法一
    • 2、方法二

一、事件传播

• 在触发子元素的事件时, 会将行为传播给父级的同类型事件
• 触发了子元素的点击事件时, 会将该行为传播给父级, 并触发父级的同类型事件
• 在传递行为时, 会将行为一直向上传递, 如果父级有同类型事件, 那么触发该事件； 如果没有, 则继续往上传递
• 阻止事件传播: e.stopPropagation()

1、事件传播的说明

        // 获取标签对象var oBox1 = document.getElementById('box1');var oBox2 = document.getElementById('box2');var oBody = document.body;oBox1.onclick = function () {console.log('触发了box1的点击事件');}oBox2.onclick = function () {console.log('触发了box2的点击事件');}oBox1.oncontextmenu = function () {console.log('触发了box1的右键事件');}oBody.onclick = function () {console.log('触发了body的点击事件');}

2、阻止事件传播

       // 获取标签对象var oBox1 = document.getElementById('box1');var oBox2 = document.getElementById('box2');var oBody = document.body;oBox1.onclick = function (e) {// 阻止事件传播e.stopPropagation() console.log('触发了box1的点击事件');}oBox2.onclick = function () {console.log('触发了box2的点击事件');}oBox1.oncontextmenu = function () {console.log('触发了box1的右键事件');}oBody.onclick = function () {console.log('触发了body的点击事件');}

二、目标冒泡捕获

• 目标: 目标就是事件源
• 传播时，会从目标传播到父级, body, html, document, window

1、冒泡

• 冒泡: 事件传播时, 从目标开始传播, 一直到到父级, body...window
• window 默认的传播方式为 冒泡

        // 获取标签对象var oBox1 = document.getElementById('box1');var oBox2 = document.getElementById('box2');var oBody = document.body;oBox1.onclick = function () {console.log('触发了box1的点击事件');}oBox2.onclick = function () {console.log('触发了box2的点击事件');}oBox1.oncontextmenu = function () {console.log('触发了box1的右键事件');}oBody.onclick = function () {console.log('触发了body的点击事件');}

2、捕获

• 捕获: 从最顶层开始, 逐层向下传递, 一直到目标

        // 获取标签对象var oBox1 = document.getElementById('box1');var oBox2 = document.getElementById('box2');var oBody = document.body;// 捕获oBox1.addEventListener('click', function(){console.log('触发了box1的点击事件');}, true)oBox2.addEventListener('click', function(){console.log('触发了box2的点击事件');}, true)oBody.addEventListener('click', function(){console.log('触发了body的点击事件');}, true)

解释说明

1. addEventListener第三个参数默认值为false，代表传播方式为冒泡
2. 如果想改变传播方式为捕获, 那么需要将第三个参数传递为true

三、事件委托

1. 因为事件冒泡的存在, 所以点击子元素时, 一定会触发给父级
2. 所以可以将子元素统一的事件, 都提交给父级
3. e.target: 触发事件的事件源

        
1
2
3

1、事件委托的说明

        // 获取标签对象var oUl = document.querySelector('ul');oUl.addEventListener('click', function(event){console.log(event.target.nodeName);})

        // 获取标签对象var oUl = document.querySelector('ul');oUl.addEventListener('click', function(event){// 判断if(event.target.nodeName === 'LI'){console.log('点击了li');}})

2、为什么要用事件委托

1. 动态的添加了li时, 新加的li没有绑定上事件, 需要动态添加完成后重新绑定事件, 这样操作比较麻烦，所以此时可以利用事件委托
2. li 的点击事件必须委托给父级的点击事件

        // 获取标签对象var oUl = document.querySelector('ul');var oLi = [...document.querySelectorAll('li')];// 创建一个Li节点var newLi = document.createElement('li');newLi.innerText = '我是通过JS创建的';oUl.appendChild(newLi);// 此时页面只有3个li, 所以新插入的li没有点击事件oLi.forEach(function (item, index) {item.onclick = function () {console.log(index + 1)}})

四、阻止默认事件

    点击跳转

1、方法一

• return false; 阻止a标签跳转

        var oA = document.querySelector('a');oA.onclick = function (e) {return false}

2、方法二

• preventDefault();拦截之后, 取消了a标签的默认跳转功能

        var oA = document.querySelector('a');oA.onclick = function (e) {  e.preventDefault()}