JS-事件绑定的三个方法

欢迎访问个人博客：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>