欢迎访问个人博客:http://melony.fun/
在网页中会有许多动画、按钮用来与用户进行交互响应。这个时候就常常需要遇到事件处理。事件绑定就是通过JavaScript监听到相应事件从而执行一些动作。
这篇文章记录一下关于JavaScript中事件绑定的三个方法和一些细节区别。
1、HTML标签中指定
2、JavaScript指定
3、addEventListener()
HTML标签指定
通过HTML标签的onclick
、onmousedown
等这些属性进行绑定。
优点:绑定关系直观清晰
缺点:HTML与JavaScript代码应该分离,代码才更容易维护
<button onclick="handler()"></button>
<script>
function handler(){
alert('hello world')
}
</script>
JavaScript指定
在JavaScript中获取到对应元素,通过元素的onclick
、onmousedown
这些属性赋值进行绑定。
优点:HTML与JavaScript代码分离,代码容易维护、整洁
缺点:不能绑定多个响应函数
<button id="btn"></button>
<script>
document.querySelector('#btn').onclick=handler
function handler(){
alert('hello world')
}
</script>
addEventListener()
通过元素的addEventListener()方法进行绑定可以解决不能绑定多个函数的问题。addEventListener方法一共有三个参数,如下:
1、event,字符串,指定时间名,如“click”
2、function,事件触发的响应函数
3、useCapture,可选。布尔值,指定事件是否在捕获或冒泡阶段执行。
<button id="btn"></button>
<script>
document.querySelector('#btn').addEventListener('click',hello)
document.querySelector('#btn').addEventListener('click',world)
function hello(){
alert('hello')
}
function world(){
alert('world')
}
</script>