從零開始學 Web 之 jQuery（七）事件冒泡，事件參數對象，鏈式編程原理

時間 2019-11-17

標籤開始 web jquery 事件冒泡參數對象鏈式編程原理欄目 HTML 简体版

原文原文鏈接

你們好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新......html

github：https://github.com/Daotin/Web

微信公衆號：Web前端之巔

博客園：http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！前端

1、事件冒泡與阻止事件冒泡

事件冒泡：當一個元素觸發某個事件的時候，會把這個事件傳播到其父元素，一直到頂層元素。jquery

阻止事件冒泡：在被觸發事件的子元素中添加 return false; 便可。git

2、事件的觸發

以前講的綁定事件是事件觸發後的事件處理過程，而且上面的事件觸發是被動的事件觸發，怎麼能夠主動觸發事件呢？github

文本框的獲取焦點事件的觸發：編程

// 方式一
文本框元素.focus();
// 方式二
文本框元素.trigger("focus");
// 方式三
文本框元素.triggerHandler("focus");

PS：方式一和方式二，均可以獲取文本框的焦點，而且觸發瀏覽器的默認行爲（光標閃爍）；而方式三，能夠獲取文本框的焦點，可是不能觸發瀏覽器的默認行爲。瀏覽器

3、事件參數對象

事件處理函數有沒有參數呢？微信

經過 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

4、鏈式編程的原理

鏈式編程就是一個對象調用方法後還能夠繼續調用方法。這就要求對象調用方法後的返回值仍是這個對象，那麼這個方法內部是如何實現的呢？

其實很簡單：就是在最後返回調用其的對象。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>