JavaScript事件

标签：

JavaScript处理事件的基本机制：

1. 对DOM元素绑定事件处理函数；
2. 监听用户的操作；
3. 当用户在相应的DOM元素上进行与绑定事件对应的操作时，事件处理函数做出响应；
4. 将处理结果更新到 HTML 文档。

有三种常用的绑定事件的方法：

在DOM元素中直接绑定；

原生函数:<input  onclick="alert(‘谢谢支持‘)"  type="button"  value="点击我，弹出警告框" />

自定义函数:<input  onclick="myAlert()"  type="button"  value="点击我，弹出警告框" />
<script type="text/javascript">
function myAlert(){
    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>

绑定事件监听函数

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

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

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

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

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("又是一个警告框");
}

JavaScript所支持的事件，可以分为以下几类：

• 窗口事件 (Window Events)
• 表单元素事件 (Form Element Events)
• 图像事件 (Image Events)
• 键盘事件 (Keyboard Events)
• 鼠标事件 (Mouse Events)

仅在表单元素中有效。

该属性可用于 img 元素：

在下列元素中无效：base、bdo、br、frame、frameset、head、html、iframe、meta、param、script、style 以及 title 元素。

在下列元素中无效：base、bdo、br、frame、frameset、head、html、iframe、meta、param、script、style 以及 title 元素。

仅在 body 和 frameset 元素中有效。

JavaScript事件

标签：

原文地址：http://www.cnblogs.com/lingc/p/4619231.html