jquery的事件綁定

序言：這幾周都在作響應式的網頁，因此天天用到的知識點也差很少，因此今天我就來複習一下jQuery的事件綁定：

知識點+實例：

首先引用：<script src="jquery/jquery-1.11.1.js"></script>   // jQuery插件

 

1.HTML代碼：

<div id="div1" style="background:#F05205;width:200px;height:200px">
<input id="btn1" type="button" value="按鈕"/>
</div>

<input type="button" value="請點擊我"/>

<div id="div1" style="width: 400px;height:400px;border:1px solid red">

<div id="div2" style="width: 300px;height:300px;border:1px solid blue">

<div id="div3" style="width: 200px;height:200px;border:1px solid yellow"></div>
</div>
</div>
<div class="clickme">click me</div>

<div id="div1" style="background:#F05205;width:200px;height:200px">
<input id="btn1" type="button" value="按鈕"/>
</div>

2.jQuery關鍵部分：

</body>
<script src="jquery/jquery-1.11.1.js"></script>
<script>

//經過e.data獲取額外數據，能夠是數字，字符串，數組，對象
$('input').bind("click",{user:'haha',age:18},function(e){
alert(e.data.age);
 })

//獲取綁定的那個 DOM 元素，至關於 this，區別與 event.target ,經過 event.target 獲取綁定的 DOM 元素   

 $('#div1').mouseover(function(e){
 alert(e.currentTarget);
})

//獲取上一次事件的返回值   
$('#div2').click(function(e){
 return '123';
 });
$('#div2').click(function(e){
alert(e.result);
})

//獲取當前的時間戳   
 $('#div3').click(function(e){
 alert(e.timeStamp);
})

//獲取鍵盤的按鍵   

$('document').keyup(function(e){

 console.log(e.which);
})

//獲取觸發元素鼠標當前的位置

//pageY/pageX獲取至關於頁面原點的垂直距離/水平距離  

//screenY/screenX獲取顯示屏位置的垂直距離/水平距離 

//clientY/clientX相對於頁面視口位置的垂直距離/水平距離 
$(document).click(function(e){
alert(e.screenY+' '+ e.pageY+ ' '+ e.clientY);
})

 

$('input').click(function(e){
 alert("這是個人第一次點擊！！")
});

//模擬用戶點擊行爲
$('input').trigger('click');

 

//注意：當傳遞一個值的時候，直接傳遞便可。當兩個值以上，須要在先後用中括號包含 起來。但不能認爲是數組形式，下面給出一個複雜的說明。 

//有時在模擬用戶行爲的時候，咱們須要給事件執行傳遞參數，這個參數相似與 `event.data` 的額外數據，能夠能夠是數字、字符串、數組、對象。

$('input').click(function(e){

alert("這是我第一次自模擬點擊");

}).trigger('click');

$('input').click(function(e,data1,data2){
alert(data1.a+' '+data2[0]);
}).trigger('click',[{a:'123',b:'abc'},['456','def']]);

$('input').bind('myEvent',function(e){
 alert('自定義事件!！');
}).trigger('myEvent');

事件委託
$('.clickme').bind('click',function(){
alert("jnckdnvzlkdfxv");
});

//append向一個元素裏面添加一個元素

//appendTo是把一個元素添加到一個元素裏
$('body').append('<div class="clickme">click me</div>')

//使用bind()不具有動態綁定功能，只有原始的纔有做用
//$('#btn1').bind('click',function(e){
// $(this).clone().appendTo("#div1");
//})

//使用live()具有動態綁定功能，jquery1.3才能使用，jquery1.7以後就不多用，甚至廢棄；
//$('#btn1').live('click',function(e){
// $(this).clone().appendTo("#div1");
//})

//$('#btn1').bind('click',function(e){
// $('<input type="button" value="複製的" id="btn1"/>').appendTo('#div1');
//})

//delegate()和undelegate(）在jquery1.7中被on()給整合代替了；支持連綴調用方式；
//$('#div1').delegate('#btn1','click',function(){
// $(this).clone().appendTo('#div1')
//});
//$('#div1').undelegate('#btn1','click');

// 支持連綴調用方式；
$('div').first().delegate('#btn1','click',function(){
$(this).clone().appendTo('div:first');
})

//事件綁定和解綁事件共有三組六個，bind（）和unbind();live()和die();delegate()和undelegate();
//在jquery1.7以後on()和off()就完全摒棄了 前面三組 ；
//這些事件中，不管是誰都不能自動解除事件，都得手動解除；

//但在jquery中，提供了one()方法能夠自動解除事件，但只能執行一次；$('#btn1').one('click',function(){ alert('one僅觸發一次');})</script>