使用jQ綁定事件
bind()方法和unbind() 在3.0的時候已被移除嫌佑，盡量減少使用霎槐』陆梗或者不用须妻。
通過DOM添加事件不會被覆蓋：
通過DOM的addEventListener添加事件可以多次添加埂伦，不會被覆蓋

 var div = document.getElementById('div');
 div.addEventListener('click',function(){
 alert('一次')
 });
 div.addEventListener('click',function(){
 alert('二次')
 });

綁定與移除事件：
on()綁定事件煞额；off()移除事件：one()綁定方法只能觸發(fā)一次；on綁定的事件不受one的影響沾谜；
添加事件:.on()方法 事件事件函數(shù)可以多次觸發(fā).

 $('div').on('click',function(){
 alert('加波關(guān)注啊');
 });
 //事件的移除膊毁。 
 $('div').off('click');
 //one();通過one綁定的事件只能觸發(fā)一次（one綁定的函數(shù)只能觸發(fā)一次）；添加一次性事件
 $('button').one('click',function(){
 alert('你猜');
 });
 //on綁定的事件函數(shù)不受one事件綁定的影響基跑。
 $('button').on('click',function(){
 alert('我出來了')
 });```

on可以同時綁定多個事件：

在匿名函數(shù)中婚温，填寫一個參數(shù)名，這個參數(shù)名就是事件對象event媳否；
// 同時綁定多個事件
$('.div1').on('mouseover dblclick', function (event) { //同時給類名為div1的對象綁定了mouseover和dblclick事件
console.log(event.type);
});```
off()移除事件：

可以同時移除所有的事件栅螟，也可以移除指定事件如果是多個荆秦，中間用逗號隔開；
 // 移除事件
 // $('.div1').off(); // 移除所有事件
 $('.div1').off('dblclick mouseover'); // off() 函數(shù)可以有參數(shù)力图，移除指定事件步绸，如果是多個，中間用空格隔開

復(fù)合事件：
.hover（）方法：

 *復(fù)合事件：搪哪。hover()事件
 * mouseenter 和 mouseover：over是鼠標(biāo)滑過標(biāo)簽觸發(fā)的時間靡努。enter是鼠標(biāo)移入標(biāo)簽就會觸發(fā)的時間。
 * 
 * */
 $('div').hover(function(){
 $(this).css("background","red");
 },
 function(){
 $(this).css("background","blue");
 });
*/```
事件的獲认邸（事件對象）：

事件類型：event.type惑朦；
```/*
*type:獲取當(dāng)前觸發(fā)的事件類型。
 */
$('div').mousemove(function(event){
 console.log(event.type);
 });

例：查看事件的類型；

 $('.div1').on('mouseover mouseout', function (event) {
 if (event.type == 'mouseover') {
 $(this).css('background-color', 'black');
 } else {
 $(this).css('background-color', 'red');
 }
 });```
target 與currentTarget：

target：觸發(fā)事件的元素；currentTarget：響應(yīng)事件的元素：
/*
*target:當(dāng)前點擊的標(biāo)簽元素 若专； 事件的執(zhí)行铺浇。

• currentTarget：是保存的是事件綁定的對象辙浑。（相應(yīng)的事件對象）事件的響應(yīng)者
• */
  $('body').click(function(event){
  //console.log(event.target); 當(dāng)點擊的是div、的時候，打印的是div 當(dāng)前點擊的是誰 target就代表誰。
  console.log(event.currentTarget); 事件有誰觸發(fā) currentTarget就代表誰
  });```
  事件的坐標(biāo):
  pageX吩蔑；pageY；clientX填抬；clientY烛芬；offsetX；offsetY飒责；screenX赘娄；screenY；

 $('body').click(function(event){
 console.log(event.pageX); 
 *pageX宏蛉， pageY：包括具有滾動條的寬度和高度;(頁面);
 console.log(event.pageY);
 console.log(event.clientX);
    *clientX,clientY： 可視區(qū)域的寬度和高度;
 console.log(event.clientY);
 console.log(event.offsetX);
    *offsetX遣臼，offsetY:不包含margin；（說白了就是margin的問題）;
 console.log(event.offsetY);
 console.log(event.screenX);
    *screenX;screenY:相對于屏幕的左上角點;
 console.log(event.screenY);
 });

取消默認(rèn)事件： event.preventDefault（）拾并；

<script type="text/javascript">
 //取消標(biāo)簽的默認(rèn)行為（事件）
 //event.preventDefault();阻止默認(rèn)行為揍堰。
 $(document).ready(function(){
 $('a').click(function(event){
 event.preventDefault(); //阻止超鏈接a 
 })```
事件冒泡：event.stopPropagation();

<script type="text/javascript">
$(document).ready(function(){
//事件冒泡 從里往外傳。
/*觸發(fā)子標(biāo)簽的某一個事件嗅义，js引擎會把這個事件傳遞到父級標(biāo)簽个榕，一直傳遞到document，如果在這個傳遞鏈中也有這個事件芥喇，該事件也會被觸發(fā)。利用事件冒泡我們可以實現(xiàn) 事件委托及代理

• 阻止事件的冒泡event.stopPropagartion();阻止在傳遞鏈中觸發(fā)事件凰萨。
• */
  //觸發(fā)子標(biāo)簽的時候依次觸發(fā)到父標(biāo)簽
  $('#div1').click(function(){
  alert("1");
  });
  $('#div2').click(function(){
  alert("2");
  });
  //阻止事件的冒泡
  $('#div3').click(function(event){
  alert("3");
  event.stopPropagation();
  });
  });```
  模擬事件：trigger继控；triggerHandle械馆；不通過用戶觸發(fā)事件，自動會觸發(fā)事件武通，一般用不到霹崎。可以利用定時器去彈冶忱。用戶的體驗會更好尾菇。

<script type="text/javascript">
 $(document).ready(function(){
 /*
 *事件模擬：不通過用戶觸發(fā)事件，但事件依然可以觸發(fā)囚枪。
 * */
 //鏈?zhǔn)秸Z法：（.）把一組操作用點語法來操作
 $('#div').click(function(){
 alert("加波關(guān)注芭晌堋？")
 }).click();
 //$('#div').trigger('click');
 //$('#div').triggerHandler('click');
 //trigger,triggerHandler 都可以模擬事件的執(zhí)行链沼，triggerHandler不會觸發(fā)標(biāo)簽的默認(rèn)事件默赂。
 //trigger可以執(zhí)行默認(rèn)的事件的實行。triggerHandler 不執(zhí)行默認(rèn)事件的執(zhí)行括勺。
 $('form').trigger('submit');
 $('form').triggerHandler('submit');
 });```
命名空間; 給事件添加一個新的名字缆八，使用點（.）分割。這樣在移除事件的時候可以通過新添加 的名字進(jìn)行移除疾捍；

$(document).ready(function(){
//命名空間：在事件名后在添加新的名字奈辰，用點分割。這樣通過后綴名字把相同事件不同方法區(qū)分開乱豆。方便對事件的管理
$('button').on('click.tel',function(){
alert("加油奖恰？")
})
$('button').on('click',function(){
$('button').css('background',"red");
});
//解綁事件時，就可以通過命名空間添加的新名字進(jìn)行解綁咙鞍。不影響其他相同的事件
$('button').off('.tel');
})
</script>```
事件委托：本該自身的事件添加在父元素的身上（只能添加在父子元素上房官。）（利用的是事件冒泡）；

 // 使用JQ實現(xiàn)代理設(shè)計模式
 $('ul').on('click', 'li', function () {
 // this == li
 $('<li></li>').html(this.innerHTML).appendTo('ul');
 console.log（event.target）; 
 console续滋。log（event.currentTarget）翰守； 指的都是li
 });
 // 代碼是把事件綁定到ul身上的，但是是li委托的疲酌，實際觸發(fā)事件的是li對象蜡峰，所有函數(shù)內(nèi)部的this是li對象
 // ul作為li的代理，幫li做事
 // li把事件委托給ul朗恳，讓ul做事```
自定義事件：
自定義一個事件湿颅，并給事件添加一個函數(shù) ，最后使用element.trigger();來調(diào)用粥诫；

<script type="text/javascript">
//自定義事件只能通過trigger來調(diào)用
$('div').on('hhaha',function(){
alert("努力學(xué)習(xí)吧")
});
$('div').trigger('hhaha');
</script>

窗口事件：

調(diào)整窗口大小事件：
<script type="text/javascript">
$(document).ready(function(){
//窗口大小改變時觸發(fā)的事件
$(window).resize(function(){
console.log("窗口改變時油航，會打印出來");
});
//窗口滾動事件
$(document).scroll(function(){
console.log("窗口滾動時發(fā)生的觸發(fā)的事件");
});
});
</script>```