JSLite - 事件處理

如有疑問歡迎到這些地方交流，歡迎加入JSLite.io組織團(tuán)伙共同開發(fā)！

segmentfault社區(qū) | 官方網(wǎng)站 | 官方文檔-更詳細(xì) | Issues

blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error 對(duì)象上直接添加事件。

$("#box").click(function(){
    console.log("綁定點(diǎn)擊事件")
});

ready

ready(function($){ ... }) ? self

添加一個(gè)事件偵聽器，當(dāng)頁(yè)面 dom 加載完畢 DOMContentLoaded 事件觸發(fā)時(shí)觸發(fā)。加載完畢執(zhí)行，建議使用 $(func) 來代替這種用法。

$(document).ready(function(){
    alert("當(dāng)頁(yè)面dom加載完畢執(zhí)行");
    console.log($("#box"));
})

$(func)

加載完畢執(zhí)行。與 ready 方法相同

//或者使用下面方法代替ready
$(function(){
    console.log("當(dāng)頁(yè)面dom加載完畢執(zhí)行");
})

bind

為每個(gè)匹配元素的特定事件綁定事件處理函數(shù)。可以綁定這些事件 blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error paste drop dragover 。

$("#box").bind("click", function(){
    console.log("綁定點(diǎn)擊事件")
});

unbind

解除綁定事件，從每一個(gè)匹配的節(jié)點(diǎn)對(duì)象中刪除綁定的事件。

var f1=function(){alert("41");}
$("#box").bind("click",f1)   //? 綁定事件
$("#box").unbind("click",f1) //? 解除綁定事件


$("#box").bind("click",function(){alert("41");})   //? 綁定事件
$("#box").unbind("click",function(){alert("41");}) //? 解除綁定事件

on

on(type, [selector], function(e){ ... }) ? self

on({ type: handler, type2: handler2, ... }, [selector]) ? self

為每個(gè)匹配元素的特定事件綁定事件處理函數(shù)?？梢越壎ㄟ@些事件 blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error paste drop dragover 。

$("#box").on("click", function(){
    console.log("綁定點(diǎn)擊事件")
});


$("#box").on("click mouseover",function(evn){
    console.log("2"+evn)
}) //? self  綁定兩個(gè)事件


$("#box").on("click","p",function(){
    console.log("被點(diǎn)擊了")
})//? self  返回“#box”節(jié)點(diǎn)


$("#box").on("click",{val:1},function(){//傳參數(shù)
    console.log("dddd","event.data.val = " + event.data.val)
})


$( "#box" ).on({ //綁定多個(gè)事件
    click: function() {
        $( this ).css("background","red");
    }, 
    mouseover: function() {
        $( this ).css("background","yellow")
    },
    mousedown: function() {
        $( this ).css("background","green")
    }
});

off

解除綁定事件，從每一個(gè)匹配的節(jié)點(diǎn)對(duì)象中刪除綁定的事件。

var f1=function(){alert("41");}
$("#box").on("click",f1)   //? 綁定事件
$("#box").off("click",f1) //? 解除綁定事件


$("#box").on("click",function(){alert("41");})   //? 綁定事件
$("#box").off("click",function(){alert("41");}) //? 解除綁定事件

trigger

trigger(event, [args]) ? self

匹配到的節(jié)點(diǎn)集合的元素上觸發(fā)指定的事件。如果給定args參數(shù)，它會(huì)作為參數(shù)傳遞給事件函數(shù)。

$("#box").on("abc:click",function(evn,a,c){
    console.log("2"+a+c)
}) //? self  綁定一個(gè)事件
$("#box").trigger("abc:click",["wwww"]) //? self 觸發(fā)并傳一個(gè)參數(shù)進(jìn)去