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


Posted in Javascript onFebruary 07, 2010

首先要知道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>

以上代码简单说明我们能在同一个元素上为同一个事件类型建立多个事件处理程序
Javascript 相关文章推荐
Javascript 面向对象特性
Dec 28 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
jquery 中的each()跳出循环的语句
May 23 Javascript
jQuery获取页面元素绝对与相对位置的方法
Jun 10 Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 Javascript
Bootstrap模态框案例解析
Mar 05 Javascript
详解angular ui-grid之过滤器设置
Jun 07 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
May 07 Javascript
node获取客户端ip功能简单示例
Aug 24 Javascript
layui之table checkbox初始化时选中对应选项的方法
Sep 02 Javascript
JS实现星星海特效
Dec 24 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
Nov 07 Javascript
jQuery学习3:操作元素属性和特性
Feb 07 #Javascript
jQuery学习2 选择器的使用说明
Feb 07 #Javascript
jQuery ctrl+Enter shift+Enter实现代码
Feb 07 #Javascript
JQuery 获取和设置Select选项的代码
Feb 07 #Javascript
经典海量jQuery插件 大家可以收藏一下
Feb 07 #Javascript
jQuery AnythingSlider滑动效果插件
Feb 07 #Javascript
javascript 函数速查表
Feb 07 #Javascript
You might like
PHP 简单日历实现代码
2009/10/28 PHP
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
php实现有序数组打印或排序的方法【附Python、C及Go语言实现代码】
2016/11/10 PHP
PHP框架laravel的.env文件配置教程
2017/06/07 PHP
php设计模式之装饰模式应用案例详解
2019/06/17 PHP
你的编程语言可以这样做吗?
2006/09/07 Javascript
JavaScript国旗变换效果代码
2008/08/13 Javascript
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
把字符串按照特定的字母顺序进行排序的js代码
2014/01/28 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
jquery获取radio值(单选组radio)
2014/10/16 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
Python编程中的文件操作攻略
2015/10/16 Python
Python中字符串的修改及传参详解
2016/11/30 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
使用Python3内置文档高效学习以及官方中文文档
2019/05/19 Python
Python 实现判断图片格式并转换,将转换的图像存到生成的文件夹中
2020/01/13 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
乌克兰电子产品和家用电器购物网站:TOUCH
2019/08/09 全球购物
全球性的众包图形设计市场:DesignCrowd
2021/02/02 全球购物
函授自我鉴定
2013/11/06 职场文书
洗煤厂厂长岗位职责
2014/01/03 职场文书
4s店市场专员岗位职责
2014/04/09 职场文书
面试自我介绍演讲稿
2014/04/29 职场文书
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js