跳到主要内容

事件处理器

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 属性始终是事件刚刚发生的元素的引用。