javascript作为脚本语言, 可以为页面上的元素绑定事件,用于在指定事件发生时能自动调用相应的事件处理程序处理事件。那么怎么给元素添加事件?下面本篇文章给大家介绍一下JS绑定事件三种方式,希望对大家有所帮助!
为了使浏览器在事件发生时能自动调用相应的事件处理程序处理事件,需要对事件源绑定事件处理程序(绑定事件处理程序也叫注册事件处理程序)。
绑定事件处理程序有以下 3 种方式:
-
在 HTML 标签中,使用事件属性(例onclick)绑定事件处理程序。该方式通过设置标签的事件属性值为事件处理程序。这种方法现在不推荐使用, html 和 js 耦合, 不利于维护。
-
在 js 中,使用事件源的事件属性(例onclick)绑定事件处理函数。该方式通过设置事件源对象的事件属性值为事件处理函数。
-
在 js 中,使用
addEventListener()
方法绑定事件和事件处理函数(IE9 之前的版本则使用 attach Event() 方法)。
1、使用HTML标签的事件属性绑定处理程序
需要注意的是,使用 HTML 标签的事件属性绑定事件处理程序的方式时,事件属性中的脚本代码不能包含函数声明,但可以是函数调用或一系列使用分号分隔的脚本代码。
【例 1】使用 HTML 标签的事件属性绑定事件处理程序。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>使用HTML标签的事件属性绑定事件处理程序</title> </head> <body> <input type="button" onclick="var name='PHP中文网';alert(name);" value="事件绑定测试"/> </body> </html>