Javascript事件模型（三）：JavaScript事件绑定方法总结（及Jquery）

时间：2022-11-24 13:08:26

JavaScript中绑定事件的方法主要有三种：

1 在DOM元素中直接绑定

2 JavaScript代码中直接绑定

3 绑定事件监听函数

JQuery中绑定事件的几种方法

主要有on()、bind()、live()、delegate()等几种，相对应的解绑就是off()、unbind()、live()、undelegate();

1 on()、bind()、live()、delegate()中除了bind()，其他的都可以给后来追加的元素对象添加绑定事件。

2 比较推荐使用on的方式，对应解除绑定是off方法，在给动态添加的页面元素绑定事件时，on是比较好用的。这几种方法中各自有对应支持的JQuery版本。

一、在DOM元素中直接绑定

也就是直接在html标签中通过 onXXX=“” 来绑定。举个例子：

<div id="TableInTable">

<input id="TempletRow" type="button" value="模版行" onclick="TempletRow()" /><br />

<input id="DoCount" type="button" value="调试用" onclick="DoCount()" />

<input id="NestTable" type="button" value="调试用二" onclick="DoCount2()" /><br />

</div>

二、JavaScript代码中直接绑定

在JavaScript中通过查找DOM对象，对其绑定。

<input type="button" id="button" value="click"/>

<script type="text/javascript">

var v=document.getElementById("button");

v.onclick=function clickHandler(event){

alert(event.type);

}

也就是elementObject.onclick=function(){} 的格式。

三、绑定事件监听函数

这里需要了解addEventListener()和attachEvent()的函数语法。

1 elementObject.addEventListener(eventName,handle,useCapture) （支持主流浏览器、以及IE9.0及以上）

eventName:要绑定的事件名称。注意写法，比如点击事件，写成click,而不是onclick.

handle: 处理事件的函数名。但是写法上没有小括号。

useCapture:Boolean类型，是否使用捕获，一般用false，具体涉及到的会在后边总结。

2 elementObject.attachEvent(eventName,handle);（仅支持IE8及以下）

有一个兼容的好办法，相比较if...else语句，这个方法用的是try..catch错误处理语句，可以避免浏览器出现错误提示。

function addEvent(obj,type,handle){

   try{

     obj.addEventListener(type,handle,false);

   }catch(e){

     try{

       obj.attachEvent('on'+type,handle);

     }

     catch(e){

       obj['on' + type]=handle;//早期浏览器

     }

   }

}

以下是javascript事件列表

属性

当以下情况发生时，出现此事件

onabort

图像加载被中断

onblur

元素失去焦点

onchange

用户改变域的内容

onclick

鼠标点击某个对象

ondblclick

鼠标双击某个对象

onerror

当加载文档或图像时发生某个错误

onfocus

元素获得焦点

onkeydown

某个键盘的键被按下

onkeypress

某个键盘的键被按下或按住

onkeyup

某个键盘的键被松开

onload

某个页面或图像被完成加载

onmousedown

某个鼠标按键被按下

onmousemove

鼠标被移动

onmouseout

鼠标从某元素移开

onmouseover

鼠标被移到某元素之上

onmouseup

某个鼠标按键被松开

onreset

重置按钮被点击

onresize

窗口或框架被调整尺寸

onselect

文本被选定

onsubmit

提交按钮被点击

onunload

用户退出页面

相关文章