事件与事件对象（一）

最新推荐文章于 2023-06-19 19:06:45 发布

ghycn

最新推荐文章于 2023-06-19 19:06:45 发布

阅读量459

点赞数

文章标签： function 浏览器 jquery safari javascript firefox

本文链接：https://blog.csdn.net/ghycn/article/details/5869428

版权

一、摘要

事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解.

二、事件与事件对象介绍

首先看一下我们经常使用的添加事件的方式:

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3     <head>
4         <title>javascript中的事件</title>
5         <script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>
6         <script type="text/javascript">
7             $(function()
8             {
9             document.getElementById("testDiv2").onclick = showMsg;
10             })
11             function showMsg(event)
12             {
13             alert("!!!");
14             }
15         </script>
16     </head>
17     <body>
18         <div id="testDiv1" onclick="showMsg();">单击事件 1</div>
19         <div id="testDiv2">单击事件 2</div>
20     </body>
21 </html>

我们最常使用为元素添加onclick元素属性的方式添加事件.

为testDiv2的添加onclick事件的方式是修改Dom属性.

在上一章中已经说明了什么是元素属性, 什么是Dom属性.这两种方式的效果相同. 当单击div时会显示提示框.

请注意, 虽然效果相同, 但是并不等效.

1 document.getElementById("testDiv2").onclick = showMsg;

等效于:

1 <div id="testDiv1" onclick="alert("!!!");">单击事件 1</div>

注意两者的区别了吗? 我们常用的修改元素属性添加事件的方式, 实际上是建立了一个匿名函数:

1 document.getElementById("testDiv1").onclick = function(event)
2 {
3 alert("!!!");
4 };

这个匿名函数的签名和我们手写的showMsg签名相同, 所以可以把showMsg直接赋值给onclick.

这种方式的弊端是:

1. 只能为一个事件绑定一个事件处理函数. 使用"="赋值会把前面为此事件绑定的所有事件处理函数冲掉.

2. 在事件函数(无论是匿名函数还是绑定的函数)中获取事件对象的方式在不同浏览器中要特殊处理:

IE中,事件对象是window对象的一个属性.事件处理函数必须这样访问事件对象:

1 obj.onclick=function()
2 {
3 var oEvent = window.event;
4 }

在DOM标准中,事件对象必须作为唯一参数传给事件处理函数:

1 obj.onclick=function()
2 {
3     var oEvent = arguments[0];
4 }

除了使用argument[0]访问此参数, 我们也可以指定参数名称,上面的代码等同于:

1 obj.onclick=function(oEvent)
2 {
3     //处理操作
4 }

目前兼容DOM的浏览器有Firefox,Safari,Opera,IE7等.

3. 添加多播委托的函数在不同浏览器中是不一样的.

下面是在"Javascript公共脚本库系列(二): 添加事件多播委托的方法"文章中, 提供的兼容多浏览器添加多播委托的方法:

1 //统一的为对象添加多播事件委托的方法
2 /*
3 参数说明:
4 oTarget : 要添加事件的对象.比如"document".
5 sEventType : 事件类型.比如单击事件"click".
6 fnHandler : 发生事件时调用的方法. 比如一个静态函数"hideCalendar"
7 使用举例:
8 //单击页面的任何元素,只要没有取消冒泡,都可以关闭日历控件
9 var cf = document.getElementById("CalFrame");
10 if( cf != null && hideCalendar != null )
11 {
12 ScriptHelper.addEventListener( document, "click", hideCalendar );
13 }
14 */
15 scriptHelper.prototype.addEventListener = function(oTarget, sEventType, fnHandler)
16 {
17     if( oTarget.addEventListener )//for dom
18         {
19             oTarget.addEventListener( sEventType, fnHandler, false )
20         }
21     else if( oTarget.attachEvent )//for ie
22         {
23             oTarget.attachEvent( "on" + sEventType, fnHandler);
24         }
25 }

所以我们首先应该摒弃<div οnclick="..."></div>这种通过修改元素属性添加事件的方式. 尽量使用添加多播事件委托的方式为一个事件绑定多个事件处理函数, 比如为document对象的单击事件添加一个关闭弹出层的方法, 使用多播就不会影响document对象原有的事件处理函数.

ghycn

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2	<html xmlns="http://www.w3.org/1999/xhtml">
3	<head>
4	<title>javascript中的事件</title>
5	<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>
6	<script type="text/javascript">
7	$(function()
8	{
9	document.getElementById("testDiv2").onclick = showMsg;
10	})
11	function showMsg(event)
12	{
13	alert("!!!");
14	}
15	</script>
16	</head>
17	<body>
18	<div id="testDiv1" onclick="showMsg();">单击事件 1</div>
19	<div id="testDiv2">单击事件 2</div>
20	</body>
21	</html>

1	document.getElementById("testDiv1").onclick = function(event)
2	{
3	alert("!!!");
4	};

1	obj.onclick=function()
2	{
3	var oEvent = window.event;
4	}

1	obj.onclick=function()
2	{
3	var oEvent = arguments[0];
4	}

1	//统一的为对象添加多播事件委托的方法
2	/*
3	参数说明:
4	oTarget : 要添加事件的对象.比如"document".
5	sEventType : 事件类型.比如单击事件"click".
6	fnHandler : 发生事件时调用的方法. 比如一个静态函数"hideCalendar"
7	使用举例:
8	//单击页面的任何元素,只要没有取消冒泡,都可以关闭日历控件
9	var cf = document.getElementById("CalFrame");
10	if( cf != null && hideCalendar != null )
11	{
12	ScriptHelper.addEventListener( document, "click", hideCalendar );
13	}
14	*/
15	scriptHelper.prototype.addEventListener = function(oTarget, sEventType, fnHandler)
16	{
17	if( oTarget.addEventListener )//for dom
18	{
19	oTarget.addEventListener( sEventType, fnHandler, false )
20	}
21	else if( oTarget.attachEvent )//for ie
22	{
23	oTarget.attachEvent( "on" + sEventType, fnHandler);
24	}
25	}