浅谈jquery（二)：jquery中的事件总结

<a href="http://www.iteye.com/topic/655981">浅谈jquery（一)：关于dom的一些操作</a>
一. jquery特有方法

传统的js事件是以on+事件名开头的，如onClick();onChange()等，

Jquery则是直接以事件名开头，如click();change()等；
由于jquery中的事件尽可能的往兼容浏览器做努力，这里推荐使用Jquery中的事件，而抛弃传统事件
具体方法名这里不一一列举，这里只是介绍几个jquery所独有的，兼容浏览器并很常用的一些方法


1.hover(f1,f2);

这个方法可以看做为传统js方法onMouseOVer与onMouseOut的结合体，

其中参数f1,f2为自定义的方法，f1为onMouseOVer时执行的方法，f2为onMouseOut执行的方法

例:

var f1=function(e){
 alert("鼠标在我这里");
} 
var f2=function(e){
 alert("鼠标离开了");
} 
$("#t1").hover(f1,f2); 
   

 

 
2.toggle(f1,f2,[f3,f4....]);

每当触发click事件时，依次轮流执行f1,f2,f3....定义的方法 

 

    var f1=function(){
           alert("第一次点击");
           }
           var f2=function(){
 alert("第二次点击");
} 
$("#t1").toggle(f1,f2); 

 
3.one(eventType,function);

使用该函数，方法只会执行一次 

<div id="t1" >dd</div>

 

var f2=function(){
 alert("投春哥一票");
}
 $("#t1").one("click",f2); 

 






  二.其他相关
1.浏览器判断 ：$browser+浏览器关键字

 if($.browser.mozilla){      
 alert("firefox");
 }

 
2.keydown(function(event){}) :键盘上的按键事件

这个不详细解释，下面的例子是一个按下回车时候执行的事件，由于浏览器原因，稍微进行了一下浏览器判断

     var v=function(e){   
 if(e.keyCode==13){    
  alert("回车键");    
};    
}; 
     if($.browser.mozilla){   
 $(window).keydown(v);   

 }else{    

$("body").keydown(v);   
 } 

 

 

1

 

评论

4 楼 select*from爱 2010-05-31  

<p>没用过这个插件，刚去看了下，.result(function(event, data, formatted) { }）方法是<br>在选择下拉列表中的某项时执行的，在里面调用j(this).change有意义？我按照你说的<br>写了一下，但是并没有出现你的结果，你把完成代码贴出来看看<br>或者参考API<br>http://docs.jquery.com/Plugins/Autocomplete/result</p>
<p>下面是我按照你的描述写的，不知道你是不是这个意思</p>
<pre name="code" class="js">$(document).ready(function() {
$("#example").change(function() {
alert('all select');
});
var data = "C1 c2 c3 e1 e2 e3".split(" ");
$("#example").autocomplete(data).result(
function(event, data, formatted) {

  $("#example").change(function() {
alert('sel 2');
  });
}
)

})</pre>
 
<pre name="code" class="html">&lt;input id="example" /&gt;
(try "C" or "E")</pre>
 

3 楼 kieslowski 2010-05-29  

问个问题，如何避免事件重复触发？比如某个textbox 已经绑定事件：

    j("#glAcctNo0").bind('change',
            function() {
... ...
});

由于这个文本框上有autocomplete的东西，用jquery autocomplete 插件绑了相关功能，结尾处使用了 result (handler) 来处理用户选值后，触发onchange事件

j("#glAcctNo0").autocomplete(glAccts, {
... ...
}).result(function(event, data, formatted) {
    j(this).change();
});

但是问题来了，如果用户从autocomplete下拉框里面选址，只会调用第二处的j(this).change(), 事件只调用一次，如果用户手工输入，输入的值正好在autocomplete list里面，那textbox 绑定的事件和第二处的j(this).change()都会调用到，造成同一个事件调用两次。

请问如何让event只调一次，比如让result handler在用户手工输入的时候不调用？

引用

查到的相关result handler说明：
* result (handler)  Returns: jQuery
   此事件会在用户选中某一项后触发，参数为：
   event: 事件对象. event.type为result.
   data: 选中的数据行.
   formatted:formatResult函数返回的值
   例如：
   $("#singleBirdRemote").result(function(event, data, formatted) {
//如选择后给其他控件赋值，触发别的事件等等

2 楼 select*from爱 2010-05-06  

明天的昨天 写道

楼主 总结的不错
但是太少了
讲点实际的开发经验就更好了

你可以看看这个，希望对你有所帮助，后期我会不断完善的，现在在整理资料
<a href="http://www.iteye.com/topic/655981">浅谈jquery（一)：关于dom操作的一些入门概念</a>

1 楼 明天的昨天 2010-05-06  

楼主 总结的不错
但是太少了
讲点实际的开发经验就更好了