目標：2021年2月起，每周一篇文章翻譯，從跟程式相關的短文/新聞開始，過程中也會接觸到程式專有名詞，能試著自己詮釋加強概念。4月起主題，從SOLOLEARN平台做JavaScript篇章的翻譯。

■□■ Aug, Week 2 ■□■ Title: JavaScript Author、Platform: SOLOLEARN Source: https://www.sololearn.com/learning/1024

Events

事件

You can write JavaScript code that executes when an event occurs, such as when a user clicks an HTML element, moves the mouse, or submits a form.
When an event occurs on a target element, a handler function is executed.
Common HTML events include:

你可以寫JavaScript程式碼，當一個事件發生時執行，像是：當使用者按一個HTML的元素、移動滑鼠或送出一個表單。
當事件發生在目標元素上，handler函式就會被執行。
常見的HTML事件包含：

contentImage
事件 描述
onclick 當使用者按一個元素時發生(滑鼠按下又放開)
onload 當一個物件載入(has loaded)時發生
onunload 一旦網頁未載入(離開頁面)時發生 (適用於<body>)
onchange 當表格元素、選單或選取狀態的內容改變時發生(適用於<input>、<keygen>、<select>和<textarea>)
onmouseover 當游標移到元素或它的子元素上面時發生
onmouseout 當使用者將滑鼠游標移出元素或它的子元素時發生
onmousedown 當使用者在元素按下滑鼠按鈕時發生
onmouseup 當使用者在元素放開滑鼠按鈕時發生
onblur 當元素失去焦點時發生
onfocus 當元素成為焦點時發生 
TIP: Corresponding events can be added to HTML elements as attributes.  For example: <p onclick="someFunc()">some text</p>

提示：類似的事件可以當成屬性被加到HTML元素中，例如： 

<p onclick="someFunc()">some text</p>

-----

Handling Events

處理事件

Let's display an alert popup when the user clicks a specified button:

我們來展示一個彈跳警告視窗，當使用者按下特定按鈕時： 

<button onclick="show()">Click Me</button>
<script>
function show() {
alert("Hi there");
}
</script>

Event handlers can be assigned to elements.
For example:

事件處理器(handlers)可以被指派給元素。
例如：

var x = document.getElementById("demo");
x.onclick = function () {
document.body.innerHTML = Date();
}

TIP:You can attach events to almost all HTML elements.

提示：你可以在幾乎所有的HTML元素加上事件。

-----

Events

事件

The onload and onunload events are triggered when the user enters or leaves the page. These can be useful when performing actions after the page is loaded.

onload和onunload事件是當使用者進入或離開網頁時被觸發，在網頁載入後，要表現使用行為時很實用。 

<body onload="doSomething()">

Similarly, the window.onload event can be used to run code after the whole page is loaded.

window.onload ​= function() { ​//some code }

同樣的，window.onload事件，在整個網頁載入後，可以運作跑程式。

The onchange event is mostly used on textboxes. The event handler gets called when the text inside the textbox changes and focus is lost from the element.
For example:

onchange事件大多被使用在文字欄(textboxes)，當文字欄裡的文字改變，而元素的失去焦點時，事件處理器就會被呼叫。
例如： 

<input type="text" id="name" onchange="change()">
<script>
function change() {
var x = document.getElementById("name");
x.value= x.value.toUpperCase();
}
</script>
TIP:It's important to understand events, because they are an essential part of dynamic web pages.

提示：了解事件很重要，因為他們是動態(dynamic)網頁必要的部分。

-----

Event Listeners

事件監聽器

The addEventListener() method attaches an event handler to an element without overwriting existing event handlers. You can add many event handlers to one element.
You can also add many event handlers of the same type to one element, i.e., two "click" events.

addEventListener()方法將事件處理器附加給元素，且不覆蓋已存在的事件處理器。你可以加很多事件處理器給一個元素。
你也可以增加很多相同類型的事件處理器給一個元素，像是2個click點擊事件。 

element.addEventListener(event, function, useCapture);

The first parameter is the event's type (like "click" or "mousedown").
The second parameter is the function we want to call when the event occurs.
The third parameter is a Boolean value specifying whether to use event bubbling or event capturing. This parameter is optional, and will be described in the next lesson.

Note that you don't use the "on" prefix for this event; use "click" instead of "onclick".Example:

第一個參數是事件類型(像是點擊click或按下滑鼠mousedown)。
第二個參數是當事件發生時，我們想要呼叫的函式。
第三個參數是布林值，指出是否使用bubbling事件或者capturing事件。這個參數是選填的，下一堂課會說明。
記住：這個事件不能在前面加上on，使用click取代onclick，舉例： 

element.addEventListener("click", myFunction);
element.addEventListener("mouseover", myFunction);

function myFunction() {
alert("Hello World!");
}

This adds two event listeners to the element.
We can remove one of the listeners:

這會增加兩個事件監聽器給元素，我們可以移除其中一個： 

element.removeEventListener("mouseover", myFunction);

Let's create an event handler that removes itself after being executed:

我們來新增一個事件監聽器，在執行後移除自己。 

<button id="demo">Start</button>

<script>
var btn = document.getElementById("demo");
btn.addEventListener("click", myFunction);

function myFunction() {
alert(Math.random());
btn.removeEventListener("click", myFunction);
}
</script>

After clicking the button, an alert with a random number displays and the event listener is removed.

按下按鈕後，呈現一個亂數的警告視窗以及事件監聽器就被移除。 

TIP:Internet Explorer version 8 and lower do not support the addEventListener() and removeEventListener() methods. However, you can use the document.attachEvent() method to attach event handlers in Internet Explorer.

提示：IE 8以及更低的瀏覽器版本不支援addEventListener()和removeEventListener()方法。然而，你可以使用document.attachEvent()方法加事件處理器到IE中。

-----

翻譯小心得｜ 之前幾乎都是使用click事件，沒有特別研究滑鼠的事件，在翻譯時對click和mousedown有什麼差異覺得困惑，好像都是按下去的樣子，再查一下補充資料，理解click是按下並放開的連續動作，可以分開看成mousedown+mouseup，按下滑鼠和放開，可以有不同的事件設定。 Finally, the article above is from SOLOLEARN .  I translated it just for practice, personal use only. If that is inappropriate, please contact me.
 This free site is ad-supported. Learn more
​