JQuery基础教程:事件(下)
事件传播
为了说明不可单击的页面元素处理单击事件的能力,例如样式转换器中包含按钮的div元素或者兄弟元素h3,我们来实现一个鼠标指针进入元素和离开元素时的效果,首先需要添加一种翻转状态,表明能与鼠标进行某种交互,然后我们.hover()方法给h3元素添加这个样式,伪代码如下:
<style>
.hover {
cursor: pointer;
background-color: #afa;
}
</style
<script>
$(document).ready(function() {
$('#switcher h3').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
});
</sctipt> <body>
...
</body>
代码
注:.hover()方法接受两个函数参数。第一个函数会在鼠标指针进入被选择的元素时执行,而第二个函数会在鼠标指针离开该元素时触发
- 事件的旅程
当页面上发生一个事件时,每个层次上的DOM元素都有机会处理这个事件。以下面的页面模型为例:
<div class="foo">
<span class="bar">
<a href="http://www.example.com/">
The quick brown fox jumps over the lazy dog.
</a>
</span>
<p>
How razorback-jumping frogs can level six piqued gymnasts!
</p>
</div>
允许多个元素响应单击事件的一种策略叫做事件捕获。在事件捕获的过程中,事件首先会交给最外层的元素,接着再交给更具体的元素。在这个例子中,意味着单击事件首先会传递给<div>,然后是<span>,最后是<a>。另一种相反的策略叫做事件冒泡。即当事件发生时,会首先发送给最具体的元素,在这个元素获得响应机会之后,事件会向上冒泡到更一般的元素。在我们的例子中,<a>会首先处理事件,然后按照顺序依次是<span>和<div>
- 事件冒泡的副作用
假设在我们的例子中,为<div>添加了一个mouseout事件处理程序。当用户的鼠标指针退出这个<div>时,会按照预期运行mouseout处理程序。因为这个过程发生在顶层元素上,所以其他元素不会取得这个事件。但是,当指针从<a>元素上离开时,<a>元素也会取得一个mouseout事件。然后,这个事件会向上冒泡到<span>和<div>,从而触发上述的事件处理程序。这种冒泡序列很可能不是我们所希望的
通过事件对象改变事件的旅程
假设我们希望增大触发样式转换器折叠或扩展的可单击区域。一种方案就是将事件处理程序从标签移至包含它的<div>元素
$(document).ready(function() {
$('#switcher').click(function() {
$('#switcher button').toggleClass('hidden');
});
});
JS
完整代码如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body.large {
font-size: 1.5em;
} body.narrow {
width: 250px;
} .selected {
font-weight: bold;
} .hover {
cursor: pointer;
background-color: #afa;
} .hidden {
display:none;
} </style>
<script src="Scripts/jquery-1.8.2.js"></script>
<script src="Scripts/jquery-1.8.2.min.js"></script>
<script> $(document).ready(function () {
$('#switcher-default').addClass('selected');
$('#switcher button').on('click', function () {
var bodyClass = this.id.split('-')[1];
var bodyClass = this.id.split('-')[1];
$('body').removeClass().addClass(bodyClass);
$('#switcher button').removeClass('selected');
$(this).addClass('selected');
//eventobj.stopPropagation(); //阻止事件冒泡
//return false; //也可以阻止事件冒泡,也可以阻止默认事件
});
}); $(document).ready(function () {
$('#switcher h3').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
}); $(document).ready(function () {
$('#switcher').click(function () {
$('#switcher button').toggleClass('hidden');
});
}); </script>
</head>
<body>
<div id="switcher" class="switcher">
<h3>样式转换器</h3>
<button id="switcher-default">
默认视图
</button>
<button id="switcher-narrow">
窄列视图
</button>
<button id="switcher-large">
大字视图
</button>
</div>
<h2>Shakespeare's Plays</h2> <table>
<tr>
<td>As You Like It</td>
<td>Comedy</td>
<td></td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td>
<td>1601</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
<td>1604</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
<td>1606</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
<td>1595</td>
</tr>
<tr>
<td>Henry IV, Part I</td>
<td>History</td>
<td>1596</td>
</tr>
<tr>
<td>Henry V</td>
<td>History</td>
<td>1599</td>
</tr>
</table>
<h2>Shakespeare's Sonnets</h2>
<table>
<tr>
<td>The Fair Youth</td>
<td>1–126</td>
</tr>
<tr>
<td>The Dark Lady</td>
<td>127–152</td>
</tr>
<tr>
<td>The Rival Poet</td>
<td>78–86</td>
</tr>
</table>
</body>
</html>
完整代码
这种改变会使样式转换器的整个区域都可以通过单击切换其可见性。但时也造成了一个问题,即单击按钮会在修改内容区的样式之后折叠样式转换器。导致这个问题的原因就是事件冒泡,即事件首先被按钮处理,然后又沿着DOM树向上传递,直至到达<div id="switcher">激活事件处理程序并隐藏按钮。要解决这个问题,必须访问事件对象
注:事件对象是一种DOM结构,它会在元素获得处理事件的机会时传递给被调用的事件处理程序。这个对象中包含着与事件有关的信息(例如事件发生时的鼠标指针位置),也提供了可以用来影响事件在DOM中传递进程的一些方法
- 事件目标
变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。通过.target,可以确定DOM中首先接收到事件的元素(即实际被单击的元素)。而且,我们知道this引用的是处理事件的DOM元素,修改上面的代码可以得到如下代码
$(document).ready(function() {
$('#switcher').click(function(event) {
if (event.target == this) {
$('#switcher button').toggleClass('hidden');
}
});
});
代码
此时的代码确保了被单击的元素是<div id="switcher">,而不是其他后代元素。现在,单击按钮不会再折叠样式转换器,而单击转换器背景区则会触发折叠操作。但是,单击标签(<h3>)同样什么也不会发生,因为它也是一个后代元素
- 停止事件传播
删除刚才的event.target==this,我们来给按钮的事件处理添加一个事件对象并调用event.stopPropagation()方法,这样可以阻止按钮的事件冒泡行为,这样一来,单击按钮的事件会被按钮处理,而且只会被按钮处理。单击样式转换器的其他地方则可以折叠和扩展整个区域,代码如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body.large {
font-size: 1.5em;
} body.narrow {
width: 250px;
} .selected {
font-weight: bold;
} .hover {
cursor: pointer;
background-color: #afa;
} .hidden {
display:none;
} </style>
<script src="Scripts/jquery-1.8.2.js"></script>
<script src="Scripts/jquery-1.8.2.min.js"></script>
<script> $(document).ready(function () {
$('#switcher-default').addClass('selected');
$('#switcher button').on('click', function (event) {
var bodyClass = this.id.split('-')[1];
var bodyClass = this.id.split('-')[1];
$('body').removeClass().addClass(bodyClass);
$('#switcher button').removeClass('selected');
$(this).addClass('selected');
event.stopPropagation(); //阻止事件冒泡
//return false; //也可以阻止事件冒泡,也可以阻止默认事件
});
}); $(document).ready(function () {
$('#switcher h3').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
}); $(document).ready(function () {
$('#switcher').click(function (event) {
$('#switcher button').toggleClass('hidden');
});
}); </script>
</head>
<body>
<div id="switcher" class="switcher">
<h3>样式转换器</h3>
<button id="switcher-default">
默认视图
</button>
<button id="switcher-narrow">
窄列视图
</button>
<button id="switcher-large">
大字视图
</button>
</div>
<h2>Shakespeare's Plays</h2> <table>
<tr>
<td>As You Like It</td>
<td>Comedy</td>
<td></td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td>
<td>1601</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
<td>1604</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
<td>1606</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
<td>1595</td>
</tr>
<tr>
<td>Henry IV, Part I</td>
<td>History</td>
<td>1596</td>
</tr>
<tr>
<td>Henry V</td>
<td>History</td>
<td>1599</td>
</tr>
</table>
<h2>Shakespeare's Sonnets</h2>
<table>
<tr>
<td>The Fair Youth</td>
<td>1–126</td>
</tr>
<tr>
<td>The Dark Lady</td>
<td>127–152</td>
</tr>
<tr>
<td>The Rival Poet</td>
<td>78–86</td>
</tr>
</table>
</body>
</html>
代码
- 阻止事件默认行为
对于一个锚元素(<a>),当用户单击时浏览器会加载一个新页面,这种行为与事件处理程序不是同一个概念,它是单击锚元素的默认操作。即便在事件对象上调用.stopPropagation()方法也不能禁止这种默认操作,因为默认操作不是在正常的事件传播流中发生的。在这种情况下,.preventDefault()方法则可以阻止事件的默认行为。另外,如果想要同时停止事件传播和默认操作,可以在事件处理程序中返回false,代码如下:
$(document).ready(function () {
$('#switcher-default').addClass('selected');
$('#switcher button').on('click', function (event) {
var bodyClass = this.id.split('-')[1];
var bodyClass = this.id.split('-')[1];
$('body').removeClass().addClass(bodyClass);
$('#switcher button').removeClass('selected');
$(this).addClass('selected');
//event.stopPropagation(); //阻止事件冒泡
//event.preventDefault(); //阻止默认事件和事件冒泡
return false; //也可以阻止事件冒泡,也可以阻止默认事件
});
});
代码
事件委托
事件冒泡也有好处,通过事件冒泡我们可以用很少的代码为元素注册重复的事件,例如,一个table里有很多td,如果为每个td都注册一个hover事件,不仅需要遍历table的子节点,而且严重降低了性能,通过事件委托可以这样写
$("table").delegate("td", "hover", function(){
$(this).toggleClass("hover"); });
将每个单元格的hover事件委托给了table元素,每当单元格td触发hover事件是就会执行元素table绑定的函数fn
JQuery基础教程:事件(下)的更多相关文章
- jquery基础教程读书总结
最近静下心来看书才深刻的体会到:看书真的很重要,只有看书才能让你有心思静下心来思考. 重温<jquery基础教程> 一.事件 主要掌握常见的事件以及理解jquery的事件处理机制. 需要注 ...
- 《jQuery基础教程(第四版)》学习笔记
本书代码参考:Learning jQuery Code Listing Browser 原书: jQuery基础教程 目录: 第2章 选择元素 1. 使用$()函数 2. 选择符 3. DOM遍历方法 ...
- 《jQuery基础教程》读书笔记
最近在看<jQuery基础教程>这本书,做了点读书笔记以备回顾,不定期更新. 第一章第二章比较基础,就此略过了... 第三章 事件 jQuery中$(document).ready()与j ...
- jQuery基础之事件
jQuery基础之事件方法,如下图: 代码实现: <script src="JS/jquery-1.12.4.min.js"></script> <s ...
- JQuery基础教程:事件(上)
在页面加载后执行任务 之前我们已经知道了$(document).ready()是jQuery基于页面加载执行任务的一种主要方式,但是要知道原生的window.onload事件也可以实现相同的 ...
- jquery 基础教程[温故而知新二]
子曰:“温故而知新,可以为师矣.”孔子说:“温习旧知识从而得知新的理解与体会,凭借这一点就可以成为老师了.“ 尤其是咱们搞程序的人,不管是不是全栈工程师,都是集十八般武艺于一身.不过有时候有些知识如果 ...
- JQuery基础教程:入门
JQuery能做什么 JQuery在线手册 1.取得文档中的元素 如果不使用JavaScript库,遍历DOM(Document Object Model,文档对象模型)树,以及查找HTML文档结构中 ...
- Jquery基础教程第二版学习记录
本文仅为个人jquery基础的学习,简单的记录以备忘. 在线手册:http://www.php100.com/manual/jquery/第一章:jquery入门基础jquery知识:jquery能做 ...
- Jquery基础之事件操作
事件是用户操作时页面或页面加载时引发的用来完成javascript和HTML之间的交互操作.常见的元素点击事件.鼠标事件.键盘输入事件等,较传Javascript 相比JQuery增加并扩展了基本的事 ...
- 【总结整理】JQuery基础学习---事件篇
jQuery鼠标事件之click与dbclick事件 用交互操作中,最简单直接的操作就是点击操作.jQuery提供了两个方法一个是click方法用于监听用户单击操作,另一个方法是dbclick方法用于 ...
随机推荐
- Spark(四): Spark-sql 读hbase
SparkSQL是指整合了Hive的spark-sql cli, 本质上就是通过Hive访问HBase表,具体就是通过hive-hbase-handler, 具体配置参见:Hive(五):hive与h ...
- EventBus学习
Git位置https://github.com/greenrobot/EventBus 使用起来很方便:1. Implement any number of event handling method ...
- [navicat] Navicat for Oracle Cannot load OCI DLL
1. 本地安装的是64位的Oracle,但由于Navicat仅支持32位的,因此我们还需下载一个32位的客户端. 2.
- NAT,网络地址转换详解
这个技术,是一个非常成熟的技术了,但是,为了将其弄得清楚点,体系点,也为了备忘,还是有必要在这里梳理一下! NAT:Network Address Translation. 这个主要是用在网络地址(I ...
- Ruby Numeric
Numeric |-- Float |-- Integer |-- Fixnum |-- Bignum Numeric的基本结构 整数的差异,一般的数字Fixnum就能够处理,即使超过了Fixnum的 ...
- mootools upgrate from 1.2 to 1.3 or 1.4
Update from 1.2 to 1.3 lorenzos edited this page on 8 Jul 2011 · 2 revisions Pages 19 Home Home Chan ...
- 51nod1369 无穷印章
有一个印章,其完全由线段构成.这些线段的线足够细可以忽略其宽度,就像数学上对线的定义一样,它们没有面积.现在给你一张巨大的白纸(10亿x10亿大小的纸,虽然这个纸很大,但是它的面积毕竟还是有限的),你 ...
- Metro 应用无法打开解决办法
1.恢复默认UAC设置: 2.恢复自带防火墙服务启动类型为自动: 3.设置IE为默认浏览器(搜索和应用中): 4.如有可能使用Microsoft帐户,而不是本地帐户(仅使用有限的几个Metro应用): ...
- 【Linux】之系统工具top
top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器.下面详细介绍它的使用方法.top是一个动态显示过程,即可以通过用户按键来不断刷新 ...
- android listView Exception
- ::-/com.tongyan.tutelage W/System.err﹕ java.text.ParseException: Unparseable date: ) - ::-/com.ton ...