jQuery实战---谈事件
2009-02-22 10:05
141 查看
今天买到了最新出版的jQuery实战,第一件事情就是看看事件这一章,网景NetScape的Dom0级的事件模型,开辟了Javascript事件的新时代,直到W3C出来Dom2级的事件模型标准,IE依然是走自己的路,让别人说去吧,不过我觉得IE应该要遵循W3C标准,也许微软为了市场地位还是没有完全遵循W3C标准,但从IE7已经开始接近W3C标准,希望微软的路线更接近开发人员会更好,这样JS开发人员就可以更轻松的写自己的业务了。
好了,废话不多少了,先看看jQuery如何完成Dom0级的事件:
Code
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Dom0Events.aspx.cs" Inherits="Dom0Events" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <html xmlns="http://www.w3.org/1999/xhtml">
6 <head runat="server">
7 <title></title>
8 <script language="javascript" type="text/javascript" src="Scripts/jquery-1.2.3-intellisense.js"></script>
9 <script type="text/javascript">
10 $(function() {
11 $("#vstar")[0].onmouseover = function(event) {
12 say("Wheel");
13 }
14 });
15 function say(text) {
16 $("#console").append("<div>" + new Date() + " " + text + "</div>");
17 }
18 </script>
19 </head>
20 <body>
21 <form id="form1" runat="server">
22 <div>
23 <img id="vstar" src="http://www.ikea.com/PIAimages/63211_PE170681_S3.jpg" onclick="say('Vroom vroom!');" />
24 <div id="console"></div>
25 </div>
26 </form>
27 </body>
28 </html>
29
要出去了,回来继续写了!
接着写一些,说事件必然要说说Event参数,IE浏览器的event对象是通过window.event来获取的,一般获取的方式:
if (!event) event = window.event;
为什么我们要获得这个参数呢,因为这个event实例上保存大量当前操作的信息,包括像当前元素、鼠标事件坐标、键盘的键值等等。
那如果我们像获取当前元素该如何来处理呢,我们来看看以下的例子:
var target = (event.target) ? event.target : event.srcElement;
为什么我们需要一个三元的运算符来获取它呢,这就是IE所造成,在IE浏览器里存储srcElement属性,而在W3C标准中是取
event.target属性的。
那接下来我们会将到有关于事件捕获和事件冒泡,两个重要的事件机制。
我们知道Html页面脚本是树状的,我们称之为Dom树,如果我们写了一段Html:
<html>
<head>
<title>测试</title>
</head>
<body>
<form>
<div>这是一个简单的Dom树</div>
</form>
</body>
</html>
我们通常称Html的头为树的顶(也称为树的根),简单的方式我们可以将这段代码抓成图片,并顺时针旋转90度,就可以看到Dom树的效果了。
对于事件的捕获简单的说就是从树顶部,开始向下寻找你要找的对象元素(也可以简单看为id或tag),而对于事件冒泡呢,简单说是
从当前元素向Dom树的顶部传播,一直到Dom的顶部,这就是常说的事件冒泡阶段了。
以上所说都是W3C标准的事件模型所支持的,对于IE事件模型,虽然微软提供了与这两个阶段相同的专有接口,但是不支持Dom2级事件模型,可惜啊!
痛苦啊!作为前段开发员又做大量的兼容工作了,标准的挂接事件的方法为addEventListener(),而IE提供的是attachEvent()方法。
好了,今天就说到这了,到这里吧,就到这里!
好了,废话不多少了,先看看jQuery如何完成Dom0级的事件:
Code
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Dom0Events.aspx.cs" Inherits="Dom0Events" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <html xmlns="http://www.w3.org/1999/xhtml">
6 <head runat="server">
7 <title></title>
8 <script language="javascript" type="text/javascript" src="Scripts/jquery-1.2.3-intellisense.js"></script>
9 <script type="text/javascript">
10 $(function() {
11 $("#vstar")[0].onmouseover = function(event) {
12 say("Wheel");
13 }
14 });
15 function say(text) {
16 $("#console").append("<div>" + new Date() + " " + text + "</div>");
17 }
18 </script>
19 </head>
20 <body>
21 <form id="form1" runat="server">
22 <div>
23 <img id="vstar" src="http://www.ikea.com/PIAimages/63211_PE170681_S3.jpg" onclick="say('Vroom vroom!');" />
24 <div id="console"></div>
25 </div>
26 </form>
27 </body>
28 </html>
29
要出去了,回来继续写了!
接着写一些,说事件必然要说说Event参数,IE浏览器的event对象是通过window.event来获取的,一般获取的方式:
if (!event) event = window.event;
为什么我们要获得这个参数呢,因为这个event实例上保存大量当前操作的信息,包括像当前元素、鼠标事件坐标、键盘的键值等等。
那如果我们像获取当前元素该如何来处理呢,我们来看看以下的例子:
var target = (event.target) ? event.target : event.srcElement;
为什么我们需要一个三元的运算符来获取它呢,这就是IE所造成,在IE浏览器里存储srcElement属性,而在W3C标准中是取
event.target属性的。
那接下来我们会将到有关于事件捕获和事件冒泡,两个重要的事件机制。
我们知道Html页面脚本是树状的,我们称之为Dom树,如果我们写了一段Html:
<html>
<head>
<title>测试</title>
</head>
<body>
<form>
<div>这是一个简单的Dom树</div>
</form>
</body>
</html>
我们通常称Html的头为树的顶(也称为树的根),简单的方式我们可以将这段代码抓成图片,并顺时针旋转90度,就可以看到Dom树的效果了。
对于事件的捕获简单的说就是从树顶部,开始向下寻找你要找的对象元素(也可以简单看为id或tag),而对于事件冒泡呢,简单说是
从当前元素向Dom树的顶部传播,一直到Dom的顶部,这就是常说的事件冒泡阶段了。
以上所说都是W3C标准的事件模型所支持的,对于IE事件模型,虽然微软提供了与这两个阶段相同的专有接口,但是不支持Dom2级事件模型,可惜啊!
痛苦啊!作为前段开发员又做大量的兼容工作了,标准的挂接事件的方法为addEventListener(),而IE提供的是attachEvent()方法。
好了,今天就说到这了,到这里吧,就到这里!
相关文章推荐
- jQuery 实战读书笔记之第六章:事件本质
- jquery实战1:鼠标右击事件,回到顶部特效
- jQuery_事件绑定如何用on实现事件委托
- 夺命雷公狗jquery---19事件切换hover
- 第73讲:Scala界面和事件处理编程进阶实战学习笔记
- jQuery为动态元素绑定事件的方式
- javascript事件绑定1-模拟jquery可爱的东西
- jQuery事件
- 夺命雷公狗jquery---22-bind为jquery对象绑定多个相关事件
- Jquery实战_读书笔记3—包装器
- 第四章(jQuery中的事件与动画)
- JQuery给动态生成的DOM元素绑定点击事件
- jquery学习手记(9)事件基础知识
- jquery 为a标签绑定click事件示例代码
- jQuery学习笔记 —— 2. DOM操作和 3. 事件绑定
- jQuery 实战读书笔记之第四章:使用特性、属性和数据
- jQuery--事件处理
- 事件委托 on和delegate的适用区别 jquery
- 李炎恢JQUERY笔记\第8章 基础事件