📖 第三章 事件處理 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。

Next Page → 第四章 AJAX and JSON

← Previous Page 第二章:jQuery Selector 選取目標元素


Last updated at 2017-04-24. Show version history

Comments

no comments yet.

Please login to chat.