文章目錄
事件綁定
jQuery中有兩種綁定事件方式
（1）eventName(fn)
編碼有提示，編碼效率高；部分事件jQuery沒有實現，所以部分不能添加
（2）on(eventName,fn)
編碼無提示，編碼效率低；所有JS事件都可以添加
注意：可以添加相同或不同類型的事件，不會覆蓋；推薦使用第一種
//第一種寫法：
$("button").click(function() {
alert("我是eventName(fn) 1")
});
$("button").click(function() {
alert("我是eventName(fn) 2")
});
$("button").mousemove(function() {
alert("我是eventName(fn) 3")
});
//第二種寫法：
$("button").on("click",function(){
alert("on(eventName,fn) 1")
});
$("button").on("click",function(){
alert("on(eventName,fn) 2")
});
$("button").on("mousemove",function(){
alert("on(eventName,fn) 3")
});
事件解綁
事件解綁使用off()方法：可以不傳參數，可以傳一個或兩個參數，傳遞參數的個數不同效果不同
（1）不傳參數：會移除所有的事件
（2）傳遞一個參數：會移除所有指定類型的事件
（3）傳遞兩個參數：移除指定類型的指定事件
註釋部分爲特別關注
function func1() {
alert("我是eventName(fn) 1")
}
function func2() {
alert("我是eventName(fn) 2")
}
$("button").click(func1);
$("button").click(func2);
$("button").mouseout(function() {
alert("我是eventName(fn) 3")
});
//不傳參數：會移除所有的事件
$("button").off("");
// 傳遞一個參數，會移除所有指定類型的事件
$("button").off("click");
//傳遞兩個參數：移除指定類型的指定事件(第二個參數不打引號)
$("button").off("click",func1);
事件冒泡
什麼是事件冒泡
如果給父親、兒子都註冊了某一事件，觸發兒子事件時同時觸發了父親事件（事件從裏向外、從下級向上級傳遞的過程）。但在企業開發中大部分是不需要事件冒泡的
如何阻止事件冒泡
（1）方式一： 只需要在兒子的事件回調中加上 return false（父親就不會響應事件）
（2）方式二： 回調函數中傳入參數：event(事件對象)，調用stopPropagation()方法
HTML：
<div class="father">
<div class="son"></div>
</div>
CSS樣式：
<style>
.father {
width: 200px;
height: 200px;
background-color: red;
}
.son {
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
核心代碼部分：
$(".father").click(function() {
alert("我是father");
})
//方法一：
$(".son").click(function() {
alert("我是son");
return false;
})
//方法二：
$(".son").click(function(event) {
alert("我是son");
event.stopPropagation();
})
默認行爲
什麼是默認行爲
例如：點擊a標籤，頁面自動跳轉；點擊提交按鈕，頁面自動跳轉
如何阻止默認行爲
（1）方式一： 只需要在事件回調中加上 return false
（2）方式二： 回調函數中傳入參數：event(事件對象)，調用preventDefault()方法
HTML：
<a href="www.baidu.com">我是百度</a>
核心代碼部分：
//方法一：
$("a").click(function() {
alert("我不想跳轉");
return false;
})
//方法二：
$("a").click(function(event) {
alert("我不想跳轉");
event.preventDefault();
})
jQuery事件自動觸發
jQuery事件自動觸發有兩種方式：
（1）方式一： 使用 trigger() 方法，但會觸發事件冒泡和默認行爲
（2）方式二： 使用 triggerHandler() 方法，但不會觸發事件冒泡和默認行爲
注意： 在 a標籤 中使用 trigger() 方法時不會觸發事件冒泡和默認事件，若要實現其事件冒泡和默認事件，則在 a標籤 內增加 span標籤 ，對 span標籤 監聽事件
HTML：
<div class="father">
<div class="son"></div>
</div>
<a href="www.baidu.com">我是百度</a>
<form action="www.taobao.com">
<input type="text" >
<input type="submit">
</form>
CSS樣式：
<style>
.father {
width: 200px;
height: 200px;
background-color: red;
}
.son {
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
核心代碼：
<script src="../jquery.js"></script>
<script>
$(function() {
$(".father").click(function() {
alert("我是father");
});
$(".son").click(function() {
alert("我是son");
});
$("input[type='submit']").click(function() {
alert("我是input");
});
//會觸發事件冒泡
$(".son").trigger("click");
//不會觸發事件冒泡
$(".son").triggerHandler("click");
//會觸發默認行爲
$("input[type='submit']").trigger("click");
//不會觸發默認行爲
$("input[type='submit']").triggerHandler("click");
$("a").click(function() {
alert("a");
});
//都不會觸發事件冒泡和默認行爲，使用span
$("a").triggerHandler("click");
$("a").trigger("click");
});
</script>
以下針對a標籤作修改：
<a href="www.baidu.com"><span>我是百度</span></a>
$("span").click(function() {
alert("a");
});
//會觸發事件冒泡和默認行爲
$("span").trigger("click");
jQuery自定義事件
什麼是自定義事件
自定義事件： 原系統沒有的事件，但這個事件可以響應的
自定義事件滿足的條件
自定義事件要滿足兩個條件：
（1）事件必須是通過on綁定
（2）事件必須通過triggle來觸發
以下示例的HTML和CSS代碼同上
<script src="../jquery.js"></script>
<script>
$(function() {
/*
自定義事件要滿足兩個條件：
1、事件必須是通過on綁定
2、事件必須通過triggle來觸發
*/
$(".father").on("btnClick",function() {
alert("我是father");
});
$(".father").trigger("btnClick");
});
</script>
jQuery的事件命名空間
什麼是事件命名空間
事件命名空間是某一對象擁有多個相同類型的事件時，爲了區分或執行該相同類型的不同事件而引入了事件命名空間
事件命名空間的滿足的條件
（1）事件是通過on綁定
（2）通過trigger方法或者triggerHandler方法觸發事件
以下示例的HTML和CSS代碼同上
<script src="../jquery.js"></script>
<script>
$(function() {
/*
想要事件的命名空間有效，必須要滿足兩個條件
1、事件是通過on來綁定的
2、通過trigger方法triggerHandler方法或者觸發事件
*/
$(".son").on("click.1",function() {
alert("我是son1");
});
$(".son").on("click.2",function() {
alert("我是son2");
});
//只觸發某一個特定的事件
$(".son").triggerHandler("click.1");
</script>
事件命名空間使用的小細節
1、使用 trigger方法 觸發子元素帶命名空間事件的同時，父元素相同命名空間事件也會被觸發，而父元素沒有命名空間的事件不會被觸發
2、使用 trigger方法 觸發子元素不帶命名空間的事件時，子元素所有相同類型的事件和父元素所有相同類型的事件都會被觸發
3、使用 triggerHandler方法 觸發子元素帶命名空間的事件時，只觸發子元素該命名空間的事件， 不會觸發父元素的任何事件
4、使用 triggerHandler方法 觸發子元素不帶命名空間的事件時，子元素所有相同類型的事件都會被觸發，但不會觸發父元素所有相同類型的事件
<script src="../jquery.js"></script>
<script>
$(function() {
$(".father").on("click.1",function() {
alert("我是father1");
});
$(".father").on("click",function() {
alert("我是father");
});
$(".son").on("click.1",function() {
alert("我是son1");
});
$(".son").on("click.2",function() {
alert("我是son2");
});
$(".son").trigger("click.1");
$(".son").trigger("click");
$(".son").triggerHandler("click.1");
$(".son").triggerHandler("click");
});
</script>
事件委託
什麼是事件委託
先舉個生活中的栗子： 我們自己做不了的事情，請別人幫忙做的事情，但別人將做完的結果反饋給我
事件委託：事件委託利用事件冒泡，指定一個事件處理程序來管理某一類型的所有事件。通俗的說，事件就是 onclick，onmouseover，onmouseout 等；委託就是讓另一個元素來做，例如這個事件本來是加在某些元素上的，然而你卻加到另一個元素**（父元素）**身上來完成這個事件。 即可以找一個在入口函數執行之前就有的元素來監聽動態添加的元素的某些事件
爲什麼要用事件委託
先來看個栗子：
這個案例想要實現的是，點擊 任何一個 li標籤 會彈出警告框，點擊按鈕會增加一個 li標籤 。但在下面代碼運行時會發現，點擊新增的 li標籤 不能彈出警告框，達不到我們的需求。
原因： click 監聽事件在DOM加載完後就已經執行完畢，對於新增的 li標籤 不會添加該事件
注意：在jQuery中，如果通過核心函數找到的元素不止一個，那麼在添加事件的時候jQuery會遍歷所有找到的元素，給所有找到的元素添加事件
<body>
<ul>
<li>我是第一個</li>
<li>我是第二個</li>
<li>我是第三個</li>
</ul>
<button>新增加一個li</button>
<script src="../jquery.js"></script>
<script>
$(function() {
$("button").click(function() {
$("ul").append("<li>我是新增的li</li>")
});
/*
在jQuery中，如果通過核心函數找到的元素不止一個，那麼在添加事件的時候jQuery會遍歷
所有找到的元素，給所有找到的元素添加事件
*/
$("li").click(function() {
alert(1)
})
});
</script>
</body>
事件委託原理和作用
（1）原理：事件委託就是利用事件冒泡原理 ，把事件加到父元素上,通過判斷事件來源的子元素來執行相應的操作。
（2）作用：事件委託可以減少事件綁定次數，也可以讓新加入的子集元素也擁有相同的操作 。
如何使用事件委託
使用事件委託實現需求
實現事件委託方法，我在這裏介紹兩種（事件委託就是將時事件委託到父元素上）
（1）方法一： 通過on方法 。第一個參數是添加的事件；第二個參數是要監聽的標籤；第三個參數是觸發事件後所要作出的響應，可以是一個函數
（2）方法二：通過delegate方法 。第一個參數是要監聽的標籤；第二個參數是添加的事件；第三個參數是觸發事件後所要作出的響應，可以是一個函數。 但jQuery 3.0中已棄用此方法，請用 on()代替
<script>
$(function() {
$("button").click(function() {
$("ul").append("<li>我是新增的li</li>")
});
//把li的監聽事件委託給ul去監聽
//方法一
$("ul").on("click","li",function () {
alert(1);
})
//方法二
$("ul").delegate("li","click",function() {
alert(1);
})
});
</script>
jQuery移入移出事件
mouseover和mouseout
注意：
（1）以下示例實現的是使用 mouseover 和 mouseout 監聽父元素的移入移出事件
（2）但存在一個小問題，當子元素移入移出時也會觸發父元素的移入移出事件
HTML：
<div class="father">
<div class="son"></div>
</div>
CSS樣式：
<style>
.father {
width: 200px;
height: 200px;
background-color: blue;
}
.son {
width: 100px;
height: 100px;
background-color: burlywood;
}
</style>
核心代碼：
<script>
$(function() {
//問題：當子元素移入移出時也會觸發父元素的移入移出事件
$(".father").mouseover(function() {
console.log("father移入");
})
$(".father").mouseout(function() {
console.log("father移出");
})
});
</script>
mouseenter和mouseleave
注意：
（1）以下示例是爲了解決上面示例的小問題，故HTML和CSS樣式相同
（2）使用 mouseenter 和 mouseleave 時，子元素移入移出時也不會觸發父元素的移入移出事件，在開發中，推薦使用此類方法
<script>
$(function() {
//子元素移入移出時也不會觸發父元素的移入移出事件（推薦）
$(".father").mouseenter(function() {
console.log("father移入");
})
$(".father").mouseleave(function() {
console.log("father移出");
})
});
</script>
hover()
注意：
（1）以下示例是爲了實現同時對元素添加移入移出事件，故HTML和CSS樣式相同
（2）使用hover()同時實現移入移出，效果和mouseenter、mouseleave相同
（3）hover() 既可以接收一個參數，也可以接收兩個參數。
若是一個參數：移入移出事件共同執行的函數；
若是兩個參數：第一個參數是移入事件執行的函數，第二個參數是移出事件執行的函數
<script src="../jquery.js"></script>
<script>
$(function() {
/*
同時實現移入移出，效果和mouseenter、mouseleave相同
既可以接收一個參數，也可以接收兩個參數
一個參數:移入移出事件共同執行的函數
兩個參數：第一個參數是移入事件執行的函數，第二個參數是移出事件執行的函數
*/
$(".father").hover(function() {
console.log("father移入");
},function(){
console.log("father移出");
})
});
</script>