jquery手册学习--事件--bind, unbind, trigger, triggerHandler
2012-04-13 16:21
267 查看
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").bind("myEvent", function (event, message1, message2) { alert(message1 + ' ' + message2); }); $("#b1").bind({ click:function(){$("p").slideToggle(); $("p").trigger("myEvent", ["Hello","World!"]);}, mouseover:function(){$("body").css("background-color","red");}, mouseout:function(){$("body").css("background-color","#FFFFFF");} }); //$("p").trigger("myEvent", ["Hello","World!"]); $("#b2").click(function (){ alert("我是按钮2"); }); $("#b3").click(function (){ $("#b2").trigger("click");//去触发按钮2的单击事件 }); }); </script> </head> <body> <p>This is a paragraph.</p> <button id="b1">请点击这里</button> <button id="b2">按钮2</button> <button id="b3">按钮3,触发2的单击事件</button> </body> </html>
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input").click(function(){ $("input").after("发生 Input select 事件!"); }); $("button").click(function(){ $("input").triggerHandler("click"); }); }); </script> </head> <body> <input type="checkbox" name="FirstName" value="Hello World" /> <br /> <button>激活 input 域的 select 事件</button> <p>请注意,与 trigger() 方法不同,triggerHandler() 方法不会引起所发生事件的默认行为。</p> 简单的说就是:使用trigger()方法,相当于它帮你操作从而触发事件,这和你去做触发事件是一样的。<br> triggerHandler() 方法是它认为你做了什么事从而触发事件然后走这个事件里的代码,实际上你没做,<br> 它也没帮你做。比如这个例子,他认为你单击了checkbox,然后填一行文字,注意checkbox根本没被点击。<br> 这和你去点击checkbox是有区别的,你点击它也出一行文字,同时checkbox的选中状态在变化。 你可以把本例triggerHandler改成trigger看看效果。 </body> </html>
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").click(function(){ $(this).slideToggle(); }); $("button").click(function(){ $("p").unbind(); }); }); </script> </head> <body> <p>这是一个段落。</p> <p>这是另一个段落。</p> <p>点击任何段落可以令其消失。包括本段落。</p> <button>删除 p 元素的事件处理器</button><br> 可以绑定一个事件,当然也可以去除绑定事件。 </body> </html>
相关文章推荐
- JQuery中事件one、bind、unbind、live、delegate、on、off、trigger、triggerHandler的各种使用区别
- jQuery事件(ready/bind/hover/toggle/unbind/one/trigger/focus/blur/change/live)
- jQuery学习19---事件中bind与unbind
- jQuery源码分析-10事件处理-Event-事件绑定与删除-bind/unbind+live/die+delegat/undelegate
- 四,jquery事件绑定(bind)和取消事件(unbind)
- jQuery源码分析-10事件处理-Event-事件绑定与删除-bind/unbind+live/die+delegat/unde
- jquery的bind、delegate、on、one绑定事件学习记录
- jQuery 事件绑定方法(bind hover toggle live.... )、删除事件方法(unbind, die)及 事件对象
- 浅谈jQuery的bind和unbind事件(绑定和解绑事件)
- JQUERY级联操作绑定事件[jQuery,cascade,event,bind,trigger]
- JQuery中绑定事件(bind())和移除事件(unbind())
- JQuery 自动触发事件trigger和triggerHandler
- JQuery手动触发事件API之:通过代码看清trigger与triggerHandler的差别
- [知了堂学习笔记]_jQuery 事件参考手册
- js事件委托和jQuery事件绑定on , off , one , bind , unbind , die
- js事件委托和jQuery事件绑定on , off , one , bind , unbind , die
- jquery学习 - 对动态创建的元素进行事件响应(bind, live, delegate)
- Jquery中事件总结 Click ,Animate,One,Bind,UnBind等
- jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
- jQuery绑定事件监听bind和移除事件监听unbind用法实例详解