jQuery学习4 浏览器的事件模型
首先要知道DOM的两级模式：DOM0级和DOM2级
在DOM0级事件处理程序是通过把函数实例的引用指派到DOM元素的属性而声明的。
<!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树的顶部，这个过程称之为事件冒泡。
<!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是布尔类型。
<!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>
以上代码简单说明我们能在同一个元素上为同一个事件类型建立多个事件处理程序
相关推荐
-
jQuery学习4 浏览器的事件模型
首先要知道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 Lev
-
详解JS浏览器事件模型
什么是事件 我想你很可能听说过事件驱动, 但是事件驱动到底是什么?为什么说浏览器是事件驱动的呢? 事件驱动通俗地来说就是什么都抽象为事件. 一次点击是一个事件 键盘按下是一个事件 一个网络请求成功是一个事件 页面加载是一个事件 页面报错是一个事件 浏览器依靠事件来驱动APP运行下去,如果没有了事件驱动,那么APP会直接从头到尾运行完,然后结束,事件驱动是浏览器的基石. 一个简单的例子 其实现实中的红绿灯就是一种事件,它告诉我们现在是红灯状态,绿灯状态,还是黄灯状态. 我们需要根据这个事件自己去完
-
jQuery学习5 jQuery事件模型
jQuery事件模型的功能有: 提供建立事件处理程序的统一方法: 允许在每个元素上为每个时间类型建立多个处理程序: 采用标准的事件类型名称,例如click或mouseover: 使用Event实例可用作处理程序的参数: 对Event实例的最常用的属性进行规范化: 为取消事件和阻塞默认操作提供统一方法. jQuery绑定事件处理程序: bind()命令 $('img').bind('click',funciton(event){alert('Hi there');}); 该语句为页面上的图片绑定已
-
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
本文实例讲述了jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较.分享给大家供大家参考,具体如下: 前言: 最近在工作中做需求时发现了一个诡异的事情,在使用jQuery触发事件时,并不总是先执行默认行为,再执行绑定的事件行为,有时候可能是相反的顺序.于是上网查找了下资料,还真有个外国哥们和我遇到同一个问题!整理下笔记先~ ~ 默认行为执行顺序 一般来说,浏览器执行事件的顺序是:先执行默认行为再执行绑定的行为. 可是在 jquery 中有些时候会出现相
-
事件模型在各浏览器中存在差异
标准参考 根据 W3C DOM 2 Events 描述,EventTarget 接口被所有支持 DOM 事件模型的节点(Node)实现. 该接口提供了 'addEventListener' 和 'removeEventListener' 方法,用来绑定或解绑一个 EventListeners 接口到一个 EventTarget. DOM 2 Events 中定义了 Event 接口,用来提供事件的上下文信息,它提供了若干标准属性和方法. 实现 Event 接口的对象一般作为第一个参数传入事件处理
-
jQuery学习笔记之jQuery的事件
一.事件绑定 1.事件绑定函数 事件的绑定函数为如下形式: .bind(type [,data],fn) type:类型 如click..... data:参数 fn:事件执行的函数 例子 复制代码 代码如下: $(function(){ $(#id1).click(function(){ $(#id2).show();//id2显示 }) ; }); 二.合成事件 1.鼠标滑过事件 .hover(enter,leave) enter:鼠标光标移动到对象时触发的函数 leave:鼠标光标移出对象
-
带你快速理解javascript中的事件模型
javascript中有两种事件模型:DOM0,DOM2.而对于这两种的时间模型,我一直不是非常的清楚,现在通过网上查阅资料终于明白了一些. 一. DOM0级事件模型 DOM0级事件模型是早期的事件模型,所有的浏览器都是支持的,而且其实现也是比较简单.代码如下: <p id = 'click'>click me</p> <script> document.getElementById('click').onclick = function(event){ alert(
-
JavaScript Event学习第六章 事件的访问
现在我们已经注册了事件处理程序,对于事件我们还想更深入的了解.我们想知道事件发生时候的鼠标位置,我们想知道用户按下了哪些键.这些都是可能的,虽然这部分有很多烦人的浏览器兼容性问题.(这里可以快速查看浏览器兼容性列表). 要读出事件的属性,必须要先能访问到事件. 浏览器兼容性 站在浏览器战争的角度看,Netscape实现了一个访问模型(后来被W3C做借鉴)和很多的事件属性,同时微软也做了同样的事情.当然这两种模型是完全不兼容的.但是就像我们再简介里面说的,如果 复制代码 代码如下: if (W3C
-
JQuery 学习技巧总结
一.简介 1.1.概述随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.mootools.Bindows以及国内的JSVM框架等,通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来,将关注点转向功能需求而非实现细节上,从而提高项目的开发速度.jQuery是继prototype之后的又一个优秀的Javascript框架.它是由 John Resig 于 2006 年初创建
-
JQuery学习总结【二】
一:JQuery知识点 *:JQuery的dom操作 *:动态创建dom节点 比如动态创建表格等,在js里面进行完成. *删除节点 这里面的删除就是将其放在了一个地方,并不是真的删除,之后可以使用. *:document方法 1:.val()可以获取到文本框里面的值,若括号里面有值则直接为赋值. Eg:加法计算器 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"