jQuery 事件機制
阿新 • • 發佈:2020-08-16
- 註冊事件:
- on()
- bind()
- on()/bind()的區別
- bind有三個引數,分別是event,data,function,也就是事件,額外要新增的資料,執行函式。
- on有四個引數,分別是event,selector,data,function,分別是事件,選擇器,額外新增的資料,執行函式。
- on可以指定具體的子元素,而bind得給每個子元素都新增一個事件
- on可以繫結沒有頁面渲染時不存在的dom,bind不可以即不能動態繫結事件
1 $("p").bind("click",function(){ 2 alert("這個段落被點選了。");3 }"dbClick",function(){ 4 alert("這個段落被雙擊了。"); 5 }); 6 $("p").on("click",function(){ alert("段落被點選了。"); });
- 委託事件:
- delegate()
- 指定的元素(屬於被選元素的子元素)新增一個或多個事件處理程式,並規定當這些事件發生時執行的函式。
1 $("div").delegate("p","click",function(){ 2 $("p").css("background-color","pink"); 3 }); 4事件物件even(事件源)
- type: 事件型別,比如click。
- which: 觸發該事件的滑鼠按鈕或鍵盤的鍵。
- target: 事件發生的初始物件(當前元素)。
- data: 傳入事件物件的資料。
- pageX: 事件發生時,滑鼠位置的水平座標(相對於頁面左上角)。
- pageY: 事件發生時,滑鼠位置的垂直座標(相對於頁面左上角)
each()方法
-
- each() 方法規定為每個匹配元素規定執行的函式,它可以用來遍歷任何一個集合,不管是一個JavaScript物件或者是一個數組,或者是一個JSon物件。
-
$("li").each(function(){
alert($(this).text())
});
- 普通新增事件的方法不支援新增多個事件,最下面的事件會覆蓋上面的,而事件繫結(addEventListener)方式新增事件可以新增多個且支援冒泡與事件的捕獲。