事件

 

事件方式一：

var btn = document.querySelector("button");
btn.addEventListener('click', changeColor);
function changeColor(e) {
// 一 ，改变页面背景颜色
document.body.style.backgroundColor = "orange";
// 二
btn.style.backgroundColor = "orange";
// 三  e.target 获取当前事件元素，等于获取到 按钮 btn 
e.target.style.backgroundColor = "red";
// 四
this.style.backgroundColor = "red";    
}

函数 changeColor 中的 一是改变背景，其余均是改变按钮本身的背景色。

 

事件方式二：

btn.addEventListener('click', function() {
document.body.style.backgroundColor = "azure";
});

function changeColor(e) {
// 一 ，改变页面背景颜色
document.body.style.backgroundColor = "orange";
// 二
btn.style.backgroundColor = "orange";
// 三
e.target.style.backgroundColor = "red";
// 四
this.style.backgroundColor = "red";    
}

上面的方式，会得到同样的结果。但是与上一种相比，上一种相对劣势。

这种方式 btn.addEventListener('click', changeColor);  可以为 btn 添加多个事件，并不会引起冲突。并且可以通过 btn.removeEventListener('click', changeColor); 将之前添加的事件删除。