javascript中常用的事件绑定方法

Posted wwqqnn

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript中常用的事件绑定方法相关的知识,希望对你有一定的参考价值。


   我们要想让 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);























以上是关于javascript中常用的事件绑定方法的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript绑定事件的方法[3种]

javaScript事件绑定

事件绑定事件监听和事件委托

事件绑定事件监听事件委托

JS 中的事件绑定事件监听事件委托

JS 事件绑定事件监听事件委托详细介绍