JSLite - 이벤트 처리

궁금하신 점이 있으시면 이런 곳에서 소통하셔도 좋고, 공동개발을 위해 JSLite.io 조직팀에 합류하셔도 좋습니다!

흐림 focus focusin focusout load 크기 조정 code> 스크롤 언로드 클릭 dbl클릭 마우스다운 마우스업 mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error 에 직접 추가 객체 이벤트. 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")
    }
});

ready(function($){ ... }) ⇒ self
dom 페이지가 로드될 때 이벤트 리스너 추가DOMContentLoaded< /code > 이벤트가 실행되면 실행됩니다. 로딩 및 실행 후에는 이 사용법 대신 $(func)를 사용하는 것이 좋습니다.

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

🎜$(func)🎜🎜🎜이 로드되고 실행됩니다. ready 메서드 🎜🎜

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

🎜bind🎜🎜🎜와 동일합니다. 일치하는 각 요소에 대한 특정 이벤트에 대한 이벤트 핸들러를 바인딩합니다. 이러한 이벤트는 바인딩될 수 있습니다. blur focus focusin focusout load resize< /code> 스크롤 언로드 클릭 dbl클릭 마우스다운 마우스업 mousemove mouseover mouseout mouseenter mouseleave change < code>선택 제출 keydown keypress keyup error 붙여넣기 drop 드래그오버 . 🎜🎜rrreee🎜unbind🎜🎜🎜Unbind 이벤트, 일치하는 각 노드 객체에서 바인딩된 이벤트를 제거합니다. 🎜🎜rrreee🎜on🎜🎜🎜on(type, [selector], function(e){ ... }) ⇒ self
on({ type: handler, type2: handler2, ... }, [selector ]) ⇒ self
일치하는 각 요소에 대한 특정 이벤트에 이벤트 핸들러를 바인딩합니다. 이러한 이벤트는 바인딩될 수 있습니다. blur focus focusin focusout load resize< /code> 스크롤 언로드 클릭 dbl클릭 마우스다운 마우스업 mousemove mouseover mouseout mouseenter mouseleave change < code>선택 제출 keydown keypress keyup error 붙여넣기 drop 드래그오버 . 🎜🎜rrreee🎜off🎜🎜🎜이벤트 바인딩을 해제하고 일치하는 각 노드 개체에서 바인딩된 이벤트를 제거합니다. 🎜