JQuery事件機制

時間 2020-08-01

標籤 jquery 事件機制欄目 JQuery 简体版

原文原文鏈接

1 事件操做

1.1 頁面載入事件

$(document).ready(function(){ // 在這裏寫你的代碼... }); 或者 $(function($) { // 你能夠在這裏繼續使用$做爲別名... });

1.2 事件綁定

on(eve,[sel],[data],fn)      1.7+ 在選擇元素上綁定一個或多個事件的事件處理函數
bind(type,[data],fn)         3.0- 請使用on()
one(type,[data],fn)            爲每個匹配元素的特定事件（像click）綁定一個一次性的事件處理函數

1.3 解除事件綁定

off(eve,[sel],[fn])         1.7+ 在選擇元素上移除一個或多個事件的事件處理函數
unbind(t,[d|f])                3.0- 請使用off()

1.4 觸發事件

trigger(type,[data])         在每個匹配的元素上觸發某類事件

triggerHandler(type, [data]) 
這個特別的方法將會觸發指定的事件類型上全部綁定的處理函數。但不會執行瀏覽器默認動做，也不會產生事件冒泡
這個方法的行爲表現與trigger相似，但有如下三個主要區別：
* 第一，他不會觸發瀏覽器默認事件。
* 第二，只觸發jQuery對象集合中第一個元素的事件處理函數。
* 第三，這個方法的返回的是事件處理函數的返回值，而不是據有可鏈性的jQuery對象。此外，若是最開始的jQuery對象集合爲空，則這個方法返回 undefined 。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery事件</title>
</head>
<body>
    <h1>jquery事件</h1>
    <hr>

    <button id="btn">按鈕</button>
    <button id="btn2">解除綁定</button>
    <hr>

    <button id="btn3">下載</button>

    <br>

    <a href="1.html" id="a1">超連接</a>

    <hr>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit laboriosam dolores eos quasi laborum earum libero est doloremque, tempora error at tempore nostrum! Fugit saepe ipsam deserunt commodi asperiores, unde.</p>

    
    <script src="../jquery-3.3.1.js"></script>
    <script>
        $(function(){
            // 綁定事件
            $('#btn').on('click', function(){
                alert('啊，你點我了')
            });
            
            // off()解除綁定
            $('#btn2').on('click', function(){
                $('#btn').off();
            });

            //one()綁定一個一次性事件，即該事件只會被觸發一次
            $('#btn3').one('click', function(){
                alert('哈哈哈');
            });


            $('#a1').on('click', function(){
                alert('啊，我是超連接');

                //阻止事件冒泡 和 默認動做
                return false;
            });


            //手動 代碼觸發 事件
            //$('#btn').click()       //刷新網頁是會自動觸發
            /*$('#btn').trigger('click')   //刷新網頁時也會出發啊
            $('#btn').trigger('click')
            $('#btn').trigger('click')*/

            // 鼠標懸停在p元素上，事件就被執行一次
            $('p').hover(function(){
                console.log('OK');       
            })
        })
    </script>
</body>
</html>

1.5 事件委派

live(type,[data],fn)    1.7-
die(type,[fn])            1.7-
delegate(s,[t],[d],fn)    3.0-
undelegate([s,[t],fn])    3.0-
所有移除了，請使用 on()

$(document).on('click', 'button', fn)

1.6 事件切換

hover([over,]out)           一個模仿懸停事件（鼠標移動到一個對象上面及移出這個對象）的方法
toggle([spe],[eas],[fn])   1.9-用於綁定兩個或多個事件處理器函數，以響應被選元素的輪流的 click 事件

2 事件列表

blur([[data],fn])
change([[data],fn])
click([[data],fn])
dblclick([[data],fn])
error([[data],fn])
focus([[data],fn])
focusin([data],fn)         
    當元素得到焦點時，觸發 focusin 事件。 focusin事件跟focus事件區別在於，他能夠在父元素上檢測子元素獲取焦點的狀況

focusout([data],fn)
    當元素失去焦點時觸發 focusout 事件。focusout事件跟blur事件區別在於，他能夠在父元素上檢測子元素失去焦點的狀況。

keydown([[data],fn])
keypress([[data],fn])
keyup([[data],fn])
mousedown([[data],fn])
mouseenter([[data],fn])
    當鼠標指針穿過元素時，會發生 mouseenter 事件。該事件大多數時候會與mouseleave 事件一塊兒使用。與 mouseover 事件不一樣，只有在鼠標指針穿過被選元素時，纔會觸發 mouseenter 事件。若是鼠標指針穿過任何子元素，一樣會觸發 mouseover 事件。

mouseleave([[data],fn])
    當鼠標指針離開元素時，會發生 mouseleave 事件。該事件大多數時候會與mouseenter 事件一塊兒使用。與 mouseout 事件不一樣，只有在鼠標指針離開被選元素時，纔會觸發 mouseleave 事件。若是鼠標指針離開任何子元素，一樣會觸發 mouseout 事件。

mousemove([[data],fn])
mouseout([[data],fn])
mouseover([[data],fn])
mouseup([[data],fn])
resize([[data],fn])
scroll([[data],fn])
select([[data],fn])
submit([[data],fn])
unload([[data],fn])

3 事件對象

屬性html

eve.currentTarget        在事件冒泡階段中的當前DOM元素
eve.data                當前執行的處理器被綁定的時候，包含可選的數據傳遞給jQuery.fn.bind
eve.delegateTarget        1.7+ 當currently-called的jQuery事件處理程序附加元素
eve.namespace            當事件被觸發時此屬性包含指定的命名空間
eve.pageX                鼠標相對於文檔的左邊緣的位置
eve.pageY                鼠標相對於文檔的頂部邊緣的位置
eve.relatedTarget        在事件中涉及的其它任何DOM元素
eve.result                這個屬性包含了當前事件事件最後觸發的那個處理函數的返回值，除非值是 undefined
eve.target                最初觸發事件的DOM元素
eve.timeStamp            返回事件觸發時距離1970年1月1日的毫秒數
eve.type                事件類型
eve.which                針對鍵盤和鼠標事件，這個屬性能肯定你到底按的是哪一個鍵或按鈕

方法jquery

eve.preventDefault()            阻止默認事件行爲的觸發
eve.isDefaultPrevented()        根據事件對象中是否調用過 event.preventDefault() 方法來返回一個布爾值
eve.stopPropagation()            防止事件冒泡到DOM樹上，也就是不觸發的任何前輩元素上的事件處理函數
eve.isPropagationStopped()        檢測 event.stopPropagation() 是否被調用過
eve.stopImmediatePropagation()     阻止剩餘的事件處理函數執行而且防止事件冒泡到DOM樹上
eve.isImmediatePropagation()     檢測 event.stopImmediatePropagation() 是否被調用過

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery事件對象</title>
    <style>
        #box {
            width:300px;
            height:200px;
            border:2px solid #ccc;
            margin:100px auto;
        }
    </style>
</head>
<body>
    <h1>事件對象</h1>
    <hr>

    <div id="box"></div>

    <script src="../jquery-3.3.1.js"></script>
    <script>
        $(function(){
            $('#box').on('click', function(en) {
                //鼠標的位置
                console.log(en.clientX, en.clientY); //鼠標相對於視口的位置
                console.log(en.pageX, en.pageY);   //鼠標相對於頁面的位置，不滑動滾動條的狀況下，和client獲取的位置同樣，滑動時高就會不一樣
                console.log(en.offsetX, en.offsetY); //鼠標在本元素的位置，即鼠標相對於框的左上角的位置
            });

            $(document).on('keyup', function(en) {
                console.log(en.which)    //按鍵按下並釋放時事件會被觸發,打印按鍵對應的ASCII碼值
            });
            $('#box').on('mousedown', function(en) {
                console.log(en.which)     //鼠標鍵按下時會被觸發，打印出對應的ASCII碼值（1 2 3  ）  
            })

        })
    </script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。