注册事件概述
给元素添加事件 称为 注册事件或绑定事件
注册事件有两种方式 ：传统方式 和 方法监听注册方式
传统注册方式
- 利用 on 开头的事件 比如on开通的鼠标事件
代码
<button>123</button>
<button>456</button>
<script>
var buts = document.querySelectorAll('button')
// 注册事件 点击事件
buts[0].onclick = function(){
alert('123')
} // 注册事件的唯一性 同一元素 同一事件 只能设置一个处理函数 所以只会弹出下面的事件
buts[0].onclick = function(){
alert('1234')
}
addEventListener 事件监听方式
- eventTarget.addEventListener(type,listener ,[useCapture])
- eventTarget.addEventListener( ) 方法将指定的监听器注册到 eventTarget(目标对象）上 当该对象触发指定的事件时 就会执行事件处理函数
- 该方法接受三个参数
- type: 事件类型字符串，比如click、mouseover，注意 这里不能带on
- listener :事件处理函数 事件发生时 回调用 该监听函数
- useCapture:可选参数 是一个布尔值 默认是 false
// 事件监听方式 addEventListener 添加事件监听器
// 里面的事件类型是 字符串必须加引号 且 不带on
// 同一个元素 同一个事件可以添加多个监听器
buts[1].addEventListener('click',function(){
alert('aoe')
})
buts[1].addEventListener('click',function(){
alert('mpf')
})
点玩确定会继续弹出 / 同一个元素 同一个事件可以添加多个监听器
删除事件
- 传统方式：eventTarget.onclick = null
点击弹出一次 就不在弹出
<body>
<div>123</div>
<div>456</div>
<div>789</div>
<script>
var div = document.querySelectorAll('div') // 获取元素
div[0].onclick = function(){ // 添加事件
alert('123')
div[0].onclick = null //删除事件 传统方式
}
- 方法监听注册方式
eventTarget.removeEventListener（ type，listener）
点击弹出一次 就不在弹出
// removeEventListener 删除事件
div[1].addEventListener('click', fn)
function fn(){
alert('456')
div[1].removeEventListener('click',fn)
}