jQuery基本功能——事件

憨憨欣發表於2020-11-05
jQuery事件

文章目錄

事件

1、頁面載入

DOM提供了load事件用於葉面積在完畢之後執行機制，jQuery提供了ready()方法實現相似功能。但DOM中的load事件與jQuery中的ready()方法具有以下三種區別：

  • DOM中的load事件：

    • 沒有任何簡寫形式
    • 當HTML頁面載入完畢之後出發load事件
    • 一個HTML頁面僅允許存在一個load事件

  • jQuery中的ready()方法：

    • 具有簡寫形式
    • 當DOM節點樹載入完畢之後呼叫ready()方法
    • 一個HTML頁面允許存在多個ready()方法

    jQuery中的ready()方法：示例程式碼如下：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>頁面載入（jQuery）</title>
    <script src="../jquery-1.12.4.js"></script>
    <script>
/*
        jQuery提供了ready()方法——三種寫法
            作用：實現了類似於window.onload事件的功能
*/
    // 寫法一：
        /*$(document).ready(function () {
            console.log($('#btn'));
        });*/

    // 寫法二
        /*$().ready(function () {
            console.log($('#btn'));
        });*/
    // 寫法三----平常用法
        $(function () {
            console.log($('#btn'));
        });
    </script>

</head>
<body>
    <button id="btn">按鈕</button>
</body>
</html>

2、事件繫結

（1）單事件繫結

jQuery提供了bind()方法完成事件繫結功能。

jQuery提供了unbind()方法完成事件解繫結功能。

示例程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的繫結與解綁</title>
    <script src="../jquery-1.12.4.js"></script>
</head>
<body>
    <button id="btn">按鈕</button>
</body>
<script>
    /*
        bind(type,data,callback)方法 - 繫結事件
            *引數
                *type - 表示繫結的事件名稱（注意：沒有on）
                *data -作為event.data屬性傳遞給事件物件的額外資料物件
                *callback - 表示繫結時間內的處理函式
    */
    function click1() {//為按鈕繫結點選事件
        console.log('this is function')
    }
    function click2() {//為按鈕繫結點選事件
        console.log('this is function too')
    }
    $('#btn').bind('click',click1);
    $('#btn').bind('click',click2);
    /*
        unbind(type,data,callback)方法 - 解繫結事件
            *引數
                *type - 表示繫結的事件名稱（注意：沒有on）
                *data -作為event.data屬性傳遞給事件物件的額外資料物件
                *callback - 表示繫結時間內的處理函式
            *情況
                *如果傳遞事件名稱的話 - 解繫結該事件的所有處理函式
                *如果傳遞事件名稱和指定的處理函式 - 解綁該事件的指定處理函式
    */
    $('#btn').unbind('click',click1)
// -----------------------------------------------------------
/*
    bind()與undind()中的data引數---用法並不唯一
     * data引數的值->利用event事件物件的data屬性進行接收
     * 特點：改引數的資料內容只能在時間的處理函式中被使用——低耦合
*/
    // var obj = {a:'張無忌'};
    $('#btn').bind('click',{a:'張無忌'},function (event) {
        console.log(event.data);
        // console.log(obj);
    });
</script>
</html>

（2）多事件繫結

多事件繫結同樣適用bind()方法完成事件繫結功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多事件的繫結與解綁</title>
    <script src="../jquery-1.12.4.js"></script>
    <style>
        #title{
            width: 80px;
            height: 20px;
            border: 1px solid black;
        }
        ul{
            list-style: none;
            padding: 0;
            display: none;
        }
        li{
            width: 80px;
            height: 20px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div id="title">選單</div>
    <ul>
        <li>北京</li>
        <li>天津</li>
        <li>南京</li>
    </ul>
</body>
<script>
    /*滑鼠懸停事件
        * mouseover - 表示滑鼠懸停在指定元素上
        * mouseout - 表示滑鼠從指定元素上移開
    */
    /*寫法一：
    $('#title').bind('mouseover',function () {
        $('ul').css('display','block');
    });
    $('#title').bind('mouseout',function () {
        $('ul').css('display', 'none');
    });
    */

    // 寫法二---鏈式操作：
   /* $('#title').bind('mouseover',function () {
        $('ul').css('display','block');
    }).bind('mouseout',function () {
        $('ul').css('display', 'none');
    });*/
    //寫法三：多事件繫結
    $('#title').bind('mouseover mouseout',function () {
       if ($('ul').is(':hidden')){
           $('ul').css('display','block');
        }else {
           $('ul').css('display', 'none');
       }
    });
</script>
</html>

上述示例程式碼效果圖如下所示：

多事件繫結效果圖

（3）事件繫結方法的對比

事件繫結方法對比

3、事件切換

jQuery提供了hover()方法模擬滑鼠懸停事件效果。

示例程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件切換</title>
    <script src="../jquery-1.12.4.js"></script>
    <style>
        #title{
            width: 80px;
            height: 20px;
            border: 1px solid black;
        }
        ul{
            list-style: none;
            padding: 0;
            display: none;
        }
        li{
            width: 80px;
            height: 20px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div id="title">選單</div>
<ul>
    <li>北京</li>
    <li>天津</li>
    <li>南京</li>
</ul>
</body>
<script>
   // jQuery提供了hover(over,out)方法
    $('#title').hover(function () {
        $('ul').css('display','block');
    },function () {
        $('ul').css('display', 'none');
    });

</script>
</html>

4、事件模擬

jQuery提供了trigger()方法用於模擬觸發器匹配元素繫結的事件。

示例程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件模擬</title>
    <script src="../jquery-1.12.4.js"></script>
</head>
<body>
    <button id="btn">按鈕</button>
</body>
<script>
    // 繫結事件 - 由使用者進行觸發，呼叫處理函式
    $('#btn').bind('click',function () {
        console.log('this is button');
    });
    // 模擬使用者觸發事件
    $('#btn').trigger('click');
</script>
</html>

相關文章