`
windelk
  • 浏览: 15218 次
  • 性别: Icon_minigender_2
  • 来自: 福州
社区版块
存档分类
最新评论

Learning JQuery 读书笔记——第三章 事件

阅读更多
第三章 事件
API:
复合事件:
hover(Function, Function) 当鼠标move over时触发第一个function,当鼠标move out时触发第二个function
toggle(Function, Function) 当匹配元素第一次被点击时触发第一个函数,当第二次被点击时触发第二个函数.随后的每次点击都重复对这两个函数的轮番调用。 可以使用unbind("click")来删除。
bind(type, fn) 用户将一个事件和触发事件的方式绑定到匹配对象上。
trigger(type) 用户触发type形式的事件。$("p").trigger("click")
unbind() unbind(type) unbind(type, fn)
简写的事件:Dynamic event(Function) 绑定和取消绑定提供函数的简捷方式,如:
用于browers事件
error(fn) load(fn) unload(fn) resize(fn) scroll(fn)
用于form事件
change(fn) select(fn) submit(fn)
用于keyboard事件
keydown(fn) keypress(fn) keyup(fn)
用于mouse事件
click(fn) dblclick(fn) mousedown(fn) mousemove(fn)
mouseout(fn) mouseover(fn) mouseup(fn)
用于UI事件
blur(fn) focus(fn)
以上事件的扩展再扩展为4类,如click(fn) 扩展 click()oneclick(fn) unclick(fn)
click(fn) // bind(‘click’,fn);
click() 触发对应的事件
one(type,data,fn)为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。在每个对象上,这个事件处理函数只会被执行一次。其他规则与bind()函数相同。 //<= oneclick(fn)
unbind(‘click’)  //1.1版起删除unclick(), unclick(fn)
事件触发顺序:jQuery总是按照我们注册的顺序触发事件处理程序。
1. 页面加载事件:$(document).ready()
1. 代码执行的时机:
Window.onload事件:当一个文档完全下载到浏览器中时触发(包括所有关联的文件)
$(document).ready():在DOM完全就绪并可以使用时调用。(即当HTML下载完成并解析为DOM树之后代码就可以运行)。
2. 执行多个脚本:
请确保在<body>元素的onload事件中没有注册函数,否则不会触发$(document).ready()事件。 可以在同一个页面中无限次地使用$(document).ready()事件(处理机制:每次向内部的行为队列中添加一个新函数)。其中注册的函数会按照(代码中的)先后顺序依次执行。
3. 简写
$(document).ready(function(){…});
 $().ready(function(){…});
 $(function(){…..});
2. 简单的事件:
1. this:当触发任何事件处理程序时,关键字this引用的都是携带相应行为的DOM元素。
$(this): 向$()函数传递DOM元素,更方便地将引用DOM元素的this转换为jQuery对象。 
2. 简写的事件:同上
3. 复合事件:
1. .toggle(even,odd),每次点击时切换要调用的函数。
如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。 可以使用unbind("click")来删除。
.toggleClass(class)自动检查该类是否存在,如果存在(不存在)就删除(添加)一个类。
2. .hover(over,out):解决IE6等不支持:hover伪类,跨浏览器问题。
一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。
4. 事件传播(event propagation):
模型:
1)事件捕获:事件首先会交给最外层的元素,由外至内传播
2)事件冒泡:由内至外传播冒泡。
3)DOM标准规定:应同时使用这两种策略
——先事件捕获,然后再冒泡返回DOM树顶层。
而事件处理程序可以注册到这个过程的任何一部分。为了提高跨浏览器的一致性,jQuery始终会在冒泡阶段注册事件处理程序。(在Firefox等支持标准事件模型即DOM标准的浏览器中,要把事件处理程序注册到捕获阶段,必须在标准的事件注册方法addEventListener()中将最后一个参数设置为true。)
事件传播副作用:
a) .hover()能处理。
b) 限制和终止事件:
获取事件目标:IE( window.event.srcElement)
  FF( function(event){ event.target }
停止事件传播:IE( 事件对象.cancelBubble=false;)
  FF(function(event){ event.stopPropagation())
终止默认操作(如锚链接、表单submit事件等,默认操作不是在正常的事件传播流中发生的。)
   IE( event.returnValue=false;)
FF( event.preventDefault())
总结:事件传播和默认操作是相互独立的两套机制,在二者任何一方发生时,都可以终止另一方。若要想同时停止,可在事件处理程序中返回false!
5. 绑定、移除事件处理程序
.bind(type,fn): 不会为元素重复添加同一个事件处理程序(可用变量引用)。
.unbind(type):默认移除为指定事件注册的所有处理程序。
.unbind(type,fn):更安全,明确指定移除的处理程序。
.unbind():没有参数,则删除所有绑定的事件
.one(type,data,fn): 对只需触发一次的绑定可用的简写方法。
6. 模拟用户操作(触发事件)
.trigger(type) 注意以这种方式触发事件时,不会发生事件传播;只会执行直接添加到元素的处理程序。故要注意元素的获取(应是注册了处理程序的元素)
简写: 同.bind()方法相同的简写方法。如 $(‘#acc’).click(); //触发click事件
分享到:
评论

相关推荐

    Learning jQuery - Fourth Edition

    ### 学习jQuery第四版——深入理解简单JavaScript技术 #### 一、书籍简介与背景 《Learning jQuery - Fourth Edition》是一本由Packt Publishing出版的专业jQuery学习教程,该书为第四版,出版于2013年6月。本书由...

    Learning jquery中文版

    《Learning jQuery中文版》是为想要深入理解和应用jQuery这一强大JavaScript库的开发者量身打造的一本教程。jQuery是一个高效、简洁且易用的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计...

    Learning jQuery 1.3 | Jquery基础教程(第二版)

    **jQuery基础教程(第二版)** jQuery是一款广泛应用于Web开发的JavaScript库,它极大地简化了JavaScript的使用,尤其是处理HTML文档、事件处理、动画效果以及AJAX交互。本教程将深入探讨jQuery的核心概念和功能,...

    Learning jQuery Fourth Edition

    《Learning jQuery Fourth Edition》是关于学习jQuery技术的一本英文原版基础教程,由Jonathan Chaffer和Karl Swedberg两位专家合著,第四版出版于2013年,是Packt Publishing出版社出版的一系列IT技术书籍中的一个...

    jquery 精品教程 -- Learning JQuery

    - **第三章:高级技巧** - AJAX应用 - 插件开发 - 性能优化 - **第四章:实战案例** - 实例1:动态表单验证 - 实例2:轮播图实现 - 实例3:异步数据加载 #### 七、特色与价值 - **实用性强**:本书不仅讲解...

    jQuery基础教程 (Learning jQuery) 完整源代码

    3. **事件处理**:jQuery简化了事件绑定。例如,`$("#myButton").click(function() {...})`会为ID为"myButton"的按钮添加点击事件。还可以使用`on()`方法绑定多个事件,或者使用`off()`移除事件。 4. **链式操作**...

    来本JQUery的书《Learning JQuery 1..3》

    《Learning jQuery 1.3》是一本专注于jQuery库的学习指南,旨在帮助开发者深入理解并熟练运用这个强大的JavaScript库。jQuery简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务,使得JavaScript编程变得更加...

    Learning JQuery.pdf(完整版)

    这个“Learning JQuery.pdf(完整版)”教程是为那些希望快速掌握jQuery基础知识的新手设计的。它以清晰易懂的方式介绍了jQuery的核心概念,帮助初学者在网页开发中有效地利用这个强大的工具。 ### 1. jQuery简介 ...

    Learning jQuery(4th Edition)

    《Learning jQuery(4th Edition)》是一本深受jQuery爱好者欢迎的教程,由jQuery官方推荐,专为想要深入理解和掌握jQuery技术的读者而设计。这本书的第四版提供了高清的阅读体验,并且带有详细的目录,便于读者查找和...

    Learning jQuery 3 - Fifth Edition

    Learning jQuery 3 - Fifth Edition by Adam Boduch English | 29 May 2017 | ASIN: B01N2RKEL3 | 448 Pages | AZW3 | 6.45 MB Create efficient and smart web applications with jQuery 3.0 using this step-by-...

    Learning+jquery中文版

    《Learning jQuery 中文版》是一本深入学习jQuery的权威指南,专为想要提升JavaScript编程技能,尤其是使用jQuery库的开发者而设计。jQuery是一款强大的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作以及...

    Learning jQuery 3

    Learning jQuery 3

    Learning jQuery 3(5th) epub

    Learning jQuery 3(5th) 英文epub 第5版 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,如有侵权,请联系上传者或csdn删除

    Learning jQuery 4th Edition.pdf

    **Learning jQuery Fourth Edition** 是一本专为希望深入了解 jQuery 的开发人员所编写的书籍。本书通过一系列简单的 JavaScript 技术来帮助读者提高网页交互性、设计及整体开发水平。 #### 三、核心知识点 ##### ...

    jQuery基础教程(Learning jQuery完整中文版)

    jQuery官网推荐四本教程之一,最权威和最早诠释jQuery的经典教材! 此版本为完整中文版PDF.

    Learning jquery中文版(完整版).part4

    Learning jquery中文版(完整版) 很难找的哦... 分数有些高,有分数的就下载吧! 是完整版来的哦... 共六部分

Global site tag (gtag.js) - Google Analytics