读jquery 权威指南[2]-事件

1. 事件冒泡

阻止事件冒泡的两种方式：

event.stopPropagation();
return false ;

2. 绑定事件——bind(type,[data],function)

type为一个或多个事件类型的字符串，data是作为event.data属性值传递给事件对象的额外对象。

一个元素绑定多个事件，可用空格隔开。

$("#btn").bind( "click mouseover", function () { ...);

通过映射方式为同一元素绑定多个事件。

$(function () {

$( ".txt").bind({

"focus": function () {

$( "#divTip").html("请输入" ).show();

},

"blur":function () {

$( "#divTip")

.show()

.html( "合法");

}

});

第二个参数data的使用。

    var info = { name: 'Cathy', date: '2014-1-24' };$(function () {$("#test").bind("click", info, function (event) {$("#divTip").show().html(event.data.name + "," + event.data.date);});});

3.事件切换

hover:鼠标悬停与鼠标移除事件切换。

    $(function () {$(".clsTitle").hover(function () {$(".clsContent").show();},function () {$(".clsContent").hide();});});

toggle:依次顺序调用N个函数，最后一个调用完成后再从第一个轮流执行。

    $(function () {$("#divTest").toggle(function () {alert(1);},function () {alert(2);},function () {alert(3);});});

4.移除事件——unbind(type,func)

参数说明：type为要移除的事件类型，func为要移除的事件处理函数。如果func为空，则移除元素所有的事件。

 function func() {$("#divTip").append("点击按钮2");}$(function () {$("#Button1").click(function () {$("#divTip").append("点击按钮1");});$("#Button2").click(func);$("#Button3").click(function () {$("input").unbind("click", func);});});

5.其他事件

one(type,[data],func)——为元素绑定只执行一次的事件。

trigger(type,[data])——在所选择的元素上触发指定类型的事件。

$(function () {
var i = 1;
function btn_Click() {
this.value = i++;}$( "input").one("click" , btn_Click);$( "input").bind("click" , btn_Click);$( "input").trigger("click" );})

6.实例应用

①选项卡效果

html Body

<script type="text/javascript">$( function () {$( "#menu li").each(function (index) {$( this).click(function () {$( this).addClass("tabFocus" ).siblings().removeClass("tabFocus");$( "#content li:eq(" + index + ")" ).show().siblings().hide();});});});
</script>

②屏幕中间弹窗遮罩

html

        <script type="text/javascript">$(function () {$("#Button1").click(function () { //注册删除按钮点击事件
                    $(".mask").show(); //显示背景色
                    showDialog(); //设置提示对话框的Top与Left
                    $(".dialog").show(); //显示提示对话框
                })/**根据当前页面与滚动条位置，设置提示对话框的Top与Left*/function showDialog() {var objW = $(window); //当前窗口var objC = $(".dialog"); //对话框var brsW = objW.width();var brsH = objW.height();var sclL = objW.scrollLeft();var sclT = objW.scrollTop();var curW = objC.width();var curH = objC.height();//计算对话框居中时的左边距var left = sclL + (brsW - curW) / 2;//计算对话框居中时的上边距var top = sclT + (brsH - curH) / 2;//设置对话框在页面中的位置
                    objC.css({ "left": left, "top": top });}$(window).resize(function () {//页面窗口大小改变事件if (!$(".dialog").is(":visible")) {return;}showDialog(); //设置提示对话框的Top与Left
                });$(".title img").click(function () { //注册关闭图片点击事件
                    $(".dialog").hide();$(".mask").hide();})$("#Button3").click(function () {//注册取消按钮点击事件
                    $(".dialog").hide();$(".mask").hide();})$("#Button2").click(function () {//注册确定按钮点击事件
                    $(".dialog").hide();$(".mask").hide();if ($("input:checked").length != 0) {//如果选择了删除行
                        $(".divShow").remove(); //删除某行数据
                    }})})</script>

本文转自陈敬（Cathy）博客园博客，原文链接：http://www.cnblogs.com/janes/p/3532584.html，如需转载请自行联系原作者

读jquery 权威指南[2]-事件相关推荐

读jquery 权威指南[4]-Ajax
一.获取异步数据 jQuery可以从服务器异步获得静态数据. ①load() $.load(url,data,callback) url要加载的页面地址, data发送到服务器的数据key/value ...
读jQuery 权威指南[6]--实用工具函数
官方地址:http://api.jquery.com/category/utilities/ 一.数组和对象操作 1. $.each--遍历 $.each(obj,function(param1,pa ...
读jquery 权威指南[7]-性能优化与最佳实践
一.优化选择器执行速度 1. 优先使用ID选择器和标记选择器使用选择器时应该首选ID选择器($("#id")),其次是标记选择器($("div")),最后再选 ...
读jquery 权威指南[3]-动画
一. 显示与隐藏--hide(),show() 1. 方法: hide(speed,[callback]); show(speed,[callback]); 说明:这两个方法还可以实现带动画效果的显示 ...
读jQuery 权威指南[5]-插件
一.说明 jQuery插件官网:http://plugins.jquery.com/ 使用插件时引用顺序:插件引用要位于主jquery库之后. 二.插件应用实例演示插件jquery.validate ...
跟小静读《jQuery权威指南》——目录
前言 2014年开始了,年底给自己制订的学习计划,第一步先从学习<jQuery权威指南>开始. jQuery大家都很比较熟悉,但是我经常是边用的时候边对照着API,这次找本书通读一遍,记录 ...
陶国荣著JQuery权威指南PDF
JQuery权威指南本书由国内资深web技术专家亲自执笔,4大web开发社区一致鼎力推荐,权威性毋庸置疑.学习网页设计中会遇到JQuery的一些特效,由51RGB小编整理的一个关于JQuery权威指 ...
jQuery权威指南（第2版）
为什么80%的码农都做不了架构师?>>> jQuery权威指南(第2版) 本书由国内资深web技术专家亲自执笔,4大web开发社区一致鼎力推荐,权威性毋庸置疑.内容新颖,基于j ...
jQuery权威指南(第2版)pdf
下载地址:网盘下载作者简介 · · · · · · 资深Web技术专家,有10余年开发经验,是国内较早专业从事Web开发的一线技术人员和培训讲师.长期致力于HTML 5.JavaScript.CS ...