繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jQuery学习4 浏览器的事件模型
- Javascript
- 自己开发Dojo的建议框架
- js每次Title显示不同的名言
- 不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
- 无限级别的菜单（侧拉菜单）
- 点选TOP后并不是直接跳到页顶的，而是滚动上去
- js下拉菜单中自动信息轮换播放
- 英文首字母全大写的js实现脚本
- 实例区别onClick和onDBClick两事件方法
- 改变文本框字体颜色的js脚本
- js星空效果代码
- 判断li是否有样式的js代码
- 文本框点击时文字消失，失去焦点时文字出现
- 如何让一个层关闭之后，就算刷新页面了也不显示。除非关闭页面再次打开
- 右下角弹出窗口效果代码
- JS控制对象移动效果
- 验证用户是否修改过页面的数据的实现方法
- Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
- 正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
- EXT富客户端后台管理系统 初步代码
- 不同浏览器javascript变量作用域的处理方法
Javascript 中的 jQuery学习4 浏览器的事件模型
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-02-27 浏览: 363 ::
收藏到网摘: 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
