分享浏览器的事件模型。首先要知道DOM的两级模式:DOM0级和DOM2级
在DOM0级事件处理程序是通过把函数实例的引用指派到DOM元素的属性而声明的。
DOM第0级的缺点是,属性被用于存储作为事件处理程序的函数的引用,所以每个元素对于任何特定的事件类型,每次只能注册一个事件处理程序。
参数listener是函数的引用(或内联函数),用于在元素上建立指定类型的处理程序。
参数useCapture是布尔类型。
利用DOM第2级模型建立事件处理程序,代码如下:
在DOM0级事件处理程序是通过把函数实例的引用指派到DOM元素的属性而声明的。
声明DOM第0级事件处理程序,代码如下:
<!DOCTYPE> <html> <head> <title>DOM Level 0 Events Example</title> <script type="text/javascript" src="../scripts/jquery-1.2.1.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="vstar.jpg" onclick="say('Vroom vroom!')"/> <div id="console"></div> </body> </html>事件冒泡:在目标元素获得机会处理事件之后,事件模型检查目标元素的父元素,看是否为同类型事件建立了处理程序。如果是,则也调用父元素的处理程序。再检查其父元素,直至检查到DOM树的顶部,这个过程称之为事件冒泡。
事件传播从起点到DOM树的顶部,代码如下:
<!DOCTYPE> <html id="greatgreatgrandpa"> <head> <title>DOM Level 0 Bubbling Example</title> <script type="text/javascript" src="../scripts/jquery-1.2.1.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"> <img id="vstar" src="vstar.jpg"/> </div> </div> <div id="console"></div> </body> </html>DOM第2级事件模型
DOM第0级的缺点是,属性被用于存储作为事件处理程序的函数的引用,所以每个元素对于任何特定的事件类型,每次只能注册一个事件处理程序。
DOM第2级事件模型(也称为监听器)被设计来解决这些类型的问题。每个DOM元素都定义名为addEventListener()的方法,用于把事件处理程序(监听器)附加到元素上。这个方法的格式如下所示:
addEventListener(enentType,listener,useCapture)参数eventType是一个字符串,用于标识将要处理的时间类型。例如:click、mouseover、keydown等。
参数listener是函数的引用(或内联函数),用于在元素上建立指定类型的处理程序。
参数useCapture是布尔类型。
利用DOM第2级模型建立事件处理程序,代码如下:
<!DOCTYPE> <html> <head> <title>DOM Level 2 Events Example</title> <script type="text/javascript" src="../scripts/jquery-1.2.1.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> <img id="vstar" src="vstar.jpg"/> <div id="console"></div> </body> </html>
网友评论文明上网理性发言 已有0人参与
发表评论: