事件处理器
btn.onclick只能调一次。但是add.EventListener可以使用多次来调用多个函数,点击时会一起触发。
内联事件处理器属性
别用,长这样:
<button onclick="bgChange()">按下我</button>
事件冒泡
- 最先触发按钮上的单击事件
- 然后是按钮的父元素(
<div>
元素) - 然后是
<div>
的父元素(<body>
元素)
我们可以这样描述:事件从被点击的最里面的元素冒泡而出。
for (let i=0;i<picture.length;i++) {
const newImage = document.createElement('img');
newImage.setAttribute('src', picture[i]);
newImage.setAttribute('alt', "");
thumbBar.appendChild(newImage);
newImage.addEventListener("click", (event)=> {
let srcValue = event.target.getAttribute('src');
displayedImage.setAttribute('src', srcValue);
});
在这里,可以看到我们在函数中包括一个事件对象 event
,并在函数中设置背景颜色样式在 event.target
上——它指的是按钮本身。事件对象 event
的 target
属性始终是事件刚刚发生的元素的引用。