假设我们有很多个buttons很多个h1s( querySelectorAll('button') ),用户任意点击一个h1 or button,那个h1/button就会产生随机的按钮背景颜色和字体颜色,对于button群体我们可以在点击事件内部写function,但是又需要对于h1群体单独写同样的function,会产生冗余,于是就有了this 关键词,可以在在一个单独的function里面使用,然后对于不同的群体,buttons/h1s分别进行调用。
const makeRandColor = () => { const r = Math.floor(Math.random() * 255); const g = Math.floor(Math.random() * 255); const b = Math.floor(Math.random() * 255); return `rgb(${r}, ${g}, ${b})`; } const buttons = document.querySelectorAll('button'); for (let button of buttons) { button.addEventListener('click', colorize) } const h1s = document.querySelectorAll('h1'); for (let h1 of h1s) { h1.addEventListener('click', colorize) } function colorize() { this.style.backgroundColor = makeRandColor(); this.style.color = makeRandColor(); }