JavaScript绑定事件的... 登录

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

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

在JavaScript中,有三种常用的绑定事件的方法:

  • 在DOM元素中直接绑定;

  • 在JavaScript代码中绑定;

  • 绑定事件监听函数。

一. 在DOM元素中直接绑定

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

其中:

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

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


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

  1. 原生函数

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

实例演示:

QQ截图20161013103139.png

2. 自定义函数

<input  onclick="myAlert()"  type="button"  value="点击我,弹出警告框" />
<script type="text/javascript">
function myAlert(){
    alert("谢谢支持");
}
</script>

实例演示:QQ截图20161013103216.png

二. 在JavaScript代码中绑定

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

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

其中:

elementObject 为DOM对象,即DOM元素。

onXXX 为事件名称。


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

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

实例演示:QQ截图20161013103320.png

三. 绑定事件监听函数

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

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

QQ截图20161013103335.png

attachEvent()函数语法:
elementObject.attachEvent(eventName,handle);

QQ截图20161013103348.png

注意:事件句柄函数是指“ 函数名 ”,不能带小括号。

addEventListener()是标准的绑定事件监听函数的方法,是W3C所支持的,Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数;但是,IE8.0及其以下版本不支持该方法,它使用attachEvent()来绑定事件监听函数。所以,这种绑定事件的方法必须要处理浏览器兼容问题。

下面绑定事件的代码,进行了兼容性处理,能够被所有浏览器支持:

function addEvent(obj,type,handle){
    try{  // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
        obj.addEventListener(type,handle,false);
    }catch(e){
        try{  // IE8.0及其以下版本
            obj.attachEvent('on' + type,handle);
        }catch(e){  // 早期浏览器
            obj['on' + type] = handle;
        }
    }
}

这里使用 try{ ... } catch(e){ ... } 代替 if ... else... 语句,避免浏览器出现错误提示。

例如,为一个 id="demo" 的按钮绑定事件,鼠标单击时弹出警告框:

addEvent(document.getElementById("demo"),"click",myAlert);
function myAlert(){
    alert("又是一个警告框");
}

实例演示:

QQ截图20161013103443.png

下一节
<html> <head> <title>弹出警告框</title> </head> <body> <input onclick="myAlert()" type="button" value="点击我,弹出警告框" /> <script type="text/javascript"> function myAlert(){ alert("谢谢支持"); } </script> </body> </html>
提交 重置代码
章节 评论 笔记 课件
  • 取消 回复 发送
  • 取消 发布笔记 发送