從零開始學 Web 之 jQuery（七）事件冒泡，事件引數物件，鏈式程式設計原理

阿新 • • 發佈：2019-01-15

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

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

阻止事件冒泡：在被觸發事件的子元素中新增 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（七）事件冒泡，事件參數對象，鏈式編程原理

eval uri turn 定位 return 也會否則 ont sele 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客

從零開始學 Web 之 jQuery（七）事件冒泡，事件引數物件，鏈式程式設計原理

一、事件冒泡與阻止事件冒泡事件冒泡：當一個元素觸發某個事件的時候，會把這個事件傳播到其父元素，一直到頂層元素。阻止事件冒泡：在被觸發事件的子元素中新增 return false; 即可。二、事件的觸發之前講的繫結事件是事件觸發後的事件處理過程，並且上面的事件觸發是被動的事件觸發，怎麼可以主動觸發事

從零開始學 Web 之 jQuery（四）元素的建立新增與刪除，自定義屬性

一、元素的建立新增和刪除 1、方式一：以物件的方式建立元素 append，appendTo ：在被選元素所有子元素的結尾插入內容（增加子元素）。 prepend，prependTo：在被選元素所有子元素的開頭插入元素（增加子元素）。 before：在當前被選元素之後插入內容（相當於增加兄弟元素）。 af

從零開始學 Web 之 jQuery（二）獲取和操作元素的屬性

eight images idt 隱藏 lis 屬性 ner master lin 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔

從零開始學 Web 之 jQuery（六）為元素綁定多個相同事件，解綁事件

png 好用添加方式執行存在區別也會地址大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客園：http://ww

從零開始學 Web 之 jQuery（三）元素操作，鏈式程式設計，動畫方法

一、使用css操作元素樣式 1、常規寫法 $("#dv").css("width", "200px"); $("#dv").css("height", "100px"); $("#dv").css("background", "red"); 2、鏈式寫法 $("#dv").css("width", "20

從零開始學 Web 之 jQuery（八）each，多庫共存，包裝集，外掛

一、each 方法 each 方法用來遍歷 jQuery 物件的，它的引數是一個事件處理函式，這個事件處理函式有兩個引數，第一個引數是索引，第二個引數時索引對應的 DOM 物件，使用的時候注意轉成 jQuery 物件。語法： // 引數1：元素集合索引 // 引數2：索引對應的DOM元素元素集合.ea

從零開始學 Web 之 jQuery（五）操作元素其他屬性，為元素繫結事件

一、操作元素的寬和高 1、方法一元素.css("width"); 元素.css("height"); 最後得到的是字串型別的，比如 200px。如果我們在設定為原來寬高2倍的時候，就要先把獲取的寬高轉換成數字型別，再乘以2，這樣操作比較麻煩，有沒有簡單的方法呢？ 2、方法二元素.width(屬性

從零開始學 Web 之 jQuery（六）為元素繫結多個相同事件，解綁事件

一、為元素繫結多個相同事件 1、方式一 $("#btn").click(function () { console.log("click1"); }).click(function () { console.log("click2"); }).cli

從零開始學 Web 之 jQuery（一）jQuery的概念，頁面載入事件

一、jQuery的概念 1、什麼是 JavaScript 庫？ JavaScript 開發的過程中，處理瀏覽器的相容很複雜而且很耗時，於是一些封裝了這些操作的庫應運而生。這些庫還會把一些常用的程式碼進行封裝。把一些常用到的方法寫到一個單獨的 js 檔案，使用的時候直接去引用這js檔案就可以了，這個 js

從零開始學 Web 之 DOM（七）事件冒泡

>大家好，這裡是「從零開始學 Web 系列教程」，並在下列地址同步更新...... > +------------------------------------------------------------ > github：https://github.com/Dao

從零開始學 Web 之 CSS3（七）多列布局，伸縮佈局

一、多列布局 CSS3中新出現的多列布局 (multi-column) 是傳統 HTML 網頁中塊狀佈局模式的有力擴充。這種新語法能夠讓 WEB 開發人員輕鬆的讓文字呈現多列顯示。我們知道，當一行文字太長時，讀者讀起來就比較費勁，有可能讀錯行或讀序列；人們的視點從文字的一端移到另一端、然後換到下一行的

從零開始學 Web 之 Ajax（七）跨域

一、跨域跨域這個概念來自一個叫 “同源策略” 的東西。同源策略是瀏覽器上為了安全考慮實施的非常重要的安全機制。 Ajax 預設只能獲取到同源的資料，對於非同源的資料，Ajax是獲取不到的。什麼是同源？協議、域名、埠全部相同。如果使用 Ajax 獲取非同源的資料，會報錯，報錯資訊如下： Fail

從零開始學 Web 之 Ajax（六）jQuery中的Ajax

var 技術分享 else parse cnblogs 我會 clas alt jquer 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web

從零開始學 Web 之 DOM（一）DOM的概念，對標簽操作

關註 1.5 pan 什麽 tin p標簽 nod text == 大家好，這裏是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，

從零開始學 Web 之 DOM（四）節點

def clas scrip while p標簽設置 ner 操作 text 大家好，這裏是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相

從零開始學 Web 之 BOM（三）offset，scroll，變速動畫函數

樣式清理 java mar dde sof mov har width 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客園：

從零開始學 Web 之 Ajax（三）Ajax 概述，快速上手

lan 技術分享 php 概述由於 val asc logs 更新大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客園：ht

從零開始學 Web 之 Ajax（五）同步異步請求，數據格式

遊記 document 空閑 name center 20px 實現 resp 也會大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之

從零開始學 Web 之 HTML5（二）表單，多媒體新增內容，新增獲取操作元素，自定義屬性

器） user 對比 style 按鈕 ont mp3 url -- 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客園：ht

從零開始學 Web 之 jQuery（七）事件冒泡，事件引數物件，鏈式程式設計原理

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

二、事件的觸發

三、事件引數物件

獲取使用者按下的組合鍵

四、鏈式程式設計的原理

相關推薦