Jquery 的Bind事件绑定传参

最新推荐文章于 2019-09-17 15:21:04 发布

圣英神士

最新推荐文章于 2019-09-17 15:21:04 发布

阅读量987

点赞数

<!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 参数

jquery中的bind事件，详解，传参
第一个,关于这句的解释：
　$(window).bind('load.jcarousel', function() { windowLoaded = true; });
1.　　一次可以绑定多个事件。如：

     Js代码   
     
   
$('#foo').bind({  
 click: function() {  
   // do something on click  
 },  
 mouseenter: function() {  
   // do something on mouseenter  
 }  
);   

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

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

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

第二个，传递参数以及一些特殊用法
首先是传递参数：

     Js代码   
     
   
<script>        
function showAlert(events){         
    alert(events.data.foo);         
}         
$('#myBtn').bind('click',{foo:'click'},showAlert);         
</script>    

特殊用法：
使用在submit上的click

     Js代码   
     
<script> $('#myBtn').bind('click',function(){ return false; }) </script>

还有没看明白的：
还有一些方法可以取消默认行为和阻止事件起泡：preventDefault 和stopPropagation

     Js代码   
     
   
<script>         
$('#myBtn').bind('click',function(event){         
event.preventDefault();//取消默认的click行为         
});         
$('#myBtn').bind('click',function(event){         
event.stopPropagation();//阻止click事件起泡         
});         
        
</script>       