JavaScript事件传播实战

本文主要是介绍JavaScript事件传播实战，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

上篇文章我们学习了事件传播的冒泡和捕获两种类型，现在我们在实际项目中演示一下；

● 首先我们先定义一个随机数

const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);

● 接着，我们使用随机数来创建随机的rgb，来实现随机颜色

const randomInt = (min, max) =>Math.floor(Math.random() * (max - min + 1) + min);const randomColor = () =>`rgb(${randomColor(0, 255)},${randomColor(0, 255)},${randomColor(0, 255)}})`;

● 接着我们来获取导航栏的连接，实现点击一下，随机更换颜色

const randomInt = (min, max) =>Math.floor(Math.random() * (max - min + 1) + min);const randomColor = () =>`rgb(${randomColor(0, 255)},${randomColor(0, 255)},${randomColor(0, 255)}})`;document.querySelector('.nav__link').addEventListener('click', function (e) {this.style.backgroundColor = randomColor();
});

在这里插入图片描述

● 接着我们将这个元素的父级元素全部添加上这样的点击事件

const randomInt = (min, max) =>Math.floor(Math.random() * (max - min + 1) + min);const randomColor = () =>`rgb(${randomInt(0, 255)},${randomInt(0, 255)},${randomInt(0, 255)})`;document.querySelector('.nav__link').addEventListener('click', function (e) {this.style.backgroundColor = randomColor();
});document.querySelector('.nav__links').addEventListener('click', function (e) {this.style.backgroundColor = randomColor();
});document.querySelector('.nav').addEventListener('click', function (e) {this.style.backgroundColor = randomColor();
});

在这里插入图片描述

● 我们会发现当我们点击子元素时候，点击事件会被触发，他的父元素也会被触发，这是因为当你点击子元素时，事件会向上冒泡到父元素，也就是说会在父元素上触发相同的事件。这种行为称为事件冒泡。

● 我们可以查看一下事件的源事件和发生事件

const randomInt = (min, max) =>Math.floor(Math.random() * (max - min + 1) + min);const randomColor = () =>`rgb(${randomInt(0, 255)},${randomInt(0, 255)},${randomInt(0, 255)})`;document.querySelector('.nav__link').addEventListener('click', function (e) {this.style.backgroundColor = randomColor();console.log('LINK', e.target, e.currentTarget);
});document.querySelector('.nav__links').addEventListener('click', function (e) {this.style.backgroundColor = randomColor();console.log('LINKS', e.target, e.currentTarget);
});document.querySelector('.nav').addEventListener('click', function (e) {this.style.backgroundColor = randomColor();console.log('NAV', e.target, e.currentTarget);
});

在这里插入图片描述

我们发现触发事件源事件都是相同的，但是此刻变化的事件是各自自己；

● 当然，我们也可以手动去停止事件传播

const randomInt = (min, max) =>Math.floor(Math.random() * (max - min + 1) + min);const randomColor = () =>`rgb(${randomInt(0, 255)},${randomInt(0, 255)},${randomInt(0, 255)})`;document.querySelector('.nav__link').addEventListener('click', function (e) {this.style.backgroundColor = randomColor();console.log('LINK', e.target, e.currentTarget);e.stopPropagation(); //停止事件传播
});document.querySelector('.nav__links').addEventListener('click', function (e) {this.style.backgroundColor = randomColor();console.log('LINKS', e.target, e.currentTarget);
});document.querySelector('.nav').addEventListener('click', function (e) {this.style.backgroundColor = randomColor();console.log('NAV', e.target, e.currentTarget);
});

在这里插入图片描述

● 我们可以通过事件类型的第三个参数来设置事件的传播类型，默认是flase，即冒泡

const randomInt = (min, max) =>Math.floor(Math.random() * (max - min + 1) + min);const randomColor = () =>`rgb(${randomInt(0, 255)},${randomInt(0, 255)},${randomInt(0, 255)})`;document.querySelector('.nav__link').addEventListener('click', function (e) {this.style.backgroundColor = randomColor();console.log('LINK', e.target, e.currentTarget);e.stopPropagation(); //停止事件传播
});document.querySelector('.nav__links').addEventListener('click', function (e) {this.style.backgroundColor = randomColor();console.log('LINKS', e.target, e.currentTarget);
});document.querySelector('.nav').addEventListener('click',function (e) {this.style.backgroundColor = randomColor();console.log('NAV', e.target, e.currentTarget);},true
);