Jquery 事件处理 1
2013-02-05 17:35
120 查看
1. 界面初始化事件
普通js代码是用window.onLoad 事件或者用body的onLoad属性,在jquery里取代他的是$(document).ready()函数。
window.onLoad事件彼此之间是会相互覆盖的,后面写的就会覆盖前面的事件。而ready函数却可以同时存在多个,按照先后顺序执行。如果onLoad事件和ready同时存在会怎么样呢,在jQuery1.8.2 测试结果,两种办法的事件都会执行,ready绑定的事件先执行。
有的人说ready函数会被屏蔽,可能是版本不同吧。
$(document).ready()函数可以简写成$();
http://blog.sina.com.cn/s/blog_6e437c5b0106euzi.html
2. 事件绑定,为Jquery对象绑定事件。
函数:bind(type,[data],fn)
bind()方法能够为匹配元素的某个事件绑定一个事件处理函数,这个事件可以是存在的 如click,dbclick等等,也可以是自己乱起的,不存在的,如:巴嘎雅路bagayalu,caonima,wocao等等,只不过这个时候,浏览器无法识别这个事件,需要用别的方法来激活她,或者触发她,下面稍后会说。
绑定click事件 如下:
我们为每个div都绑定一个click事件,同时用click函数也为div添加处理函数。这个时候div本身的click事件会打出click,绑定的函数会打印出div的内容,这两个函数的执行是按照代码的先后顺序来的,放在前面的先执行。
在用bind绑定事件的时候,是可以向处理函数传递数据的。即第二个参数的用途。
参数值以对象的形式进行传递的。然后在处理函数中可以通过 event.data 属性值来获取该值。
这样当点击div的时候会打出 aaa + div的内容
绑定事件后可以用unbind([type],[data]) 方法解除绑定。
其中第一个参数表示要删除绑定的事件名,第二个参数表示删除的附带参数 --》不懂第二个怎么用
例:$("div").unbind("click");
注意:unbind方法会将bind方法添加的事件清除掉,同时也会把click函数添加的事件清楚掉。因此点击一次div之后在点击的什么都不打出。
jQuery还提供了另一个方法:one(type,[data],fn)。这个方法和bind用法是一样的,但是绑定函数只会执行一次。
下面开始说怎么激活自己随意定义的事件。
使用函数 trigger(type,[data])。
当然我们可以把trigger放在其他的事件中,当其他的事件激发的时候,激发自定义事件,
在下面这个示例中,每当单击按钮一次,则将会触发trigger()方法绑定的focus 事件,同时浏览器默认的 focus 事件也将被触发一次,则“<span>单击一次!</span>”HTML 源代码被增加两次。
如果把其中的trigger()替换为triggerHandler(),则单击时只执行一次插入操作(代码如下所示),系统默认的focus 事件没有被自动触发。
真的很奇怪,用div的click事件做同样的试验,不用triggerHandler 也只执行一次。
或许是被点击对象本身含有这个事件的时候,浏览器才会默认调用之。
普通js代码是用window.onLoad 事件或者用body的onLoad属性,在jquery里取代他的是$(document).ready()函数。
window.onLoad事件彼此之间是会相互覆盖的,后面写的就会覆盖前面的事件。而ready函数却可以同时存在多个,按照先后顺序执行。如果onLoad事件和ready同时存在会怎么样呢,在jQuery1.8.2 测试结果,两种办法的事件都会执行,ready绑定的事件先执行。
有的人说ready函数会被屏蔽,可能是版本不同吧。
$(document).ready()函数可以简写成$();
http://blog.sina.com.cn/s/blog_6e437c5b0106euzi.html
2. 事件绑定,为Jquery对象绑定事件。
函数:bind(type,[data],fn)
bind()方法能够为匹配元素的某个事件绑定一个事件处理函数,这个事件可以是存在的 如click,dbclick等等,也可以是自己乱起的,不存在的,如:巴嘎雅路bagayalu,caonima,wocao等等,只不过这个时候,浏览器无法识别这个事件,需要用别的方法来激活她,或者触发她,下面稍后会说。
绑定click事件 如下:
$(function(){ $("div").bind("click",function(){ alert($(this).text()); }); $("div").click(function(){ alert("click"); }); });
我们为每个div都绑定一个click事件,同时用click函数也为div添加处理函数。这个时候div本身的click事件会打出click,绑定的函数会打印出div的内容,这两个函数的执行是按照代码的先后顺序来的,放在前面的先执行。
在用bind绑定事件的时候,是可以向处理函数传递数据的。即第二个参数的用途。
参数值以对象的形式进行传递的。然后在处理函数中可以通过 event.data 属性值来获取该值。
$(function(){ $("div").bind("click",{aaa:"abc "},function(event){ // event为参数的名字,形参,随意取 alert(event.data.aaa+$(this).text()); }); });
这样当点击div的时候会打出 aaa + div的内容
绑定事件后可以用unbind([type],[data]) 方法解除绑定。
其中第一个参数表示要删除绑定的事件名,第二个参数表示删除的附带参数 --》不懂第二个怎么用
例:$("div").unbind("click");
$("div").bind("click",{aaa:"abc "},function(a){ alert(a.data.aaa+$(this).text()); }); $("div").click(function(){ alert("abc"); $("div").unbind("click"); });
注意:unbind方法会将bind方法添加的事件清除掉,同时也会把click函数添加的事件清楚掉。因此点击一次div之后在点击的什么都不打出。
jQuery还提供了另一个方法:one(type,[data],fn)。这个方法和bind用法是一样的,但是绑定函数只会执行一次。
下面开始说怎么激活自己随意定义的事件。
使用函数 trigger(type,[data])。
$(function(){ $("div").bind("wocao",function(){ alert($(this).text()+"wocao"); }); $("div").trigger("wocao"); });如上,我们自定义一个事件,界面加载完成后,会调用trigger方法来触发bind绑定的事件,所有会直接弹出消息框。
当然我们可以把trigger放在其他的事件中,当其他的事件激发的时候,激发自定义事件,
$("div").bind("me", function () { alert($(this).text()); }); $("div").bind("mouseover",function(){ $("div").trigger("me"); });这样在鼠标移过div的时候来激发自定义的事件。----有点不明白,我们把事件的处理直接写在mouseover的事件处理函数里就可以了,干嘛非要这么麻烦,菜鸟啊,不懂其深意,求指教。
在下面这个示例中,每当单击按钮一次,则将会触发trigger()方法绑定的focus 事件,同时浏览器默认的 focus 事件也将被触发一次,则“<span>单击一次!</span>”HTML 源代码被增加两次。
<input type="text" value=""/> <button id="ok">ok</button> <script language="javascript" type="text/javascript"> $("input").focus(function(){ $("<span>单击一次!</span>").appendTo("body"); }); $("#ok").click(function(){ $("input").trigger("focus"); }); </script>
如果把其中的trigger()替换为triggerHandler(),则单击时只执行一次插入操作(代码如下所示),系统默认的focus 事件没有被自动触发。
$("#ok").click(function(){ $("input").triggerHandler("focus"); });
真的很奇怪,用div的click事件做同样的试验,不用triggerHandler 也只执行一次。
或许是被点击对象本身含有这个事件的时候,浏览器才会默认调用之。
相关文章推荐
- 关于jQuery用bind动态绑定事件无效的处理
- Jquery滚动条事件的处理
- Jquery学习笔记:事件处理基础介绍
- 【jQuery】on注册事件的时候处理函数自动运行
- jquery之jquery事件处理模型(影响事件传播)
- jQuery源码分析-10事件处理-Event-DOM-ready
- jQuery 1.7 正式版已经可以下载使用。jQuery是一个JavaScript库,它简化了HTML文档遍历,事件处理,动画和为网络快速发展的Ajax交互。jQuery 1.7 版本加入了新的事件API .on() 和 .off(),提
- 用jQuery处理键盘事件
- jQuery 的事件处理
- jQuery 的 live() 方法对 hover 事件的处理
- 【web前端】jQuery – 鼠标经过(hover)事件的延时处理
- jQuery源码学习(版本1.11)-事件处理-jQuery事件对象
- 使用AmplifyJS和JQuery编写更好更优雅的javascript事件处理代码
- jQuery事件处理
- jquery之jquery事件处理模型(触发事件处理程序)
- jquery中的事件处理详细介绍
- jQuery和ExtJS的timeOut超时设置和event事件处理
- jQuery源码 - 事件处理 - 整体架构
- 使用jQuery的validation后,无法引发asp.net按钮的事件处理程序
- jQuery1.6.2源码分析(三)事件处理