4.1 《锋利的jQuery》jQuery中的事件
tip1:停止事件冒泡和阻止默认行为都可以用return false替代。只有当你同时需要preventDefault和stopPropagation，并且你的代码可以接受直到你的回调执行完成才停止执行浏览器的默认行为，那你就可以使用”return false“。
tip2:jquery不支持事件捕获。
tip3:hover()方法准确说是替代jquery中的bind("mouseenter")和bind("mouseleave")，而不是替代bind("mouseover")和bind("mouseout")，所以，当要触发hover方法的第二个函数时需要用trigger("mouseleave");
tip4:jquery1.7版本新增了on(),off(),delegate()和undelegate()事件绑定
1、$(document).ready()方法和window.onload方法的区别
$(document).ready(function(){
//代码
})
// 简写
// $(function () {
// //代码
// });
window.onload=function(){
//代码
}
// 等价于
// $(window).load(function(){
// //代码
// })
①执行时机：前者在DOM完全就绪时就可以被调用，后者是在网页中所有元素（包括元素的所有关联文件）完全加载到浏览器后才执行，即javascript此时才可以访问网页中的任何元素。（注意：前者当与图片有关的HTML已经解析为DOM树了，但有可能图片未加载完毕，图片的高度和宽度此时不一定有效，这时候使用load()方法，相当于js的onload()）
②多次使用：后者javascript的onload事件一次只能保存对一个函数的引用。前者可以按顺序依次执行。
2、事件绑定
（1）改变绑定事件类型
（2）简写绑定事件
3、合成事件
（1）hover()
（2）toggle()
$(function(){
// 事件绑定
// $("#panel h5.head").bind("click",function(){
// var $content=$(this).next(); //当发现相同的选择器在代码里出现多次时，用变量把它缓存起来。
// if($content.is(":visible")){
// $content.hide();
// }else{
// $content.show();
// }
// })
// 改变绑定事件
// $("#panel h5.head").bind("mouseover",function(){
// $(this).next().show();
// }).bind("mouseout",function(){
// $(this).next().hide();
// });
// 简写绑定事件
// $("#panel h5.head").mouseover(function(){
// $(this).next().show();
// }).mouseout(function(){
// $(this).next().hide();
// })
// 合成事件hover()
// $("#panel h5.head").hover(function(){
// $(this).next().show();
// },function(){
// $(this).next().hide();
// })
// toggle()
// $("#panel h5.head").toggle(function(){ //jquery从1.9版本以上就不支持toggle()方法
// $(this).next().show()
// },function(){
// $(this).next().hide();
// })
// toggle()还有另一个作用：切换元素的可见状态
$("#panel h5.head").click(function(){
$(this).next().toggle();
})
});
4、事件冒泡
当<span>、<div>、<body>同时绑定了click事件，在单击<span>元素的同时，<div>和<body>的click事件也同时触发了。
解决办法：
$("span").bind("click",function(event){
var txt=$("#msg").html()+"<p>内层span元素被单击</p>";
$("#msg").html(txt);
event.stopPropagation(); //停止事件冒泡
});
阻止默认行为：例如，单击超链接后会跳转，单击“提交”type=submit表单会提交：
$(function(){
$("#sub").bind("click",function(event){
var username=$("#username").val();
if(username==""){
$("#msg").html("<p>文本框的值不能为空。</p>")
event.preventDefault(); //阻止表单提交
}
})
});
5、事件对象的属性
event.type
event.preventDefault
event.stopPropagation
event.target
event.relatedTarget
event.pageX和event.pageY
event.which
event.metaKey
..........
6、移除事件
$(function () {
// $("#btn").bind("click",function(){
// $("#test").append("<p>我的绑定行数1</p>");
// }).bind("click",function(){
// $("#test").append("<p>我的绑定行数2</p>");
// }).bind("click",function(){
// $("#test").append("<p>我的绑定行数3</p>");
// });
// $("#delAll").click(function(){
// $("#btn").unbind("click"); //$("#btn").unbind("");
// });
// 删除其中一个事件
$("#btn").bind("click",myFun1=function(){
$("#test").append("<p>我的绑定行数1</p>");
}).bind("click",myFun2=function(){
$("#test").append("<p>我的绑定行数2</p>");
}).bind("click",myFun3=function(){
$("#test").append("<p>我的绑定行数3</p>");
}).one("click",function(){ //one()方法只触发一次，随后立即解除绑定
$("#test").append("<p>我的绑定行数4</p>");
});
$("#delTwo").click(function(){
$("#btn").unbind("click",myFun2);
});
});
7、模拟操作
//******************************************常用模拟
$("#btn").bind("click", function () {
$("#test").append("<p>我的绑定行数1</p>");
});
//******************************************自定义事件
$("#btn").bind("myClick",function(){
$("#test").append("<p>我的绑定行数myClick</p>");
})
//******************************************传递数据
$("#btn").bind("myClick1",function(event,message1,message2){
$("#test").append("<p>我的传参:"+message1+message2+"</p>");
})
// 页面一加载就触发click事件
$("#btn").trigger("click"); // 等价于
// $("#btn").click();
// 页面一加载触发自定义myClick事件
$("#btn").trigger("myClick");
// 触发传参事件
$("#btn").trigger("myClick1",["我的自定义","事件"]);
});
初始化效果：
执行默认操作
trigger()方法触发事件后，会执行浏览器默认操作。例如：$("input").trigger("focus");不仅会触发为<input>元素绑定的focus事件,也会使<input>元素本身得到焦点（这是浏览器的默认操作），如果只想触发绑定的focus事件，而不想执行浏览器默认操作，可以使用
$("input").triggerHandler("focus");
8、其他用法（添加事件命名空间）
$(function () {
// 绑定多个事件类型
// $("#div").bind("mouseover mouseout",function(){
// $(this).toggleClass("red");
// })
// 等价于
// $("#div").bind("mouseover",function(){
// $(this).toggleClass("red");
// }).bind("mouseout",function(){
// $(this).toggleClass("red");
// })
// 添加事件命名空间
// $("#div").bind("click.plugin",function(){
// $("body").append("<p>click事件</p>");
// });
// $("#div").bind("mouseover.plugin",function(){
// $("body").append("<p>mouseover事件</p>");
// });
// $("#div").bind("dblclick",function(){
// $("body").append("<p>dbclick事件</p>");
// });
// $("#btn").click(function(){
// $("#div").unbind(".plugin");
// });
// 相同事件名称，不同命名空间执行方法
$("#div").bind("click",function(){
$("body").append("<p>click事件</p>");
});
$("#div").bind("click.plugin",function(){
$("body").append("<p>click.plugin事件</p>");
});
$("#btn").click(function(){
// $("#div").trigger("click!"); //匹配所有不包含在命名空间中的click方法
$("#div").trigger("click"); //两者都被触发
})
});
4.1 《锋利的jQuery》jQuery中的事件的更多相关文章
- jquery ajax 中各个事件执行顺序
jquery ajax 中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) 4.success 5.ajaxSuccess(全局事 ...
- jquery ajax中各个事件执行顺序如下
$(function(){ setTimeout(function(){ $.ajax({ url:'/php/selectStudent.php', }); },0); $(document).aj ...
- 【锋利的jQuery】中全局事件ajaxStart、ajaxStop不执行
最近一直都在研究[锋利的jQuery],确实是一本好书,受益匪浅.但由于技术发展及版本更新等原因,里面还是有些坑需要踩的. 比如:第六章七节中提到的全局事件ajaxStart.ajaxStop照着案例 ...
- 原生js实现jquery库中部分事件的功能（jquery库封装二）
继续昨天的封装,今天的部分继昨天选择器之后实现了css样式的获取和添加,attr的获取和添加和一部分事件的封装:只是我自己的理解,不妥之处欢迎大家在评论中提出,相互学习,共同提高 /** * Crea ...
- jQuery中的事件和动画——《锋利的jQuery》（第2版）读书笔记2
第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){ // 编写代码... }); 可以简写成: $(function( ...
- 锋利的jQuery读书笔记---jQuery中的事件
jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE ...
- jQuery中的事件——《锋利的JQuery》
虽然利用原生的JavaScript事件能完成一些交互,但jQuery增加并扩展了基本的事件处理机制.jQuery不仅提供了更加优雅的事件处理语法,而且极大地增强了事件处理能力. 1.加载DOM 在Ja ...
- 锋利的jQuery ——jQuery中的事件和动画（四）
一.jQuery中的事件 1)加载DOM $(document).ready()和window.onload的区别 1>执行时机 $(document).ready(){} 方法内注册的事件, ...
- 锋利的jQuery ——jQuery中的DOM操作（三）
一.DOM的操作分类 1>DOM Core 2>HTML-DOM 3>CSS-DOM 二.jQuery中的DOM操作 DOM树 ①查找节点 1)查找元素节点 利用jQuery ...
- 锋利的JQuery学习之JQuery中的事件
一.加载DOM 在页面加载完毕之后,浏览器会通过javascript为dom元素添加事件,在常规的javascript中使用window.onload方法,而在jQuery中使用的是$(documen ...
随机推荐
- 【京东个人中心】——Nodejs/Ajax/HTML5/Mysql爬坑之静态页面
一.引言 接着上一篇,京东个人中心的所有功能数据分析完成之后,现在需要把静态页面完成,实现过程中要用到的技术有:Bootstrap.html5表单新特性等.除此之外,还要利用Node.js的Expre ...
- mock平台架构及实现
转载: http://blog.csdn.net/xkhgnc_6666/article/details/51757209 在测试过程中有些情况通过手工测试是无法测试出来的或是非常难复现,比如网络异常 ...
- 《转》 在C++中使用TinyXML2解析xml
读取和设置xml配置文件是最经常使用的操作,试用了几个C++的XML解析器,个人感觉TinyXML是使用起来最舒服的,由于它的API接口和Java的十分类似.面向对象性非常好. TinyX ...
- <<Python基础教程>>学习笔记 | 第04章 | 字典
第04章:字典 当索引不好用时 Python唯一的内建的映射类型,无序,但都存储在一个特定的键中.键能够使字符.数字.或者是元祖. ------ 字典使用: 表征游戏棋盘的状态,每一个键都是由坐标值组 ...
- apue学习笔记（第十一章 线程）
本章将进一步深入理解进程,了解如何使用多个控制线程(简单得说就是线程)在单进程环境中执行多个任务. 线程概念 每个线程都包含有表示执行环境所必须的信息:线程ID.一组寄存器值.栈.调度优先级和策略.信 ...
- c语言字符数组的初始化问题
1.字符数组的定义与初始化 字符数组的初始化,最容易理解的方式就是逐个字符赋给数组中各元素. char str[10]={ 'I',' ','a','m',' ',‘h’,'a','p','p','y ...
- 生成二维码 加密解密类 TABLE转换成实体、TABLE转换成实体集合(可转换成对象和值类型) COOKIE帮助类 数据类型转换 截取字符串 根据IP获取地点 生成随机字符 UNIX时间转换为DATETIME\DATETIME转换为UNIXTIME 是否包含中文 生成秘钥方式之一 计算某一年 某一周 的起始时间和结束时间
生成二维码 /// <summary>/// 生成二维码/// </summary>public static class QRcodeUtils{private static ...
- Lua学习六----------Lua流程控制
© 版权声明:本文为博主原创文章,转载请注明出处 Lua流程控制 - 通过程序设定一个或多个条件语句 - 在条件为true时执行指定程序代码,在条件为false时指定其他指定程序代码 - 控制结构语句 ...
- cmake学习之- set
最后更新: 2019-06-06 一.简单介绍 set 和 unset 为一对相反的指令,分别为设置变量以及取消设置变量. 什么是变量? 变量就是用于保存值的存储单元. set 有哪几种? set 有 ...
- android开发系列之数据存储
在我们的android实际开发过程,必不可少的一种行为操作对象就是数据.有些数据,对于用户而言是一次性的,这就要求我们每次进到App的时候,都需要去刷新数据.有些数据,对于用户而言又是具有一定时效性的 ...