python 全棧開發，Day55(jQuery的位置信息,JS的事件流的概念(重點),事件對象,jQuery的事件綁定和解綁,事件委託(事件代理))

時間 2019-11-12

標籤 python 開發 day55 day jquery 位置信息事件概念重點對象綁定和解委託代理欄目 Python 简体版

原文原文鏈接

1、jQuery的位置信息　　　　　　　　　　　　　　　　

jQuery的位置信息跟JS的client系列、offset系列、scroll系列封裝好的一些簡便api.javascript

1、寬度和高度

獲取寬度

.width()

描述：爲匹配的元素集合中獲取第一個元素的當前計算寬度值。這個方法不接受任何參數。.css(width) 和 .width()之間的區別是後者返回一個沒有單位的數值（例如，400），前者是返回帶有完整單位的字符串（例如，400px）。當一個元素的寬度須要數學計算的時候推薦使用.width() 方法。css

舉例：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="box">
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        console.log($('.box').width());  //獲取寬度
        console.log($('.box').css('width'));  //獲取css寬度
    })
</script>

</body>
</html>

View Code

網頁查看consolejava

從結果中能夠看出，css的width是帶px的。因此獲取寬度是，推薦使用.width()方法jquery

設置寬度

.width( value )

描述：給每一個匹配的元素設置CSS寬度。設計模式

舉例：api

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<button>變大</button>
<div class="box">
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('button').eq(0).click(function () {
            $(this).next().width(200);  //設置寬度
        })
    })
</script>

</body>
</html>

View Code

網頁訪問，點擊變大按鈕，div就會變大，最終效果以下：
瀏覽器

高度

獲取高度

.height()

描述：獲取匹配元素集合中的第一個元素的當前計算高度值。app

這個方法不接受任何參數。

設置高度

.height( value )

描述：設置每個匹配元素的高度值。ide

二、innerHeight()和innerWidth()

獲取內部寬

.innerWidth()

描述：爲匹配的元素集合中獲取第一個元素的當前計算寬度值,包括padding，可是不包括border。

ps:這個方法不適用於window 和 document對象，對於這些對象可使用.width()代替。

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            padding: 50px;
            border: 1px solid green;
        }
    </style>
</head>
<body>
<div class="box">
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        console.log($('.box').innerWidth());//獲取內部寬度
    })
</script>

</body>
</html>

View Code

網頁查看console，輸出100

雖然盒子寬度是100，可是因爲設置了padding:50。因此總寬度爲200

設置內部寬

.innerWidth(value);

描述：爲匹配集合中的每一個元素設置CSS內部寬度。若是這個「value」參數提供一個數字，jQuery會自動加上像素單位（px）

獲取內部高

.innerHeight()

描述：爲匹配的元素集合中獲取第一個元素的當前計算高度值,包括padding，可是不包括border。

ps:這個方法不適用於window 和 document對象，對於這些對象可使用.height()代替。

設置內部寬

.innerHeight(value);

描述：爲匹配集合中的每一個元素設置CSS內部高度。若是這個「value」參數提供一個數字，jQuery會自動加上像素單位（px）

3.outWidth和outHeight()

獲取外部寬

.outerWidth( [includeMargin ] )

描述：獲取匹配元素集合中第一個元素的當前計算外部寬度（包括padding，border和可選的margin）

includeMargin (默認: false)

類型： Boolean

一個布爾值，代表是否在計算時包含元素的margin值。
這個方法不適用於window 和 document對象，可使用.width()代替

舉例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            padding: 50px;
            border: 1px solid green;
        }
    </style>
</head>
<body>
<div class="box">
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        console.log($('.box').outerWidth());//獲取外部寬度
    })
</script>

</body>
</html>

View Code

網頁查看console，輸出202

雖然盒子寬度是100，可是因爲設置了padding:50。因此寬度爲200，加上邊框1px，最終總寬度爲202

舉例2：

爲true時，表示在計算時包含元素的margin值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            padding: 50px;
            border: 1px solid green;
            margin-left: 50px;
        }
    </style>
</head>
<body>
<div class="box">
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        console.log($('.box').outerWidth(true));//獲取外部寬度
    })
</script>

</body>
</html>

View Code

網頁查看console，輸出252。由於加上了margin-left的值50px。

設置外部寬

.outerWidth( value )

描述：爲匹配集合中的每一個元素設置CSS外部寬度。

獲取外部寬

.outerHeight( [includeMargin ] )

描述：獲取匹配元素集合中第一個元素的當前計算外部高度（包括padding，border和可選的margin）

includeMargin (默認: false)

類型： Boolean

一個布爾值，代表是否在計算時包含元素的margin值。
這個方法不適用於window 和 document對象，可使用.width()代替

設置外部高

.outerHeight( value )

描述：爲匹配集合中的每一個元素設置CSS外部高度。

三、偏移

獲取

.offset()

返回值：Object 。.offset()返回一個包含top 和 left屬性的對象。

描述：在匹配的元素集合中，獲取的第一個元素的當前座標，座標相對於文檔。

注意：jQuery不支持獲取隱藏元素的偏移座標。一樣的，也沒法取得隱藏元素的 border, margin, 或 padding 信息。若元素的屬性設置的是 visibility:hidden，那麼咱們依然能夠取得它的座標

舉例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            padding: 50px;
            border: 1px solid green;
            margin-left: 50px;
            margin-top: 100px;
        }
    </style>
</head>
<body>
<div class="box">
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        console.log($('.box').offset());//獲取偏移,返回一個包含top 和 left屬性的對象
    })
</script>

</body>
</html>

View Code

網頁查看console，輸出：

舉例2，獲取隱藏的盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            padding: 50px;
            border: 1px solid green;
            margin-left: 50px;
            margin-top: 100px;
            /*隱藏*/
            display: none;
        }
    </style>
</head>
<body>
<div class="box">
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        console.log($('.box').offset());//獲取偏移,返回一個包含top 和 left屬性的對象
    })
</script>

</body>
</html>

View Code

網頁查看console，輸出： {top: 0, left: 0}

舉例3：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            padding: 50px;
            border: 1px solid green;
            margin-left: 50px;
            margin-top: 100px;
            position: relative;
            top: 300px;

        }
    </style>
</head>
<body>
<div class="box">
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        console.log($('.box').offset().top);  //獲取偏移,返回top屬性值
        console.log($('.box').offset().left); //返回left屬性值
    })
</script>

</body>
</html>

View Code

網頁查看console，輸出：

設置

.offset( coordinates )

描述：設置匹配的元素集合中每個元素的座標，座標相對於文檔。

coordinates

類型: Object

一個包含 top 和 left屬性的對象，用整數指明元素的新頂部和左邊座標。

例子：

$("p").offset({ top: 10, left: 30 });

舉例：

淘寶購物時，點擊加入購物車，會有一個小盒子，慢慢變小，丟到購物車的效果。

下面模擬一下，沒有弧線效果啊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            /*padding: 50px;*/
            /*border: 1px solid green;*/
            margin-left: 50px;
            margin-top: 100px;
            position: relative;
            /*top: 300px;*/

        }
    </style>
</head>
<body>
<button>消失</button>
<div class="box">
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('button').eq(0).click(function () {
            $('.box').css({
                width:200,height:200
            }).offset({top:100,left:100}).animate({
                    width:0,height:0
            },1000)
        })
    })
</script>

</body>
</html>

View Code

網頁效果：

4.元素座標

.position()

返回值：Object{top,left}

描述獲取匹配元素中第一個元素的當前座標，相對於offset parent的座標。(offset parent指離該元素最近的並且被定位過的祖先元素 )

當把一個新元素放在同一個容器裏面另外一個元素附近時，用.position()更好用。

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .father {
            width: 200px;
            height: 200px;
            background-color: green;
            position: relative;
            top: 100px;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            top: 100px;
            left: 50px;
        }
    </style>
</head>
<body>
<button>變大</button>
<div class="father">
    <div class="box"></div>
</div>
<div class="box2"></div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        console.log($('.box'));
        console.log($('.box').offset().top);
        console.log($('.box').position().top);
    })
</script>

</body>
</html>

View Code

網頁訪問：

網頁查看console

5.滾動距離

水平方向

獲取：

.scrollLeft()

描述：獲取匹配的元素集合中第一個元素的當前水平滾動條的位置（頁面捲走的寬度）

設置：

.scrollLeft( value )

描述：設置每一個匹配元素的水平方向滾動條位置。

垂直方向

獲取：

.scrollTop()

描述：獲取匹配的元素集合中第一個元素的當前遲滯滾動條的位置（頁面捲走的高度）

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .father {
            width: 200px;
            height: 200px;
            background-color: green;
            position: relative;
            top: 100px;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            top: 100px;
            left: 50px;
        }
    </style>
</head>
<body style="position: relative;height: 2000px">
<button>變大</button>
<div class="father">
    <div class="box"></div>
</div>
<div class="box2"></div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $(document).scroll(function () {
            //獲取垂直滾動的距離 即當前滾動的地方的窗口頂端到整個頁面頂端的距離
            console.log($(document).scrollTop());
        })

    })
</script>

</body>
</html>

View Code

body設置height: 2000px，爲了出現滾動條

網頁訪問，拉動滾動條是，console會相應的變化

瀏覽器的默認滾動條應該是用$(window).scrollTop()來獲取滾動條距離，但通過測試發現好像$(document).scrollTop()也能獲取
這2種方法的區別：

均可以達到相同的效果,可是$(window).scrollTop()被全部瀏覽器支持.

設置：

.scrollLeft( value )

描述：設置每一個匹配元素的垂直方向滾動條位置。

舉例：回到頂部功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .father {
            width: 200px;
            height: 200px;
            background-color: green;
            position: relative;
            /*top: 100px;*/
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            top: 100px;
            left: 50px;
        }
        .box2 {
            width: 80px;
            height: 20px;
            background-color: yellow;
            position: fixed;
            bottom: 0;
            right: 30px;
            font-weight: bolder;
        }
    </style>
</head>
<body style="position: relative;height: 2000px">
<div class="father">
    <div class="box"></div>
</div>
<div class="box2">返回頂部</div>
<!--<button>變大</button>-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('.box2').click(function () {
            $("html,body").animate({scrollTop:0}, 1000);
        })

    })
</script>

</body>
</html>

View Code

訪問網頁，將進度條拉到最下面，點擊回到頂部，就會慢慢的回到頂部，效果以下：

2、JS的事件流的概念(重點)

在學習jQuery的事件以前，你們必需要對JS的事件有所瞭解。看下文

事件的概念

HTML中與javascript交互是經過事件驅動來實現的，例如鼠標點擊事件、頁面的滾動事件onscroll等等，能夠向文檔或者文檔中的元素添加事件偵聽器來預訂事件。想要知道這些事件是在何時進行調用的，就須要瞭解一下「事件流」的概念。

控制器是控制着model，展現到view中。數據驅動視圖。MVC設計模式就是這樣的，關於MVC，請自行百度。

什麼是事件流

事件流描述的是從頁面中接收事件的順序

一、DOM事件流

「DOM2級事件」規定的事件流包括三個階段：

① 事件捕獲階段；

② 處於目標階段；

③ 事件冒泡階段

那麼其實呢，js中還有另一種綁定事件的方式：看下面代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件流</title>
    <script>

    window.onload = function(){

        var oBtn = document.getElementById('btn');

        oBtn.addEventListener('click',function(){
            console.log('btn處於事件捕獲階段');
        }, true);
        oBtn.addEventListener('click',function(){
            console.log('btn處於事件冒泡階段');
        }, false);

        document.addEventListener('click',function(){
            console.log('document處於事件捕獲階段');
        }, true);
        document.addEventListener('click',function(){
            console.log('document處於事件冒泡階段');
        }, false);

        document.documentElement.addEventListener('click',function(){
            console.log('html處於事件捕獲階段');
        }, true);
        document.documentElement.addEventListener('click',function(){
            console.log('html處於事件冒泡階段');
        }, false);

        document.body.addEventListener('click',function(){
            console.log('body處於事件捕獲階段');
        }, true);
        document.body.addEventListener('click',function(){
            console.log('body處於事件冒泡階段');
        }, false);

    };

    </script>
</head>
<body>
    <a href="javascript:;" id="btn">按鈕</a>
</body>
</html>

View Code

當咱們點擊這個btn的時候，看看頁面都輸出了什麼：

在解釋輸出結果爲何是這樣以前，還有幾個知識點須要瞭解一下便可：

一、addEventListener

addEventListener 是DOM2 級事件新增的指定事件處理程序的操做，這個方法接收3個參數：要處理的事件名、做爲事件處理程序的函數和一個布爾值。最後這個布爾值參數若是是true，表示在捕獲階段調用事件處理程序；若是是false，表示在冒泡階段調用事件處理程序。

二、document、documentElement和document.body三者之間的關係：

document表明的是整個html頁面；

document.documentElement表明的是<html>標籤；

document.body表明的是<body>標籤；

接着咱們就來聊聊上面的例子中輸出的結果爲何是這樣：

在標準的「DOM2級事件」中規定，事件流首先是通過事件捕獲階段，接着是處於目標階段，最後是事件冒泡階段。這裏能夠畫個圖示意一下:

1~3是捕獲階段，4~7是冒泡階段。

首先在事件捕獲過程當中，document對象首先接收到click事件，而後事件沿着DOM樹依次向下，一直傳播到事件的實際目標，就是id爲btn的a標籤。

接着在事件冒泡過程當中，事件開始時由最具體的元素（a標籤）接收，而後逐級向上傳播到較爲不具體的節點（document）。

須要注意的點：因爲老版本的瀏覽器不支持事件捕獲，所以在實際開發中須要使用事件冒泡，在由特殊須要時再使用事件捕獲

補充知識瞭解便可：

一、IE中的事件流只支持「事件冒泡」，可是版本到了IE9+之後，實現了「DOM2級事件」，也就是說IE9+之後也能夠在捕獲階段對元素進行相應的操做。

二、在DOM事件流中，實際的目標在「捕獲階段」不會接收到事件。而是在「處於目標階段」被觸發，並在事件處理中被當作「冒泡階段」的一部分。而後，「冒泡階段」發生，事件又傳播迴文檔。

1~8的順序，應該是這樣的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件流</title>
    <script>

        window.onload = function(){

            var oBtn = document.getElementById('btn');
            //1
            document.addEventListener('click',function(){
                console.log('document處於事件捕獲階段');
            }, true);
            //2
            document.documentElement.addEventListener('click',function(){
                console.log('html處於事件捕獲階段');
            }, true);
            //3
            document.body.addEventListener('click',function(){
                console.log('body處於事件捕獲階段');
            }, true);
            //4
            oBtn.addEventListener('click',function(){
                console.log('btn處於事件捕獲階段');
            }, true);
            //5
            oBtn.addEventListener('click',function(){
                console.log('btn處於事件冒泡階段');
            }, false);
            //6
            document.body.addEventListener('click',function(){
                console.log('body處於事件冒泡階段');
            }, false);
            //7
            document.documentElement.addEventListener('click',function(){
                console.log('html處於事件冒泡階段');
            }, false);
            //8
            document.addEventListener('click',function(){
                console.log('document處於事件冒泡階段');
            }, false);
        };

    </script>
</head>
<body>
<a href="javascript:;" id="btn">按鈕</a>
</body>
</html>

View Code

3、事件對象　　　　　　　　　　　　　　　　　　　　

上篇介紹完咱們js的事件流的概念以後，相信你們對事件流也有所瞭解了。那麼接下來咱們看一下jquery的事件操做。

jquery的經常使用事件

jquery經常使用的事件，你們必定要熟記在心

在說jquery的每一個事件以前，咱們先來看一下事件對象

事件對象

Event 對象表明事件的狀態，好比事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。

何時會產生Event 對象呢?

例如: 當用戶單擊某個元素的時候,咱們給這個元素註冊的事件就會觸發,該事件的本質就是一個函數,而該函數的形參接收一個event對象

2.事件一般與函數結合使用，函數不會在事件發生前被執行！

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="box"></div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('div').eq(0).click(function (ev) {
            console.log(ev);  //打印事件對象
        })
    })
</script>
</body>
</html>

View Code

訪問網頁，點擊紅色區域，查看console

clientX和clientY表示鼠標當時點擊時的位置座標。

type爲click，這纔是真正的事件名

事件流的由來（瞭解）

因爲微軟和網景亂搞,後來必需要爲事件傳播機制,制定一個標準,由於事件捕獲是網景公司開發出來的,而事件冒泡是由微軟公司開發出來的,它們都想要本身的技術成爲標準,因此致使這兩個公司總是幹架,制定標準的人爲了避免讓它們幹架,因此研發了事件流.

關於event對象

在觸發的事件的函數裏面咱們會接收到一個event對象,經過該對象咱們須要的一些參數,好比說咱們須要知道此事件做用到誰身上了,就能夠經過event的屬性target來獲取到(IE暫且不談),或者想阻止瀏覽器的默認行爲能夠經過方法preventDefault()來進行阻止.如下是event對象的一些屬性和方法

屬性	描述
altKey	返回當事件被觸發時，」ALT」是否被按下。
button	返回當事件被觸發時，哪一個鼠標按鈕被點擊。
clientX	返回當事件被觸發時，鼠標指針的水平座標。
clientY	返回當事件被觸發時，鼠標指針的垂直座標。
ctrlKey	返回當事件被觸發時，」CTRL」鍵是否被按下。
metaKey	返回當事件被觸發時，」meta」鍵是否被按下。
relatedTarget	返回與事件的目標節點相關的節點。
screenX	返回當某個事件被觸發時，鼠標指針的水平座標。
screenY	返回當某個事件被觸發時，鼠標指針的垂直座標。
shiftKey	返回當事件被觸發時，」SHIFT」鍵是否被按下

舉例：altKey

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="box"></div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('div').eq(0).click(function (ev) {
            console.log(ev.altKey);  //判斷alt鍵是否被按下，按了輸出true，不然返回false
        })
    })
</script>
</body>
</html>

View Code

網頁訪問，點擊紅色區域，查看console，會輸出false。

左手按住alt鍵，同時右手，用鼠標點擊紅色區域，會輸出true

IE 屬性(除了上面的鼠標/事件屬性，IE 瀏覽器還支持下面的屬性)

屬性	描述
`cancelBubble`	若是事件句柄想阻止事件傳播到包容對象，必須把該屬性設爲 true。
fromElement	對於 mouseover 和 mouseout 事件，fromElement 引用移出鼠標的元素。
keyCode	對於 keypress 事件，該屬性聲明瞭被敲擊的鍵生成的 Unicode 字符碼。對於 keydown 和 keyup
offsetX,offsetY	發生事件的地點在事件源元素的座標系統中的 x 座標和 y 座標。
`returnValue`	若是設置了該屬性，它的值比事件句柄的返回值優先級高。把這個屬性設置爲
`srcElement`	對於生成事件的 Window 對象、Document 對象或 Element 對象的引用。
toElement	對於 mouseover 和 mouseout 事件，該屬性引用移入鼠標的元素。
x,y	事件發生的位置的 x 座標和 y 座標，它們相對於用CSS動態定位的最內層包容元素。

舉例：keyCode

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="box"></div>
<input type="text"/>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('input').keydown(function (ev) {
            console.log(ev.keyCode);  //返回被敲擊的鍵生成的 Unicode 字符碼
        })
    })
</script>
</body>
</html>

View Code

網頁訪問，將鼠標放入到輸入框，直接回車，console就會輸出13

按別的鍵，也會輸出對應的數字。

有些應用創景，須要判斷輸入回車時，就能夠用這個方法，來作判斷。

標準 Event 屬性下面列出了 2 級 DOM 事件標準定義的屬性。

屬性和方法	描述
bubbles	返回布爾值，指示事件是不是起泡事件類型。
`cancelable`	返回布爾值，指示事件是否可擁可取消的默認動做。
`currentTarget`	返回其事件監聽器觸發該事件的元素。
eventPhase	返回事件傳播的當前階段。
`target`	返回觸發此事件的元素（事件的目標節點）。
timeStamp	返回事件生成的日期和時間。
`type`	返回當前 Event 對象表示的事件的名稱。
initEvent()	初始化新建立的 Event 對象的屬性。
`preventDefault()`	通知瀏覽器不要執行與事件關聯的默認動做。
`stopPropagation()`	再也不派發事件。

舉例：target

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .child {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="child"></div>
</div>
<!--<input type="text"/>-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('.child').click(function (ev) {
            console.log(ev.target);  //返回觸發此事件的元素
        })
    })
</script>
</body>
</html>

View Code

訪問網頁，點擊綠色區域，console輸出

舉例：preventDefault

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .child {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="child">
        <a href="http://www.baidu.com" target="_blank">點擊</a>
    </div>
</div>
<!--<input type="text"/>-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('a').click(function (ev) {
            //阻止默認事件
            ev.preventDefault();
            // 跳轉頁面
            window.location.href = 'http://www.mi.com'
        })
    })
</script>
</body>
</html>

View Code

訪問網頁，點擊a標籤，就會調轉到小米頁面。它阻止了跳轉到百度的動做。

舉例：stopPropagation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<button>button</button>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        $('button').eq(0).click(function (ev) {
            alert('button click');
            // 阻止冒泡
            //ev.stopPropagation();
        })
        $('body').click(function (ev) {
            alert('body click');
        })
    })
</script>
</body>
</html>

View Code

訪問網頁，點擊button，先提示

再提示

打開註釋，開啓冒泡。就只會提示button click了。爲何呢？由於button的上面是body，阻止以後，就不會再執行body的click事件了。

就像魚吐泡泡時，是從水底慢慢遊到水面上，泡泡就破裂了。

既阻止默認事件，又阻止了冒泡，一行代碼，就能夠實現

return false;

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<button>button</button>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        $('button').eq(0).click(function (ev) {
            alert('button click');
            //阻止默認事件
            //ev.preventDefault();
            // 阻止冒泡
            //ev.stopPropagation();
            // 既阻止默認事件，又阻止了冒泡
            return false;
        })
        $('body').click(function (ev) {
            alert('body click');
        })
    })
</script>
</body>
</html>

View Code

Event對象的一些兼容性寫法（瞭解）

得到event對象兼容性寫法
event || (event = window.event);
得到target兼容型寫法
event.target||event.srcElement
阻止瀏覽器默認行爲兼容性寫法
event.preventDefault ? event.preventDefault() : (event.returnValue = false);
阻止冒泡寫法
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);

4、jQuery的事件綁定和解綁　　　　　　　　　　　　　

一、綁定事件

語法：

bind(type,data,fn)

描述：爲每個匹配元素的特定事件（像click）綁定一個事件處理器函數。

參數解釋：

type (String) : 事件類型

data (Object) : (可選) 做爲event.data屬性值傳遞給事件對象的額外數據對象

fn ( Function) : 綁定到每一個匹配元素的事件上面的處理函數

示例：

當每一個p標籤被點擊的時候，彈出其文本

$("p").bind("click", function(){
  alert( $(this).text() );
});

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<button>高圓圓</button>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        //綁定點擊事件
        $('button').bind('click',function () {
            console.log($(this).text());  //打印text值
        })
    })
</script>
</body>
</html>

View Code

訪問網頁，點擊按鈕，查看console，輸出高圓圓

你能夠在事件處理以前傳遞一些附加的數據。

function handler(event) {
//event.data 能夠獲取bind()方法的第二個參數的數據
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<button>高圓圓</button>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        //綁定點擊事件
        $('button').bind('click',{name:'劉詩詩'},function (ev) {
            console.log($(this).text(ev.data.name));  //修改text值
        })
    })
</script>
</body>
</html>

View Code

訪問網頁，點擊按鈕，發現按鈕的值變成劉詩詩了。

經過返回false來取消默認的行爲並阻止事件起泡。

$("form").bind("submit", function() { return false; })

經過使用 preventDefault() 方法只取消默認的行爲。

$("form").bind("submit", function(event){
  event.preventDefault();
});

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<button>高圓圓</button>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        //綁定點擊事件
        $('button').bind('click',{name:'劉詩詩'},function (ev) {
            //阻止冒泡
            ev.stopPropagation();
            //數據驅動視圖
            console.log($(this).text(ev.data.name));  //修改text值
        })
        $('body').bind('click',function () {
            alert('is body');
        })
    })
</script>
</body>
</html>

View Code

範圍網頁，點擊按鈕，也是按鈕值被修改了。可是沒有執行body的alert!

若是關閉阻止冒泡，就會執行body裏面的代碼。

二、解綁事件

語法：

unbind(type,fn);

描述：

bind()的反向操做，從每個匹配的元素中刪除綁定的事件。

若是沒有參數，則刪除全部綁定的事件。

若是把在綁定時傳遞的處理函數做爲第二個參數，則只有這個特定的事件處理函數會被刪除。

參數解釋：

type (String) : (可選) 事件類型

fn(Function) : (可選) 要從每一個匹配元素的事件中反綁定的事件處理函數

示例：

把全部段落的全部事件取消綁定

$("p").unbind()

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .father{
            width: 200px;
            height: 200px;
            background-color: green;
        }
        p{
            background-color: red;
            /*margin-left: 20px;*/
            position: relative;
            /*left: 20px;*/
        }
    </style>
</head>
<div class="father">
    <p>高圓圓</p>
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        //綁定點擊事件
        $('.father').bind('mouseenter',function(){
            console.log(2);
        })
        //100毫秒後解綁事件
        setTimeout(function(){
            $('.father').unbind('mouseenter')
        },100)
    })
</script>
</body>
</html>

View Code

訪問網頁，將鼠標移動到紅色區域時，console沒有輸出2，說明事件被解綁了。

將段落的click事件取消綁定

$("p").unbind( "click" )

刪除特定函數的綁定，將函數做爲第二個參數傳入

var foo = function () {
  //綁定事件和解綁事件的事件處理函數
};

$("p").bind("click mouseenter", foo); // 給p段落綁定click mouseenter事件

$("p").unbind("click", foo); // 只解綁了p段落標籤的click事件

3.自定義事件

其實事件的綁定和解綁，都是我爲了自定義事件作準備（你們把jQuery的提供的事件熟記在心），之後對jquery熟了之後，能夠玩一下自定義事件

語法：

trigger(type,data);

描述：在每個匹配的元素上觸發某類事件，它觸發的是由bind()註冊的自定義事件。

參數解釋：

type (String) : 要觸發的事件類型

data (Array) : (可選)傳遞給事件處理函數的附加參數

示例：

給一個按鈕添加自定義的事件

$('button').bind('myClick',function(ev,a,b){
    //給button按鈕添加的自定義事件myClick事件        
})

而後經過trigger()觸發自定義的事件

$('button').trigger('myClick',[1,2])

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .father{
            width: 200px;
            height: 200px;
            background-color: green;
        }
        p{
            background-color: red;
            /*margin-left: 20px;*/
            position: relative;
            /*left: 20px;*/
        }
    </style>
</head>
<div class="father">
    <p>高圓圓</p>
</div>
<button>按鈕</button>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        // 自定義事件(瞭解便可)
        $('button').bind('myClick',function(ev,a,b){
            console.log('myClick觸發了');
            console.log(a,b)  //打印參數
        });

        // 觸發自定義事件
        $('button').eq(0).click(function () {
            //傳參數1,2
            $('button').trigger('myClick',[1,2]);
        })
    })
</script>
</body>
</html>

View Code

網頁訪問，點擊按鈕，查看console

4.補充一次性事件

語法：

one(type,data,fn)

描述：

爲每個匹配元素的特定事件（像click）綁定一個一次性的事件處理函數。在每一個對象上，這個事件處理函數只會被執行一次。其餘規則與bind()函數相同

參數解釋：

type (String) : 事件類型

data (Object) : (可選) 做爲event.data屬性值傳遞給事件對象的額外數據對象

fn (Function) : 綁定到每一個匹配元素的事件上面的處理函數

示例：
當全部段落被第一次點擊的時候，顯示全部其文本。

$("p").one("click", function(){
//只有第一次點擊的時候纔會觸發，再次點擊不會觸發了
  alert( $(this).text() );
});

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
       
    </style>
</head>
<button>按鈕</button>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        // 一次性事件
        $('button').one('click',function(){
            alert(1);
        })
    })
</script>
</body>
</html>

View Code

訪問網頁，彈出提示框，以後再次點擊，就沒有效果了！

5、事件委託(事件代理)　　　　　　　　　　　　　　　　

什麼是事件委託

通俗的講，事件就是onclick，onmouseover，onmouseout，等就是事件，委託呢，就是讓別人來作，這個事件原本是加在某些元素上的，然而你卻加到別人身上來作，完成這個事件。
　　舉個列子：有三個同事預計會在週一收到快遞。爲簽收快遞，有兩種辦法：一是三我的在公司門口等快遞；二是委託給前臺MM代爲簽收。現實當中，咱們大都採用委託的方案（公司也不會容忍那麼多員工站在門口就爲了等快遞）。前臺MM收到快遞後，她會判斷收件人是誰，而後按照收件人的要求籤收，甚至代爲付款。這種方案還有一個優點，那就是即便公司裏來了新員工（無論多少），前臺MM也會在收到寄給新員工的快遞後覈實並代爲簽收。

原理：

利用冒泡的原理，把事件加到父級上，觸發執行效果。

做用：

1.性能要好
2.針對新建立的元素，直接能夠擁有事件

事件源 :　

跟this做用同樣(他不用看指向問題，誰操做的就是誰),event對象下的

使用情景：

　　•爲DOM中的不少元素綁定相同事件；
　　•爲DOM中尚不存在的元素綁定事件；

示例：

<body>
        <ul>
            <li class="luffy">路飛</li>
            <li>路飛</li>
            <li>路飛</li>
            
        </ul>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    
    //經過on()方法
     $('ul').on('click','#namei,.luffy',function(){
        console.log(this);
       })
            
   //將來追加的元素 
    $('ul').append('<a id="namei">娜美</a>')

}
</script>

View Code

語法：

on(type,selector,data,fn);

描述：在選定的元素上綁定一個或多個事件處理函數

參數解釋

type( String) : 一個或多個空格分隔的事件類型

selector( String) : 一個選擇器字符串，用於過濾出被選中的元素中能觸發事件的後代元素

data: 當一個事件被觸發時，要傳遞給事件處理函數的 event.data。

fn:回調函數

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>
        <span>哈哈哈哈</span>
    </li>
</ul>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        //常規寫法是給每個li標籤綁定click事件，若是數據過多，會消耗瀏覽器性能。
        // $('li').click()
        // 事件委託  on(事件名字,'後代元素的選擇器字符')
        $('ul').on('click','li',function(){
            console.log($(this).text());
        })
    })
</script>

</body>
</html>

View Code

訪問網頁，點擊每個li標籤，查看console

舉例：綁定多個事件處理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>
        <span>哈哈哈哈</span>
    </li>
</ul>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        //常規寫法是給每個li標籤綁定click事件，若是數據過多，會消耗瀏覽器性能。
        // $('li').click()
        // 事件委託  on(事件名字,'後代元素的選擇器字符')
        $('ul').on('click','li,li>span',function(){
            console.log($(this).text());
        })
        $('ul').append('<li>嘿嘿嘿</li>');
    })
</script>

</body>
</html>