1. 程式人生 > >jQuery事件之傳遞引數

jQuery事件之傳遞引數

   這次依然在Firefox中的firebug來測試這些功能。在我的頁面中有P標籤,input標籤(type=button)和一個img標籤;
    1:傳遞引數:
        A:使用trigger來觸發事件:
             $('p:first').bind('myclick',function(event,arg1,arg2){
             //第一引數event,是事件必須的,沒有pageX這些屬性;可以使用console.log(event)來檢視
                 $(arg1).appendTo('body');
                 console.log(arg2);
                 });
             $('input').click(function(){
                 $('p:first').trigger('myclick',//這裡觸發了myclick事件
                  ['<div><a href="http://www.google.com.hk">google</a></div>',//第一個引數 DOM
                   'this is to console.log']); //第二個引數 string
                 });
        B:使用bind來傳遞引數:
            原形:
bind('事件'[,引數],函式);
            在這裡引數被當做event.data的值來處理的,引數可以使任何格式的;該例為JSON格式的。
            var name_value='stonecold';
            $('p').bind('click',{name:name_vlaue},function(event){
                    //event和A中的解釋一樣
                 console.log(event.data.name);//結果在控制檯上顯示為stonecold
                   });
    2:事件相同名稱空間不同事件:
         在這裡我們綁定了一個名稱空間:spacename,這個名稱空間有點特殊,在後面
         $('img:first').bind('click.spacename',function(){
             console.log('this is the click event for spacename ');
            });
         $('img:first').bind('mouseenter.spacename',function(){
            console.log('this is the mouseenter event for spacename');
            });
         $('img:first').bind('click
',function(){
             console.log('this is the click event without spacename ');
            });
         拆除在名稱空間spacename下的所有的事件。即click這個事件還可以使用 ,名稱空間前要有點。
        $('img:first').unbind('.spacename');
    3:相同的事件名不同的名稱空間:
        $('img:first').bind('click.spacename',function(){
             console.log('this is the click event for spacename ');
            });
        $('img:first').bind('click',function(){
             console.log('this is the click event without spacename');
            });
    在這裡如果使用上例中的bind這個函式的話是不起作用的,在這裡使用trigger函式,使用後面的感嘆號是不會觸發有名稱空間的事件。
       $('input').click(function(){
             $('img:first').trigger('click!
');
            });
    4:在簡單的事件中傳遞引數:
       所謂的簡單事件就是使用click這種格式,不是使用bind這種格式;
       在這種事件中不能直接傳遞引數,可以利用閉包這種JavaScript特性來傳遞引數;
       A:首先定義一個函式,在點選的時候觸發:
          function fn_name(arg1){
           $(arg1).appendTo('body');
               }
       B:定義一個變數作為引數傳遞
          var arg='<a href="http://www.google.com.hk">google<a>';
          $('img:first').click(function(){
             fn_name(arg);
              });
        這樣就可以在事件中傳遞引數了;