jQuery in Action Ch.4 筆記

2009-06-10

ch4 Events are where it happens!

4.1 Understanding the browser event models

4.1.1 The DOM Level 0 Event Model
4.1.2 The DOM Level 2 Event Model
4.1.3 The Internet Explorer Event Model
解釋了DOM中event操作的方式
以及IE自己獨到的model
那就是這樣了 繼續讀下去
絕對不是我翻不出來XD

4.2 The jQuery Event Model

jQuery提供了統一的event操作方式

4.2.1 Binding event handlers using jQuery

jQuery要對element綁定event是使用bind()

$("img").bind('click',function(event){alert('Hi there!');});

當按下時 會觸發參數中的函式

bind(eventType,data,listener)

eventType是event的類型(click、focus這些)
data是帶給listener的參數 可以省略
listener是觸發後執行的函式 如果第二個參數data省略的話 這就會變成第二個參數

而對於常用的event jQuery也提供了各自的方法
例如click event 如下

$("img").click(function(){alert('Hi there!');});

按下圖片時會alert
其他可以看官網

另一個跟bind()很像的是one()

one(eventType,data,listener)

用法跟bind()一樣
但是當這個函式被觸發一次之後 就會被自動地移除掉

4.2.2 Removing event handlers

而要移除的話是用unbind()

unbind(eventType,listener)

如果兩個參數都省略的話 就是移除掉這個element所有的event
有寫eventType的話 是看要移除哪個event
listener則是移除掉bind()所建立的函式

4.2.3 Inspecting the Event instance

jQuery在event觸發後的函式中
也有可以觀察頁面上的方法
如要檢查有沒有按下ctrl鍵、alt鍵或是任何的數字字母鍵
以及滑鼠目前的座標等等
可是我找不到官網文件哪裡有寫 ._.

$("img").keypress(function(e){alert(e.keyCode);});

判斷按下了哪個鍵(該鍵的keyCode)

4.2.4 Affecting the event propagation

event的stopPropagation()
是阻止這個event往父節點的方向越往外觸發event
preventDefault()
則是停止這個event預設的任何動作
(這兩個應該是這樣吧 總覺得好像解釋的不太對= =a js真是博大精深XD)

4.2.5 Triggering event handlers
trigger(eventType)

觸發element的event

$("form:first").trigger("submit");

像是可以submit而不用按按鍵

eventName()

jQuery同樣的也提供了多個簡便的使用方法
如click()、focus()、blur()
可以像使用trigger()一樣的觸發特定的event

$("input").click();

按下時會觸發click event(可以先用bind()綁定click event)

4.2.6 Other event-related commands

另外兩個跟操作event有關的method

toggle(listenerOdd,listenerEven)

交互觸發不同的listener
下面是一個簡單的例子 顯示或隱藏一個id=say的element

$('#btn').toggle(
	function(event){
		$("#say").show();
	},
	function(event){
		$("#say").hide();
	}
);

按第一下會顯示 按第二下會隱藏 依序循環

hover(overListener,outListener)

另一個常用的event是當滑鼠移入跟移出element時要觸發的event
移入時是overListener
移出時則是outListener

$('#myimg').hover(reportover,reportout);

有一點要注意的是
element裡面如果有child elements時 是不會造成移出的效果
而是要移出該element才會有

4.3 Putting events (and more) to work

這節是運用前面所學到的知識作一個綜合運用
一個點菜菜單
其中有一個用法可以看一下

$(':checkbox').click(function(){
	$('div',$(this).parents('div:first'))
	.css('display','block');
});

這個element $(‘div’,$(this).parents(‘div:first’)) 指的是
往this的parents(也就是從父層開始往外推出去)找第一個遇到的div
而這個找到的div中的div為返回的elements
(很繞舌XD)