注册事件(绑定事件)
注册事件有两种方式:传统方式和方法监听注册方式
- 传统注册方式:
- 利用on开头的事件onclik
- <button οnclick=”alert(hi~)”></button>
- Btn.οnclick=function(){}
- 特点:注册事件的唯一性
- 同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数会覆盖前面注册的处理函数
- 方法监听注册方式
- W3c标准 推荐方式
- addEventListener()它是一个方法 (移动端)
- IE9之前的IE不支持此方法,可使用attachEvent()代替
- 特点:同一个元素同一个事件可以注册多个监听器(监听处理函数)
- 按注册顺序依次执行
- addEventListener 事件监听方式
eventTarget.addEventListener(‘type’(一定要加引号),listener[,useCapture])
eventTarget(监听的对象)
- Type:事件类型字符串,如:click、mouseover,注意这里不带on
- Listener:事件处理函数,事件发生时,会调用该监听函数(function)
- useCapture:可选参数,是一个布尔值,默认是false;
例: <button>高级事件</button>
<button>传统事件</button>
<script>
// 首先获取元素
var btn = document.querySelectorAll('button')
var flag = 0;
// 获取高级元素
btn[0].addEventListener('click', function() {
// alert('喜欢')
flag += 1;
// this.disabled = true;
if (flag == 1) {
alert('喜欢')
} else if (flag == 2) {
alert('喜欢')
} else {
this.disabled = true;
}
})
- </script>
- attachEvent ie9以前的版本支持
- 删除事件(解绑事件)
删除事件的方式:
divs[1].addEventListener('click', fn)
// 新方法删除
function fn() {
alert('你好吗')
divs[1].removeEventListener('click', fn)
}
divs[2].onclick = function() {
alert("我是小明同学")
// 传统方式删除
divs[2].onclick = null;
}