JSLite - event handling

If you have any questions, you are welcome to communicate in these places, and you are welcome to join the JSLite.io organization team for joint development!

blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error Add events directly to the object.

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

ready

ready(function($){ ... }) ⇒ self
Add an event listener when the page dom LoadedDOMContentLoaded Triggered when the event is triggered. After loading, it is recommended to use $(func) instead of this usage.

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

$(func)

Loading completed and executed. Same as ready method

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

bind

Bind an event handler for a specific event on each matched element. These events can be bound 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

Unbind event and delete the bound event from each matching node object.

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
Bind event handlers for specific events of each matching element. These events can be bound 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

Unbind the event and delete the bound event from each matching node object.

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
Triggers the specified event on the element of the matched node collection. If the args parameter is given, it will be passed as an argument to the event function.

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