JSLite - 事件处理

如有疑问欢迎到这些地方交流，欢迎加入JSLite.io组织团伙共同开发！

blurfocusfocusinfocusoutloadresizescrollunloadclickdblclickmousedownmouseupmousemovemouseovermouseoutmouseentermouseleavechangeselectsubmitkeydownkeypresskeyuperror对象上直接添加事件。

$("#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

为每个匹配元素的特定事件绑定事件处理函数。可以绑定这些事件blurfocusfocusinfocusoutloadresizescrollunloadclickdblclickmousedownmouseupmousemovemouseovermouseoutmouseentermouseleavechangeselectsubmitkeydownkeypresskeyuperrorpastedropdragover。

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

on

on(type, [selector], function(e){ ... }) ⇒ self
on({ type: handler, type2: handler2, ... }, [selector]) ⇒ self
为每个匹配元素的特定事件绑定事件处理函数。可以绑定这些事件blurfocusfocusinfocusoutloadresizescrollunloadclickdblclickmousedownmouseupmousemovemouseovermouseoutmouseentermouseleavechangeselectsubmitkeydownkeypresskeyuperrorpastedropdragover。

$("#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 触发并传一个参数进去