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 相关文章推荐
jquery插件制作简单示例说明
Feb 03 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
js 获取元素下面所有li的两种方法
Apr 14 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
解析Angular 2+ 样式绑定方式
Jan 15 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
Dec 06 Javascript
axios如何取消重复无用的请求详解
Dec 15 Javascript
js+css实现全屏侧边栏
Jun 16 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
Jul 24 Javascript
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
vue+django实现下载文件的示例
Mar 24 Vue.js
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
全国FM电台频率大全 - 31 新疆维吾尔族自治区
2020/03/11 无线电
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
php版微信js-sdk支付接口类用法示例
2016/10/12 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
javascript两段代码,两个小技巧
2010/02/04 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
2013/08/03 Javascript
Jquery 点击按钮自动高亮实现原理及代码
2014/04/25 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
利用angularjs1.4制作的简易滑动门效果
2017/02/28 Javascript
详解前端路由实现与react-router使用姿势
2017/08/07 Javascript
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
不要用强制方法杀掉python线程
2017/02/26 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
简单实现Python爬取网络图片
2018/04/01 Python
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
python多进程 主进程和子进程间共享和不共享全局变量实例
2020/04/25 Python
详解css3 mask遮罩实现一些特效
2018/10/24 HTML / CSS
基于html5绘制圆形多角图案
2016/04/21 HTML / CSS
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
拔河比赛口号
2014/06/10 职场文书
颐和园导游词
2015/01/30 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书
聘任通知书
2015/09/21 职场文书
Python机器学习三大件之一numpy
2021/05/10 Python