MakClass

Newest ⟷ Oldest

Snapshot at 2017-04-24
第三章事件處理 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

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。
- 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).

不同的常見事件
- click
- keydown
- keyup
- change
- focus
- blur
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。
Snapshot at 2017-04-24
第三章事件處理 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

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

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).

不同的常見事件
- click
- keydown
- keyup
- change
- focus
- blur
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。
Snapshot at 2017-04-24
第三章事件處理 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

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

prop 及 attr

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

http://stackoverflow.com/a/13626565

不同的常見事件
- click
- keydown
- keyup
- change
- focus
- blur
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。
Snapshot at 2017-04-24
第三章事件處理 Events and Function handler

This is lecture 3 of the Beginning jQuery course. In this lecture, we focus on the JavaScript function and jQuery events handling methods.

係呢一章，我地會睇幾個事件處理示例。

事件處理 Event handling

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

Handling events is one of the most common tasks when writing jQuery. We often need to respond to user’s actions and provide appropriate feedbacks. The following jQuery’s events handling documentation provides a getting started guide.

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

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

prop 及 attr

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

http://stackoverflow.com/a/13626565

不同的常見事件
- click
- keydown
- keyup
- change
- focus
- blur
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

事件處理 Event handling

Delegation

Codepen 範例

Video

使用 jQuery each

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

Keycode

加內容、減內容

複製 Clone

prop 及 attr

不同的常見事件

Bonus: JavaScript Function

Understanding the this in JavaScript

進階: Object and Prototype

第三章 事件處理 Events and Function handler

事件處理 Event handling

Delegation

Codepen 範例

Video

使用 jQuery each

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

prop 及 attr

不同的常見事件

Bonus: JavaScript Function

Understanding the this in JavaScript

進階: Object and Prototype

第三章 事件處理 Events and Function handler

事件處理 Event handling

Delegation

Codepen 範例

Video

使用 jQuery each

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

prop 及 attr

不同的常見事件

Bonus: JavaScript Function

Understanding the this in JavaScript

進階: Object and Prototype

第三章 事件處理 Events and Function handler

事件處理 Event handling

Delegation

Codepen 範例

Video

使用 jQuery each

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

prop 及 attr

不同的常見事件

Bonus: JavaScript Function

Understanding the this in JavaScript

進階: Object and Prototype

第三章事件處理 Events and Function handler

`prop` 及 `attr`

Understanding the `this` in JavaScript

第三章事件處理 Events and Function handler

`prop` 及 `attr`

Understanding the `this` in JavaScript

第三章事件處理 Events and Function handler

`prop` 及 `attr`

Understanding the `this` in JavaScript

第三章事件處理 Events and Function handler

`prop` 及 `attr`

Understanding the `this` in JavaScript