JavaScript函數與事件

函數是一個比較基本的概念，它允許你在一個代碼塊中存儲一段用于處理單任務的代碼，然後在你任何需要的時候通過一個簡短的指令來調用，而無需寫很多重複的代碼。

浏覽器内置函數

在浏覽器中有很多浏覽器内置的函數

例如：

var myNumber = Math.random()    生成一個随機數

var myArray = ['I', 'love', 'chocolate', 'frogs'];      操作一個數組
var madeAString = myArray.join(' ');
console.log(madeAString);
           

浏覽器背景的函數的代碼一般是由C++這樣的來編寫的，而不是JavaScript來編寫的，是以内置的浏覽器函數并不是JavaScript語言的一部分，它被定義為浏覽器API的一部分，用來提供更多的功能。

函數與方法

函數是對象方法的一部分，嚴格來說内置于浏覽器中的函數并不是函數，它們是方法，二者之間的差別在于方法是在對象内定義的函數。浏覽器中内置的函數和變量存儲在結構化對象内，是以使得代碼更加的高效且易于處理

自定義一個函數

我們可以自己來定義一個函數

例如：

function draw() {
  ctx.clearRect(0,0,WIDTH,HEIGHT);
  for (var i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255,0,0,0.5)';
    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}
           

調用自己的函數

函數的參數

一些函數需要在調用它們是指定參數————這些參數值需要放在函數括号内，才能正确的完成工作。

有些浏覽器的内置函數不需要任何參數，例如：Math.random（）函數，當它被調用時，總會傳回0到1之間的随機數。

當有的函數需要指定多個參數時，可以通過 “ , ” 來隔開

例如：浏覽器中的内置字元串replace()；（ps：replace是在主字元串中查找子字元串，并用以下字元替換字元串中的子字元串）

var myText = 'I am a string';
var newString = myText.replace('string', 'sausage');
           

函數的作用域

函數的scope即作用域，我們建立的函數所定義的變量一般都局限在它們自己的函數範圍内，而不能被函數外的代碼所通路。在函數的外層被稱為全局作用域，在全局作用域中所定義的值可以在任意地方通路。之是以要這麼設計是為了代碼的安全性與組織性。以防止惡意或偶然的使用相同變量名稱而導緻的沖突。

函數的傳回值

函數的傳回值是指，函數執行完畢後傳回的值。

例如：

var myText = 'I am a string';
var newString = myText.replace('string', 'sausage');
console.log(newString);
           

自定義函數——return

如果要使自定義函數傳回值需要使用return關鍵字。

例如：

function randomNumber(number) {
  return Math.floor(Math.random()*number);
}
           

或

function randomNumber(number) {
  var result = Math.floor(Math.random()*number);
  return result;
}
           

事件

事件是指系統面對某些動作或者發生的事情後，根據需要可以以某種方式做出回應。

在Web中事件通常發生在這些情況下

• 使用者在某個元素上點選滑鼠或懸停滑鼠
• 使用者在鍵盤上按下某個按鍵
• 使用者調整浏覽器的大小或者關閉浏覽器視窗
• 一個網頁停止加載時
• 送出表單時
• 播放、暫停、關閉視訊
• 出現錯誤時

在JavaScript中每個時間都擁有一個事件處理器，即事件觸發時會執行的代碼塊。

例如：

var btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random()*(number+1));
}

btn.onclick = function() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}
           

事件對象

有時候在事件處理函數内部時，會出現例如：event，evt，e這樣的帶有固定指定名稱的參數。這被稱為事件對象。通常被自動傳遞給事件處理函數，以提供額外的功能和資訊。

例如：

function bgChange(e) {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  e.target.style.backgroundColor = rndCol;
  console.log(e);
}  

btn.addEventListener('click', bgChange);
           

阻止事件預設行為

當我們在送出某個表格時，通過onsubmit事件來進行文本字段的判空，如果為空則在事件對象中調用preventDefault()函數，這樣就可以阻止表單的送出。并且可以提示使用者一些資訊。

例如：

<form>
  <div>
    <label for="fname">First name: </label>
    <input id="fname" type="text">
  </div>
  <div>
    <label for="lname">Last name: </label>
    <input id="lname" type="text">
  </div>
  <div>
     <input id="submit" type="submit">
  </div>
</form>
<p></p>
           

var form = document.querySelector('form');
var fname = document.getElementById('fname');
var lname = document.getElementById('lname');
var submit = document.getElementById('submit');
var para = document.querySelector('p');

form.onsubmit = function(e) {
  if (fname.value === '' || lname.value === '') {
    e.preventDefault();
    para.textContent = 'You need to fill in both names!';
  }
}
           

事件的冒泡與捕捉

當一個事件發生在父元素的元素上時，浏覽器分别運作兩個不同的階段——冒泡階段與捕獲階段。

捕獲階段

• 浏覽器檢查元素的最外層祖先，是否在捕獲階段中注冊了一個onclick事件處理程式，如果是，則運作它。
• 然後，它移動到中單擊元素的下一個祖先元素，并執行相同的操作，然後是單擊元素再下一個祖先元素，依此類推，直到到達實際點選的元素。

冒泡階段

• 浏覽器檢查實際點選的元素是否在冒泡階段中注冊了一個onclick事件處理程式，如果是，則運作它
• 然後它移動到下一個直接的祖先元素，并做同樣的事情，然後是下一個，等等，直到它到達元素。

  

事件委托

冒泡還允許我們利用事件委托——這個概念依賴于這樣一個事實,如果你想要在大量子元素中單擊任何一個都可以運作一段代碼，您可以将事件監聽器設定在其父節點上，并讓子節點上發生的事件冒泡到父節點上，而不是每個子節點單獨設定事件監聽器。