1. 事件
1.1 事件绑定
# 写在html元素中
<button onclick="code..."></div>
# 把事件当做元素对象的方法
btnEle.onclick = function(){
}
# 事件监听
btnEle.addEventListener('click', function(){
}, false) fasle表示 冒泡阶段触发（默认）
![]()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件的原理</title>
<style>
.active {
background: pink;
}
</style>
</head>
<body>
<h1>事件原理</h1>
<hr>
<button id="btn">按钮</button>
<script>
//事件绑定在一个元素上
//事件绑定
var btn = document.querySelector('#btn');
// function demo(){
// }
// 标准的绑定事件 添加事件监听 IE8不兼容 attachEvent('onclick', function)
// 两次监听都会被捕获到
btn.addEventListener('click', function(){
alert(100)
})
btn.addEventListener('click', function(){
alert(200)
})
//更常用-------把事件当做元素对象的方法
btn.onclick = function(){
this.classList.toggle('active');
}
</script>
</body>
</html>
事件