繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jQuery学习4 浏览器的事件模型
- Javascript
- javascript 面向对象的经典实例代码
- javascript prototype原型操作笔记
- JavaScript 常见对象类创建代码与优缺点分析
- javascript 混合的构造函数和原型方式，动态原型方式
- 测试JavaScript字符串处理性能的代码
- JQuery 表单中textarea字数限制实现代码
- jQuery Selectors(选择器)的使用(六、属性篇)
- IE浏览器打印的页眉页脚设置解决方法
- javascript检测(控制 )上传文件大小
- jquery 双色表格实现代码
- JavaScript Cookie的读取和写入函数
- JavaScript 利用Cookie记录用户登录信息
- JavaScript Cookie显示用户上次访问的时间和次数
- JavaScript Cookie 直接浏览网站分网址
- javascript OFFICE控件测试代码
- javascript setTimeout和setInterval 的区别
- javascript弹出窗口 window.open使用方法以及参数说明分析篇
- 可以用来搜索当前页面内容的js代码
- 动态调整textarea中字体的大小代码
- 为指定元素增加样式的js代码
Javascript 中的 jQuery学习4 浏览器的事件模型
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-02-27 浏览: 98 ::
收藏到网摘: 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
