初步學習jQuery之事件

老闆便宜一點唄發表於2019-02-16
jQuery事件

事件

頁面載入

在DOM中提供了load事件用於頁面載入完畢之後執行機制，jQuery提供了ready（）方法實現相似的功能，但是存在以下的區別。
1.DOM中的load事件沒有任何的簡寫形式，但是在jQuery的ready（）方法中提供了簡寫形式。
2.在HTML頁面載入完成以後，load事件才會被觸發；而在DOM節點樹載入完畢以後，ready（）方法就會被呼叫。
3.一個HTML頁面中只能存在一個load事件，但是可以存在多個ready（）方法。
ready（）方法的語法結構：

1.$(document).ready(function(){});
2.$().ready(function(){});//簡寫
3.$(function(){});//簡寫

事件繫結

單事件繫結與單事件解綁

單事件繫結

jQuery中提供了bind（）方法完成繫結事件，語法如下
$element.bind(type,data,callback);
type:表示繫結事件的名稱，是字串型別，沒有‘on’。
data：作為element.data屬性值傳遞給事件物件的額外資料物件(可選項)。
callback：表示繫結事件的處理函式。
示例程式碼如下：

<body>
<button id=`btn`>按鈕</button>
<script>
function click1(){
console .log(`this  is button,`);
}
$(`#btn`).bind(`click`,click1);

單事件解綁

jQuery中提供了unbind（）方法來解綁事件。具體方法如下：
$element.unbind(type[,data，callback])；

$(`#btn`).unbind(`click`);//只傳遞事件名稱，解繫結該事件的所有處理函式。
$(`#btn`).undind(`click`click1);//傳遞時間名稱和指定的處理函式，解繫結該事件的指定處理函式。

多事件繫結與解綁

<style>
        #title {
            width: 100px;
            height: 20px;
            border: 1px solid black;
        }
        ul {
            list-style: none;
            padding: 0;

            display: none;
        }
        li {
            width: 100px;
            height: 20px;
            border: 1px solid black;
        }

    </style>
</head>
<body>
<div id="title">選單</div>
<ul>
    <li>北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>
<script>
// mouseover表示滑鼠懸停在指定元素之上 mouseout表示滑鼠從指定元素上移開
 //jQuery支援鏈式操作，多事件繫結時，事件名稱之間使用空格分離。
$(`#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中提供多組事件繫結與解繫結的方法
1.bind()與unbind() – jQuery 3.0版本後刪除方法
2.on()與off()方法 – jQuery 1.7版本後新增方法
其實bind()與unbind()的底層方法就是on()和off()
3.live()與die() – jQuery 1.7版本後刪除方法
作用 – 實現事件委託
4.delegate()與undelegate() – jQuery 1.6版本後新增方法，jQuery
3.0版本後刪除方法
作用 – 實現事件委託
5.one() – 為事件繫結一次性的函式

事件切換

hover（）方法

jQuery中提供了hover()方法模擬滑鼠懸停事件效果。
$element.hover(over,out);
示例程式碼如下：

   <style>
        #title {
            width: 100px;
            height: 20px;
            border: 1px solid black;
        }
        ul {
            list-style: none;
            padding: 0;

            display: none;
        }
        li {
            width: 100px;
            height: 20px;
            border: 1px solid black;
        }

    </style>
</head>
<body>
<div id="title">選單</div>
<ul>
    <li>北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>
<script>
 $(`#title`).hover(function(){
        $(`ul`).css(`display`,`block`);
    },function(){
        $(`ul`).css(`display`,`none`);
    });

</script>
</body>

事件模擬

jQuery中提供了trigger()方法用於模擬除法匹配元素繫結的事件
$element.trigger(type[,dat]);

<body>
<button id="btn">按鈕</button>
<script>
    // 繫結事件 - 由使用者行為進行觸發，呼叫處理函式
    $(`#btn`).bind(`click`,function(){
        console.log(`this is button.`);
    });
    // 模擬使用者觸發事件
    $(`#btn`).trigger(`click`);

</script>
</body>

相關文章