繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jQuery学习4 浏览器的事件模型
- Javascript
- js实现图片显示局部，鼠标经过显示全部的效果
- Javascript 更新 JavaScript 数组的 uniq 方法
- JavaScript 数组的 uniq 方法
- js菜单代码js菜单特效代码
- 用dom+xhtml+css制作的一个相册效果代码打包下载
- Javascript优化技巧（文件瘦身篇）
- ImageFlow可鼠标控制图片滚动
- js实现form自动完成功能
- js 生成随机汉字的问题
- 一个js封装的不错的选项卡效果代码
- setInterval 和 setTimeout会产生内存溢出
- setAttribute 与 class冲突解决
- window.addeventjs事件驱动函数集合addEvent等
- javascript replace方法与正则表达式
- js 替换
- javascript下利用for( in )语句 获得所有事件名称的代码
- javascript下用for( in )语句 获得所有style 内容的脚本代码
- javascript下for( in )语句 获得所有style 的【scrollbar】滚动条样式内容
- javascript创建数组的最简代码
- 中国象棋js代码,仅演示,未能真下
Javascript 中的 jQuery学习4 浏览器的事件模型
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-02-27 浏览: 387 ::
收藏到网摘: n/a
首先要知道DOM的两级模式：DOM0级和DOM2级 在DOM0级事件处理程序是通过把函数实例的引用指派到DOM元素的属性而声明的。 首先要知道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</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 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</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 PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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) All
