Jquery 的Bind事件绑定传参

时间:2022-08-25 09:52:23


<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>下拉列表左右选择</title>
      <script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>
      <script>
         $(function(){

/*bind方法关于传参的用法*/   function leftToRight(obj){
                    alert(obj.data);
                    alert(obj.data.key1);
                    alert(obj.data.key2);
                    var a =obj.data.key1;
                    var b =obj.data.key2;

                    $(a).appendTo($(b));
                }



       var leftToRight=  function (obj){
                    alert(123);
                    alert(obj.data.key1);
                    alert(obj.data.key2);
                    var a =obj.data.key1;
                    var b =obj.data.key2;

                    $(a).appendTo($(b));
                }



   /*调用函数的时候一定不能有()*/  $("a:first").bind("click",{key1:'select:first option:selected',key2:'select:last'},leftToRight);

         });


      </script>
   </head>
   <body>
      <table border="1" width="600" align="center">
         <tr>
            <td>
               分类名称
            </td>
            <td>
               <input type="text" name="cname" value="手机数码"/>
            </td>
         </tr>
         <tr>
            <td>
               分类描述
            </td>
            <td>
               <textarea name="cdesc" rows="4" cols="20">手机数码类商品</textarea>
            </td>
         </tr>
         <tr>
            <td>
               分类商品
            </td>
            <td>
               <span style="float: left;">
                  <font color="green" face="宋体">已有商品</font><br/>
                  <select multiple="multiple" style="width: 100px;height: 200px;" >
                     <option selected="selected">IPhone6s</option>
                     <option>小米4</option>
                     <option>锤子T2</option>
                  </select>
                  <p><a href="#" style="padding-left: 20px;" >&gt;&gt;</a></p>
                  <p><a href="#" style="padding-left: 20px;" >&gt;&gt;&gt;</a></p>
               </span>
               <span style="float: right;">
                  <font color="red" face="宋体">未有商品</font><br/>
                  <select multiple="multiple" style="width: 100px;height: 200px;" >
                     <option>三星Note3</option>
                     <option>华为6s</option>
                  </select>
                  <p><a href="#" >&lt;&lt;</a></p>
                  <p><a href="#" >&lt;&lt;&lt;</a></p>
               </span>
            </td>
         </tr>
         <tr>
            <td colspan="2">
               <input type='submit' value="修改"/>
            </td>
         </tr>
      </table>
   </body>
</html>











jquery中的bind事件,详解,传参

博客分类:  前端技巧
jquery中的bind事件,详解,传参 
第一个,关于这句的解释: 
 $(window).bind('load.jcarousel', function() { windowLoaded = true; }); 
1.  一次可以绑定多个事件。如: 
Js代码   Jquery 的Bind事件绑定传参
  1. $('#foo').bind({  
  2.  click: function() {  
  3.    // do something on click  
  4.  },  
  5.  mouseenter: function() {  
  6.    // do something on mouseenter  
  7.  }  
  8. );   

  2.  任何作为type参数的字符串都是合法的;如果一个字符串不是原生的JavaScript事件名,那么这个事件处理函数会绑定到一个自定义事件上。这些自定义事件绝对不会由浏览器触发,但可以通过使用.trigger()或者.triggerHandler()在其他代码中手动触发。 

  3.  如果type参数的字符串中包含一个点(.)字符,那么这个事件就看做是有命名空间的了。这个点字符就用来分隔事件和他的命名空间。如: 

$obj.bind('click.name', handler) 那么字符串中的 click 是事件类型,而字符串 name 就是命名空间。 

第二个,传递参数以及一些特殊用法 
首先是传递参数: 
Js代码   Jquery 的Bind事件绑定传参
  1. 1.<script>        
  2. 2.function showAlert(events){         
  3. 3.    alert(events.data.foo);         
  4. 4.}         
  5. 5.$('#myBtn').bind('click',{foo:'click'},showAlert);         
  6. 6.</script>    

特殊用法: 
使用在submit上的click 
Js代码   Jquery 的Bind事件绑定传参
  1. <script> $('#myBtn').bind('click',function(){ return false; }) </script>   

还有没看明白的: 
还有一些方法可以取消默认行为和阻止事件起泡:preventDefault 和stopPropagation 
Js代码   Jquery 的Bind事件绑定传参
  1. 1.<script>         
  2. 2.$('#myBtn').bind('click',function(event){         
  3. 3.event.preventDefault();//取消默认的click行为         
  4. 4.});         
  5. 5.$('#myBtn').bind('click',function(event){         
  6. 6.event.stopPropagation();//阻止click事件起泡         
  7. 7.});         
  8. 8.        
  9. 9.</script>