JSLite - 事件處理
如有疑問歡迎到這些地方交流,歡迎加入JSLite.io組織團(tuán)伙共同開發(fā)!
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)頁面dom
加載完畢DOMContentLoaded
事件觸發(fā)時(shí)觸發(fā)。加載完畢執(zhí)行,建議使用$(func)
來代替這種用法。
$(document).ready(function(){ alert("當(dāng)頁面dom加載完畢執(zhí)行"); console.log($("#box")); })
$(func)
加載完畢執(zhí)行。與
ready
方法相同
//或者使用下面方法代替ready$(function(){ console.log("當(dāng)頁面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)去