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

windelk

浏览: 15261 次
性别:
来自: 福州

最近访客更多访客>>

jizhuwodedao

smfself

woodding2008

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

读书 jQuery IE 浏览器 Firefox

第三章事件
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 读书笔记——第四章效果 ... | Learning JQuery 读书笔记——第一、二章

2009-04-16 08:43
浏览 2613
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论