javascript中常用的事件绑定方法

Posted 2020-10-03 wwqqnn

   我们要想让 javascript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。

在JavaScript中，有三种常用的绑定事件的方法：

1. 在DOM元素中直接绑定；
2. 在JavaScript代码中绑定；
3. 绑定事件监听函数。

一. 在DOM元素中直接绑定

这里的DOM元素，可以理解为html标签。JavaScript支持在标签中直接绑定事件，语法为：
    onXXX="JavaScript Code"

其中：

      　　onXXX 为事件名称。例如，鼠标单击事件 onclick ，鼠标双击事件 ondouble，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。

　　　　JavaScript Code 为处理事件的JavaScript代码，一般是函数。

例如，单击一个按钮，弹出警告框的代码有如下两种写法。

1. 原生函数

1. <input onclick="alert(‘谢谢支持‘)" type="button" value="点击我，弹出警告框" />

2. 自定义函数

1. <input onclick="myAlert()" type="button" value="点击我，弹出警告框" />
2. <script type="text/javascript">
3. function myAlert(){
4. alert("谢谢支持");
5. }
6. </script>

 

二. 在JavaScript代码中绑定

在JavaScript代码中（即<script>标签内）绑定事件可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。

在JavaScript代码中绑定事件的语法为：
elementObject.onXXX=function(){
    // 事件处理代码
}

其中：

• elementObject 为DOM对象，即DOM元素。
• onXXX 为事件名称。

例如，为 id="demo" 的按钮绑定一个事件，显示它的 type 属性：

1. <input id="demo" type="button" value="点击我，显示 type 属性" />
2. <script type="text/javascript">
3. document.getElementById("demo").onclick=function(){
4. alert(this.getAttribute("type")); // this 指当前发生事件的HTML元素，这里是<div>标签
5. }
6. </script>

 

三. 绑定事件监听函

绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。

addEventListener()函数语法：
elementObject.addEventListener(eventName,handle,useCapture);