龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

使用jQuery绑定事件例子介绍

时间:2009-12-21 11:47来源:未知 作者:admin 点击:
分享到:
jQuery的绑定事件确实方便,但今天看了一下里面绑定事件的源码是add到一个集合里,如果一个对象绑定事件的方法执行了多次就会有多个事件执行,所以在绑定的时候应先解除要绑定的

jQuery的绑定事件确实方便,但今天看了一下里面绑定事件的源码是add到一个集合里,如果一个对象绑定事件的方法执行了多次就会有多个事件执行,所以在绑定的时候应先解除要绑定的事件在做绑定动作,如下:
$('#addEle').unbind('click').bind('click', addNew);
完整例子:
<html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
         <title>StripingTable</title>
         <script type="text/javascript" src="jquery-1.2.1.js"></script>
         <script type="text/javascript">
         <!--
             $(document).ready(function(){
                 //给id为p2的绑定事件
                 $("#p2").bind("click",function(){
                     alert($(this).text());
                 });
               
                 //给id为p1的绑定事件,带参数,在内部绑定处理方法过程
                 $("#p1").bind("click",{t:new Date()},function(event){
                     alert($(this).text()+"   " + event.data.t);
                 });
               
                 //给id为p3的绑定事件,带参数,在外部绑定处理方法交给了runClick函数
                 $("#p3").bind("click",{t:new Date()},runClick);
               
                 //取消form的默认submit方法
                 $("form").bind("submit",function(){return false});
             });
           
             function runClick(event){
                 alert($(this).text()+"   " + event.data.t);
             }
         -->
         </script>
     </head>
     <body>
         <div class="title_a">一、事件处理</div>
         <div class="title_b">(一)、bind(type,data,fn)用法!</div>
         <div>不带参数</div>
         <p id="p2">点我试试</p>
         <div>带参数的</div>
         <p id="p1">a. 直接函数内绑定参数,点我再试试</p>
         <p id="p3">b. 间接函数内绑定参数,点我再试试</p>
         <div>利用绑定事件来取消掉submit的默认提交方式</div>
         <form action="http://www.wozaishuo.com.cn">
             <input type="submit" value="现在已经提交不了了"/>
         </form>
     </bdoy>
</html>

精彩图集

赞助商链接