DOM事件绑定
补充:文章中所有的代码都是写在html文件中,JS代码需要用< script >< /script >标签包起来。
一、DOM0级别事件绑定
DOM0级别:DOM最早版本的事件绑定方式,被所有浏览器兼容
- HTML绑定
<input type="button" id="btn" value="click me" onclick="show()"/>
- JS绑定
document.getElementById('btn').onclick = show
function show() {
console.log(1)
}
document.getElementById('btn').onclick = function () {
console.log(1)
JS绑定事件时,不能加(),否则会在页面加载时立即执行
可以绑定匿名函数
二、DOM2级别事件绑定
DOM2级别:添加了两个监听方法来添加和移除事件处理程序
- addEventListener()
第一个参数为事件名,不加on
第二个参数为函数名,不加引号
第二个参数为函数名,不加括号()
可以绑定匿名函数
document.getElementById( 'btn' ).addEventListener( 'click', show )
document.getElementById( 'btn' ).addEventListener( 'click' , function () {console.log(1)
})
- removeEventListener()
document.getElementById( 'btn' ).removeEventListener( 'click', show)
无法移除匿名添加的函数
三、DOM0级事件和DOM2级事件区别
- DOM0级事件只能绑定一个函数,前面绑定的函数会被覆盖
document.getElementById( 'btn' ).onclick = function() {
console.log(1)
}
document.getElementById( 'btn' ).onclick = function() {
console.log(2)
}
document.getElementById( 'btn' ).onclick = function() {
console.log(3)
}
运行结果如下图所示:
- DOM2级事件只能可以绑定多个函数,且有执行顺序
document.getElementById( 'btn' ).addEventListener( 'click' , function (){
console.log( 'a' )
})
document.getElementById( 'btn' ).addEventListener( 'click' , function () {
console.log( 'b')
})
document.getElementById( 'btn' ).addEventListener( 'click', function () {
console.log( 'c' )
})
运行结果如下图所示:
- DOM0级事件与DOM2级事件互不影响
function show() {
console.log( 'show' )
}
document.getElementById( 'btn' ).addEventListener( 'click', show)
document.getElementById( 'btn' ).onclick = show
运行结果如下图所示:
- DOM2级事件拥有事件流,分为三个阶段
① 捕获事件阶段
② 处于目标阶段
③ 事件冒泡阶段
④ 可通过第三个可选参数控制事件流
五、事件传参
情况一:无法绑定成功,加括号会直接执行
<input type="button" id="btn" value="click me"/>
document.getElementById( 'btn' ).onclick = foo( 'hello')
function foo(x) {
console.log(x)
}
情况二:行内绑定,注意加引号
<input type="button" id="btn" value="click me" onclick="foo( 'hello' )" />
情况三:使用匿名函数
document.getElementById( 'btn' ).onclick = function() {
foo( 'hello' )
}
补充:event为默认参数,不需传入即可调用,该对象表示触发的事件本身
event.target会返回触发该事件的目标元素;行内调用时,传入this,this代表该元素本身