📖 第三章事件處理 Events and Function handler

事件處理 Event handling

jQuery 中其中一個最常撰寫的代碼，就係事件處理。因為其中一個經常需要修改 HTML DOM 的情況，就係用家對界面作出了改變。而用家對界面做既所有操作，都會觸發事件。

jQuery 官網有幾個例子：

http://learn.jquery.com/events/handling-events/

例子：

$("a").on("click", function() {
    console.log( "a link was clicked" );
});

Delegation

Delegation 意思是交俾 jQuery 幫忙，對所選範圍內的目標 Selector，無論現在及將來，都自動添加事件處理。

範例：

$("#todo-list").delegate('li', 'click', function(){
  $(this).toggleClass('done');
});

Codepen 範例

See the Pen list event sample by Thomas Seng Hin Mak (@makzan) on CodePen.

Video

在影片中，我示範了用 click, delegate click 及 on 的寫法。

使用 jQuery each

平常要對一堆 DOM element 做改動，只需要直接套用到 jQuery 集合，唔使用 for-loop 逐個逐個套用。

例如：


$("p").addClass("foo");

$(".error").hide();

$("#todo-list li").click(function(){
  $(this).toggleClass("done");
});

但如果想針對集合內的每一個元素進行處理，可以使用 .each。

$('selector').each(function(){
  // each of the matched element
  $(this).something();
});

例如可能想拿取每一個元素的資料再作處理：

$('a').each(function(){
  // 拿取 href
  var href = $(this).attr('href');

  // 拿取內容
  var text = $(this).text();

  // 再處理
  $(this).blahBlahBlah(href, text);
});

另一個範例—輸入任意個名字

http://codepen.io/makzan/pen/vEQddR

Screenshot of the example

See the Pen Demo on jQuery delegate, each by Thomas Seng Hin Mak (@makzan) on CodePen.

Keycode

以上例子中，我們用到 keydown。當按下鍵盤後，另一個常見的動作是探測按鍵內容，是 A-Z？是 Enter？空白？還是方向鍵？

$('input').keyup(function(event){
  console.log(event.keyCode); // log the keyboad event to console.
});

加內容、減內容

另一個常用動作，是 prepend 及 append。都是在目標元素內加入內容。

另外，如果需要移除，有 remove, empty, detach。

複製 Clone

加內容可以直接打內容，但更好的方法是複製一個現有的 template DOM。

// 直接打內容
$("#list").append("<li><a href='http://example.com'>hello</a></li>");

Clone:

<div id='template'>
  <ul>
    <li class='item'>
      <a href='#'>Text</a>
    </li>
  </ul>
</div>

var clone = $("#template").find(".item").clone();
clone.find("a").attr('href','http://example.com');
clone.find("a").text("hello");
$("#list").append(clone);

雖然係長啲，但管理及修改更容易。

以下範例示範了利用 template+clone 的方法來加動態加減內容。

http://codepen.io/makzan/pen/RNEgvz

`prop` 及 `attr`

範例中涉及修改 submit button 嘅狀態。係 jQuery，prop 同 attr 都好類似。但 StackOverflow 上有討論什麼時候用 prop。

http://stackoverflow.com/a/13626565

Basically, prop() should be used when getting or setting properties (such as autoplay, checked, disabled and required amongst others).

不同的常見事件

Bonus: JavaScript Function

Mozilla 有一份詳細的 function 使用說明：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions

簡體版：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions

Eloquent JavaScript 是一本非常好的 JavaScript 書，其中的 Function 一章詳細說明了更多用法，包括多重 Function。

Understanding the `this` in JavaScript

JavaScript 中的 this 和傳統 OOP 的有點不同。this 不是永遠指著當前的 object instance，this 是指著當前的 function call 的 context。咩係 context? 即係邊個 call 個 function。例如：

var obj = {
  hello: function() {
    console.log('hi', this);
  }
}

obj.hello(); // this 指著 obj

var hello = function() {
  console.log('hi', this);
}

hello(); // this 指著 undefined （或 window）

更多例子：

function foo() {
  console.log(this);
}
window.foo(); // `this` refers to window.

var objectA = {
  hello: function(){
    console.log(this);
  }
};
objectA.hello(); // `this` refers to `objectA`.

更複雜，call function 時係可以指明個 context 做邊個都得：

var objectA = {
  hello: function(){
    console.log(this);
  }
};
objectA.hello.call(window); // ** `this` refers to `window`.

當事件觸發時，我們利用 jQuery 定義的事件會被觸發，觸發 function 的 context，會自動設定成目標 DOM element。所以可以直接用 this 來存取事件的主角—那個 DOM 元素。

$('#input').keydown(function(){
  console.log(this);  // `this` refers to the `#input`.
});

又係 MDN 時間。this 的詳情：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

進階: Object and Prototype

JavaScript 的物件導向 OOP 就係透過 Function 加 prototype 完成。唔係必須要明白，但想略知一二，可以參考 Eloquent Javascript。

📖 第三章 事件處理 Events and Function handler