jQuery事件之傳遞引數
阿新 • • 發佈:2019-02-12
這次依然在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);
});
這樣就可以在事件中傳遞引數了;
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來傳遞引數:
原形:
在這裡引數被當做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
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);
});
這樣就可以在事件中傳遞引數了;