JSLite - 事件處理

如有疑問歡迎到這些地方交流，歡迎加入JSLite.io組織團體共同開發！

blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup#mousemove mouseover mouseout mouseenter mouseleave

change

select

submit
keydown keypress keyup

error

物件上直接新增事件。

$("#box").click(function(){
    console.log("绑定点击事件")
});

ready

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

新增一個事件偵聽器，當頁

dom

載入完畢

DOMContentLoaded

事件觸發時觸發。載入完畢執行，建議使用

$(func) 來取代這種用法。

$(document).ready(function(){
    alert("当页面dom加载完毕执行");
    console.log($("#box"));
})

$(func)載入完畢執行。與 ready 方法相同

//或者使用下面方法代替ready$(function(){    console.log("当页面dom加载完毕执行");
})

bind#為每個符合元素的特定事件綁定事件處理函數。可以綁定這些事件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("绑定点击事件")
});

unbind解除綁定事件，從每一個符合的節點物件中刪除綁定的事件。

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");}) //⇒ 解除绑定事件

onon(type, [selector], function(e){ ... }) ⇒ selfon({ type: handler, type2: handler2, ... }, [selector]) ⇒ self為每個符合元素的特定事件綁定事件處理函數。可以綁定這些事件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("绑定点击事件")
});

$("#box").on("click mouseover",function(evn){
    console.log("2"+evn)
}) //⇒ self  绑定两个事件

$("#box").on("click","p",function(){
    console.log("被点击了")
})//⇒ self  返回“#box”节点

$("#box").on("click",{val:1},function(){//传参数
    console.log("dddd","event.data.val = " + event.data.val)
})

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

###off#########解除綁定事件，從每個符合的節點物件中刪除綁定的事件。 ###

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
符合到的節點集合的元素上觸發指定的事件。如果給定args參數，它會作為參數傳遞給事件函數。

$("#box").on("abc:click",function(evn,a,c){
    console.log("2"+a+c)
}) //⇒ self  绑定一个事件
$("#box").trigger("abc:click",["wwww"]) //⇒ self 触发并传一个参数进去