首页 > 文章 > web前端 > javascript事件绑定的方法有哪些

javascript事件绑定的方法有哪些

青灯夜游原创: 2021-09-08 18:15:296035浏览

绑定方法：1、使用“对象.on事件名 = function(){代码}”语句绑定；2、使用“事件源.addEventListener(事件名称,事件处理函数名,是否捕获);”语句绑定；3、在HTML标签中使用“onclick”属性绑定事件。

本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。

1、使用事件源的事件属性绑定处理程序

使 HTML 和 JS 分离的其中一种方式是通过使用事件源的事件属性绑定事件处理函数，绑定格式如下：

obj.on事件名 = 事件处理函数

格式中的 obj 为事件源对象。绑定的事件程序通常为一个匿名函数的定义语句，或者是一个函数名称。

事件源的事件属性绑定处理程序示例：

oBtn.onclick = function(){//oBtn为事件源对象，它的单击事件绑定了一个匿名函数定义
      alert(&#39;hi&#39;)
};

2、使用addEventListener()绑定处理程序

addEventListener() 是标准事件模型中的一个方法，对所有标准浏览器都有效。使用 addEvent Liste ner() 绑定事件处理程序的格式如下：

事件源.addEventListener(事件名称,事件处理函数名,是否捕获);

参数“事件名称”是一个不带“on”的事件名；参数“是否捕获”是一个布尔值，默认值为 false，取 false 时实现事件冒泡，取 true 时实现事件捕获。

通过多次调用 addEventListener() 可以为一个事件源对象的同一个事件类型绑定多个事件处理函数。当对象发生事件时，所有该事件绑定的事件处理函数就会按照绑定的顺序依次调用执行。另外，需要注意的是，addEventListener() 绑定的事件处理函数中的 this 指向事件源。

addEventListener() 绑定处理程序示例：

document.addEventListener(&#39;click&#39;,fn1,false);//click事件绑定fn1函数实现事件冒泡
document.addEventListener(&#39;click&#39;,fn2,true);//click事件绑定fn2函数实现事件捕获

3、使用HTML标签的事件属性绑定处理程序

需要注意的是，使用 HTML 标签的事件属性绑定事件处理程序的方式时，事件属性中的脚本代码不能包含函数声明，但可以是函数调用或一系列使用分号分隔的脚本代码。

实例：使用 HTML 标签的事件属性绑定事件处理程序。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用HTML标签的事件属性绑定事件处理程序</title>
</head>
<body>
     <input type="button" onclick="var name=&#39;张三&#39;;alert(name);" value="事件绑定测试"/>
</body>
</html>

上述代码的 button 为 click 事件的目标对象，其通过标签的事件属性 onclick 绑定了两条脚本代码进行事件的处理。上述代码在 Chrome 浏览器的运行后，当用户单击按钮时，将弹出警告对话框。

【推荐学习：javascript高级教程】

以上是javascript事件绑定的方法有哪些的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：javascript可以取数组的值吗下一篇：javascript怎么判断对象是不是存在

查看更多