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');

});

});

完整代码如下：

<!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方法用于 ...

随机推荐

微信公众平台Php版php开发（转）
http://www.1990c.com/?p=932 近在做微信公众平台开发,一口气写了二十几个功能,挺有意思的- 今天来分享一下开发经验~微信公众平台提供的接口很简单,先看看消息交互流程: 说 ...
SPOJ #10657. LOGIC (riddle)
1 line in Ruby(2.0), 36B: p (1..n=gets.to_i).reduce(:*)+2**n-n
剑指offer系列52---约瑟夫环问题
[题目]0,1,...n排成一个圈,从0开始每次删除第m个数,求圆圈最后个数. * [思路]1 用数组模拟圆圈.当数到最后一个数即index==n时,令index==0 重头开始遍历: * 当遇到已经 ...
【linux】如何查看和解压缩rpm文件内容
查看rpm文件中的内容 http://www.cyberciti.biz/faq/howto-list-find-files-in-rpm-package/ Use following syntax ...
Windows蓝屏后产生的.dmp分析原因
Windows系统电脑出现蓝屏后都会自动重启,重启后电脑屏幕会提示蓝屏的相关信息,此时如果你没有来得及查看,你也可以进入windows7的“事件查看器”(位置为:控制面板--系统和安全--管理工具-- ...
详解 “Android UI”设计官方教程
我们曾经给大家一个<MeeGo移动终端设备开发UI设计基础教程>,同时很多朋友都在寻找Android UI开发的教程,我们从Android的官方开发者博客找了一份幻灯片,介绍了一些Andr ...
【转】SQL SERVER 开窗函数简介
在SQL SERVER 2005/2008支持两种排名开窗函数和聚集开窗函数. 以SQL SERVER中分面页为例,按时间顺序列出定单号. WITH OrderInfo AS ( SELECT ROW ...
hibernate 大对象映射
1. 在pojo类中用Blob类和Clob public class Student { private int id; private String name; private int age; ...
Android屏幕适配建议
一.关于布局适配 1.不要使用绝对布局 2.尽量使用match_parent 而不是fill_parent . 3.能够使用权重的地方尽量使用权重(android:layout_weight) 4.如 ...
Mac下lombok无法安装到eclipse mars
eclipse升级到mars之后 , 在mac下已经不再是文件夹中有很多文件的eclipse了 , 只有一个单独的app文件.用原来的方式运行lombok再选eclipse.app已经不行了. 自己鼓 ...

JQuery基础教程：事件（下）

JQuery基础教程：事件（下）的更多相关文章

随机推荐

热门专题