1. 程式人生 > >jquery事件,主動觸發與自定義事件:(四)

jquery事件,主動觸發與自定義事件:(四)

還是接著上篇繼續

11:jquery事件
12:主動觸發與自定義事件
13:事件委託
14:事件冒泡
15:jquery元素節點操作
16:滾輪事件與函式節流
17:json
18:ajax與jsonp
19:本地儲存
20:jqueryUI

目錄十一

jquery事件

事件函式列表:

blur() 元素失去焦點
focus() 元素獲得焦點
change() 表單元素的值發生變化
click() 滑鼠單擊
dblclick() 滑鼠雙擊
mouseover() 滑鼠進入(進入子元素也觸發)
mouseout() 滑鼠離開(離開子元素也觸發)
mouseenter
() 滑鼠進入(進入子元素不觸發) mouseleave() 滑鼠離開(離開子元素不觸發) hover() 同時為mouseentermouseleave事件指定處理函式 mouseup() 鬆開滑鼠 mousedown() 按下滑鼠 mousemove() 滑鼠在元素內部移動 keydown() 按下鍵盤 keypress() 按下鍵盤 keyup() 鬆開鍵盤 load() 元素載入完畢 ready() DOM載入完成 resize() 瀏覽器視窗的大小發生改變 scroll() 滾動條的位置發生變化 select() 使用者選中文字框中的內容 submit() 使用者遞交表單 toggle
() 根據滑鼠點選的次數,依次執行多個函式 unload() 使用者離開頁面

事件有很多,我們得考慮好使用哪個事件才可以更好更高效的滿足我們的需求。

繫結事件的其他方式

$(function(){
    $('#div1').bind('mouseover click', function(event) {
        alert($(this).html());
});
    $('#div1').click(function(event) {
        alert($(this).html()); #this表示當前物件
    }).;

});

取消繫結事件

$(function(){
    $('#div1').bind('mouseover click', function(event) {
        alert($(this).html());

        // $(this).unbind();
        $(this).unbind('mouseover');

    });
});

目錄十二

主動觸發與自定義事件

主動觸發
可使jquery物件上的trigger方法來觸發物件上繫結的事件。
自定義事件
除了系統事件外,可以通過bind方法自定義事件,然後用tiggle方法觸發這些事件。

//給element繫結hello事件
element.bind("hello",function(){
    alert("hello world!");
});
//觸發hello事件
element.trigger("hello");