JSLite - 事件处理

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

segmentfault社区 | 官方网站 | 官方文档-更详细 | 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 对象上直接添加事件。

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

on

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

on({ 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 触发并传一个参数进去