從零開始學 Web 之 jQuery（七）事件冒泡，事件參數對象，鏈式編程原理
阿新 • • 發佈：2018-07-12
eval uri turn 定位 return 也會 否則 ont sele
大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新......
- github：https://github.com/Daotin/Web
- 微信公眾號：Web前端之巔
- 博客園：http://www.cnblogs.com/lvonve/
- CSDN：https://blog.csdn.net/lvonve/
在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！
一、事件冒泡與阻止事件冒泡
事件冒泡：當一個元素觸發某個事件的時候，會把這個事件傳播到其父元素，一直到頂層元素。
阻止事件冒泡：在被觸發事件的子元素中添加 return false;
二、事件的觸發
之前講的綁定事件是事件觸發後的事件處理過程，並且上面的事件觸發是被動的事件觸發，怎麽可以主動觸發事件呢？
文本框的獲取焦點事件的觸發：
// 方式一
文本框元素.focus();
// 方式二
文本框元素.trigger("focus");
// 方式三
文本框元素.triggerHandler("focus");PS：方式一和方式二，都可以獲取文本框的焦點，並且觸發瀏覽器的默認行為（光標閃爍）；而方式三，可以獲取文本框的焦點，但是不能觸發瀏覽器的默認行為。
三、事件參數對象
事件處理函數有沒有參數呢？
通過 arguement.length
獲取用戶按下的組合鍵
$(document).mousedown(function (e) { if (e.altKey) { console.log("alt按下了"); } else if (e.ctrlKey) { console.log("ctrl按下了"); } else if (e.shiftKey) { console.log("shift按下了"); } else { console.log("鼠標按下"); } });
altKey, ctrlKey, shiftKey 相應的按鍵按下後，對應事件的值為 true。
// 鼠標按下的鍵值
e.button
// 按鍵按下的鍵值
e.keyCode
// 觸發該事件的目標對象，是一個 DOM 對象
// 當發生事件冒泡的時候，可以定位到具體發生事件的源對象，而不是冒泡的對象。（比如：p在div裏面，那麽點擊p觸發的事件下，e.target 是寫在div事件處理函數裏面的，此時 e.target 是p對象。）
e.target
// 觸發事件的當前的對象
// （比如：p在div裏面，那麽點擊p觸發的事件下，e.currentTarget 是寫在div事件處理函數裏面的，此時 e.currentTarget 是div對象）
e.currenyTarget
// 代理的那個對象
e.delegateTarget四、鏈式編程的原理
鏈式編程就是一個對象調用方法後還可以繼續調用方法。這就要求對象調用方法後的返回值還是這個對象，那麽這個方法內部是如何實現的呢？
其實很簡單：就是在最後返回調用其的對象。return this; 就好了。
還有一個問題，就是 jQuery 中 val(); 在沒有參數時時讀取數值，不能鏈式編程；在有參數的時候是設置，可以鏈式編程。
所以方法的內部實現，在 return this; 之前還要做個判斷，如果有參數才返回調用對象，否則不返回。
案例：五星好評
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul {
margin: 100px 0 0 300px;
}
li {
list-style: none;
font-size: 20px;
float: left;
color: #ff0000;
cursor: pointer;
}
</style>
</head>
<body>
<ul id="uu">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
<script src="jquery-1.12.4.min.js"></script>
<script>
$("#uu>li").click(function () {
$("#uu>li").html("☆");
$(this).attr("index", 1).siblings("li").removeAttr("index");
$(this).html("★").prevAll("li").html("★");
}).mouseenter(function () {
$(this).html("★").prevAll("li").html("★");
}).mouseleave(function () {
$("#uu>li").html("☆");
$("#uu>li[index=1]").html("★").prevAll("li").html("★");
});
</script>
</body>
</html>
從零開始學 Web 之 jQuery（七）事件冒泡，事件參數對象，鏈式編程原理