概述

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

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

在DOM元素中直接绑定

  1. 绑定原生函数
<input  onclick="alert('alert')"  type="button"  value="点击我,弹出alert" />
  1. 绑定自定义函数
    <input  onclick="myAlert()"  type="button"  value="点击我,弹出alert" />
    <script type="text/javascript">
    function myAlert(){
     alert("alert");
    }
    </script>
    

在JavaScript代码中绑定

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

通过getElement获取指定Dom元素,然后绑定一个事件,这样使javascript代码和HTML标签分离,文档结构更加清晰,便于管理和开发。

绑定事件监听函数

这种方式是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。

语法:element.addEventListener(event, handle, useCapture)

参数值:

参数 描述
event 必须。字符串,指定事件名。注意: 不要使用 “on” 前缀。 例如,使用 “click” ,而不是使用 “onclick”。
handle 必须。指定要事件触发时执行的函数。当事件对象会作为第一个参数传入函数。
useCapture 可选。布尔值,指定事件是否在捕获或冒泡阶段执行。可能值:true - 事件句柄在捕获阶段执行。false- false- 默认,事件句柄在冒泡阶段执行。

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

参数 说明
eventName 事件名称。注意,与addEventListener()不同,这里的事件名称有“ on ”,如鼠标单击事件 onclick ,鼠标双击事件 ondoubleclick ,鼠标移入事件 onmouseover,鼠标移出事件 onmouseout 等。
handle 事件句柄函数,即用来处理事件的函数。

注意:

addEventListener()是标准的绑定事件监听函数的方法,是W3C所支持的,Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数;但是,IE8.0及其以下版本不支持该方法,它使用attachEvent()来绑定事件监听函数。所以,这种绑定事件的方法必须要处理浏览器兼容问题。如果浏览器不支持 addEventListener() 方法, 你可以使用 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;
        }
    }
}
function handle(){
  //这里写绑定事件的动作代码
}

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

参考