jQuery中的事件我的分享

時間 2019-12-09

原文原文鏈接

jQuery事件

頁面加載

DOM的頁面加載機制
若是先編寫JavaScript代碼(用於獲取頁面元素),再加載頁面元素
致使問題 - 沒法成功獲取頁面元素
緣由 - 執行這段JavaScript代碼時,頁面元素尚未被加載(不存在)
解決先執行代碼後加載元素的問題 - window.onloa
保證先加載頁面元素完畢後,在執行JavaScript代碼
window對象表示瀏覽器窗口css
- load事件 - 當瀏覽器窗口加載頁面完畢時被觸發
- 事件處理函數中的代碼邏輯 -> 在瀏覽器加載頁面完畢後執行

示例代碼:瀏覽器

<!-- 先加載JavaScript代碼邏輯 -->
    <script>
        /*
            window對象表示瀏覽器窗口
            * load事件 - 當瀏覽器窗口加載頁面完畢時被觸發
            * 事件處理函數中的代碼邏輯 -> 在瀏覽器加載頁面完畢後執行
         */
        window.onload = function(){
            var btn = document.getElementById('btn');
            console.log(btn);
        }
    </script>
</head>
<body>
<!-- HTML元素 -->
<button id="btn">按鈕</button>
</body>

事件綁定

事件的綁定

bind(type, data, callback)方法 - 綁定事件函數
- 參數this
  - type - 表示綁定的事件名稱(注意:沒有on)
  - data - 做爲event.data屬性傳遞給事件對象的額外數據對象
  - callback - 表示綁定事件的處理函數

示例代碼:code

function click1(){
        console.log('this is button.');
    }
    function click2(){
        console.log('this is button too.');
    }
    $('#btn').bind('click', click1);
    $('#btn').bind('click', click2);

解綁定事件

unbind(type, data, callback)方法 - 解綁定事件對象
- 參數seo
  - type - 表示綁定的事件名稱(注意:沒有on)
  - data - 做爲event.data屬性傳遞給事件對象的額外數據對象
  - callback - 表示綁定事件的處理函數
- 狀況事件
  - 若是隻傳遞事件名稱的話 - 解綁定該事件的全部處理函數
  - 若是傳遞事件名稱和指定的處理函數 - 解綁定該事件的指定處理函數

示例代碼:ip

$('#btn').unbind('click', click1);

bind()與unbind()中的data參數

data參數的值 -> 利用event事件對象的data屬性進行接收
特色 - 該參數的數據內容只能在事件的處理函數中被使用

示例代碼:get

$('#btn').bind('click', { a : '皮卡丘' }, function(event){
        // var obj = { a : '皮卡丘' };
        console.log(event.data);
    });

多事件的綁定與解綁定

bind()方法支持同時綁定多個事件 - 事件名稱使用空格隔開
同時綁定的多個事件, 具備同一個處理函數
unbind()
不傳遞任何參數 - 表示解綁指定元素的全部事件
傳遞一個事件名稱 - 表示解綁指定元素的指定單個事件
傳遞多個事件名稱 - 表示解綁指定元素的指定多個事件
unbind()方法

沒有指定任何事件時 - 將指定元素的全部事件所有解綁定
指定一個事件名稱時 - 將指定元素的指定當個事件解綁定
指定多個事件名稱時 - 將指定元素的指定多個事件解綁定

示例代碼:

// bind()方法 - 多事件綁定，事件名稱之間使用空格分隔
    $('#title').bind('mouseover mouseout', function(){
        if ($('ul').is(':hidden')) {
            $('ul').css('display','block');
        } else {
            $('ul').css('display','none');
        }
    });

    /*
        unbind()方法
        1.沒有指定任何事件時 - 將指定元素的全部事件所有解綁定
        2.指定一個事件名稱時 - 將指定元素的指定當個事件解綁定
        3.指定多個事件名稱時 - 將指定元素的指定多個事件解綁定
     */
    $('#title').unbind('mouseover mouseout');

事件綁定方法的對比

jQuery中提供多組事件綁定與解綁定的方法
- bind()與unbind() - jQuery 3.0版本後刪除方法
- on()與off()方法 - jQuery 1.7版本後新增方法
  - 其實bind()與unbind()的底層方法就是on()和off()
- live()與die() - jQuery 1.7版本後刪除方法
  - 做用 - 實現事件委託
delegate()與undelegate() - jQuery 1.6版本後新增方法，jQuery 3.0版本後刪除方法
- 做用 - 實現事件委託
one() - 爲事件綁定一次性的函數

事件切換

示例代碼:

// jQuery提供hover(over, out)方法
    $('#title').hover(function(){
        $('ul').css('display','block');
    },function(){
        $('ul').css('display','none');
    });

事件模擬

trigger()方法 - 能夠模擬事件觸發後的效果

示例代碼:

<body>
<button id="btn">按鈕</button>
<script>
    // 綁定事件 - 由用戶行爲進行觸發，調用處理函數
    $('#btn').bind('click',function(){
        console.log('this is button.');
    });
    // 模擬用戶觸發事件
    $('#btn').trigger('click');

</script>
</body>