您当前位置：首页 > web前端 > jquery > jQuery学习4：浏览器的事件模型

jQuery学习4：浏览器的事件模型

来源：程序员人生发布时间：2014-03-12 17:32:25 阅读次数：3519次

首先要知道DOM的两级模式：DOM0级和DOM2级

在DOM0级事件处理程序是通过把函数实例的引用指派到DOM元素的属性而声明的。

声明DOM第0级事件处理程序：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>DOM Level 0 Events Example - Liehuo.Net</title><script type="text/javascript" src="http://www.wfuyu.com/uploads/Common/jquery-1.3.2.min.js"></script><script type="text/javascript">$(function(){$('#vstar')[0].onmouseover = function(event) {say('Whee!');}});function say(text) {$('#console').append('<div>'+new Date()+' '+text+'</div>');}</script></head><body><img id="vstar" src="http://www.wfuyu.com/liehuo.net/images/liehuo2009/logo.gif" onclick="say('Vroom vroom!')"/><div id="console"></div></body></html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

事件冒泡：在目标元素获得机会处理事件之后，事件模型检查目标元素的父元素，看是否为同类型事件建立了处理程序。如果是，则也调用父元素的处理程序。再检查其父元素，直至检查到DOM树的顶部，这个过程称之为事件冒泡。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html id="greatgreatgrandpa"><head><title>DOM Level 0 Bubbling Example - Liehuo.Net</title><script type="text/javascript" src="http://www.wfuyu.com/uploads/Common/jquery-1.3.2.min.js"></script><script type="text/javascript">$(function(){$('*').each(function(){var current = this;this.onclick = function(event) {if (!event) event = window.event;var target = (event.target) ?event.target : event.srcElement;say('For ' + current.tagName + '#'+ current.id +' target is ' + target.id);}});});function say(text) {$('#console').append('<div>'+text+'</div>');}</script></head><body id="greatgrandpa"><div id="grandpa"><div id="pops">用鼠标点击下面的图片<br /><img id="vstar" src="http://www.wfuyu.com/liehuo.net/images/liehuo2009/logo.gif"/></div></div><div id="console"></div></body></html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

DOM第2级事件模型

DOM第0级的缺点是，属性被用于存储作为事件处理程序的函数的引用，所以每个元素对于任何特定的事件类型，每次只能注册一个事件处理程序。

DOM第2级事件模型（也称为监听器）被设计来解决这些类型的问题。每个DOM元素都定义名为addEventListener()的方法，用于把事件处理程序(监听器)附加到元素上。这个方法的格式如下所示：

addEventListener(enentType,listener,useCapture)

参数eventType是一个字符串，用于标识将要处理的时间类型。例如：click、mouseover、keydown等。

参数listener是函数的引用（或内联函数），用于在元素上建立指定类型的处理程序。

参数useCapture是布尔类型。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>DOM Level 2 Events Example - Liehuo.Net</title><script type="text/javascript" src="http://www.wfuyu.com/uploads/Common/jquery-1.3.2.min.js"></script><script type="text/javascript">$(function(){var element = $('#vstar')[0];element.addEventListener('click',function(event) {say('Whee once!');},false);element.addEventListener('click',function(event) {say('Whee twice!');},false);element.addEventListener('click',function(event) {say('Whee three times!');},false);});function say(text) {$('#console').append('<div>'+text+'</div>');}</script></head><body>用鼠标猛击网LOGO。<br /><img id="vstar" src="http://www.wfuyu.com/liehuo.net/images/liehuo2009/logo.gif"/><div id="console"></div></body></html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

以上代码简单说明我们能在同一个元素上为同一个事件类型建立多个事件处理程序。

作者博客：http://www.cnblogs.com/yangzhijia/

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 致中小站长-像自己的孩子样运营一个网站

下一篇 站长心得：浅谈友情连接的十个妙招

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点