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

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

Event Propagation

事件傳播

There are two ways of event propagation in the HTML DOM: bubbling and capturing.

在HTML DOM裡面有兩個事件傳播的方式：冒泡(bubbling)和捕捉(capturing)。

Event propagation allows for the definition of the element order when an event occurs. If you have a <p> element inside a <div> element, and the user clicks on the <p> element, which element's "click" event should be handled first?

當事件發生時，事件傳播(event progagation)會考慮到(allow for)元素順序的定義，如果你在<div>元素裡面有一個<p>元素，使用者按了<p>元素，哪一個元素的"click"事件會先被處理呢？

In bubbling, the innermost element's event is handled first and then the outer element's event is handled. The <p> element's click event is handled first, followed by the <div> element's click event.

在冒泡(bubbling)法中，最裡面的元素事件會先被處理，然後處理較外層的元素事件，<p>元素的click事件會先被處理，接著處理<div>的click事件。

In capturing, the outermost element's event is handled first and then the inner. The <div> element's click event is handled first, followed by the <p> element's click event.

在捕捉(capturing)法中，最外層的元素事件會先被處理，然後處理內層的。<div>元素的click事件會先被處理，接著處理<p>的click事件。 

TIP:Capturing goes down the DOM.  Bubbling goes up the DOM.

提示：捕捉(capturing)是往下處理DOM，冒泡(bubbling)是往上 處理 DOM。

-----

Capturing vs. Bubbling

捕捉vs.冒泡

addEventListener()方法允許你用"useCapture"參數，指定傳播的方式。

The addEventListener() method allows you to specify the propagation type with the "useCapture" parameter.

addEventListener(event, function, useCapture)

The default value is false, which means the bubbling propagation is used; when the value is set to true, the event uses the capturing propagation.

預設值是false，這表示預設是使用冒泡傳播(bubbling propagation)，當該值被設定為true，事件會使用捕捉傳播(capturing propagation)。 

//Capturing propagation
elem1.addEventListener("click", myFunction, true);

//Bubbling propagation
elem2.addEventListener("click", myFunction, false);

提示：當你在DOM階層中(hierarchy)有多種元素要處理一樣的事件時這非常實用。 

TIP:This is particularly useful when you have the same event handled for multiple elements in the DOM hierarchy.

-----

Creating an Image Slider

新增輪播圖

Now we can create a sample image slider project. The images will be changed using "Next" and "Prev" buttons.
Now, let's create our HTML, which includes an image and the two navigation buttons:

現在我們可以新增一個示範的輪播圖專案，圖片會在使用Next和Prev按鈕時被改變。現在，我們新增HTML，包含一張圖片和兩個導航按鈕： 

<div>
<button> Prev </button>
<img id="slider" src="http://www.sololearn.com/uploads/slider/1.jpg"
width="200px" height="100px"/>
<button> Next </button>
</div>

Next, let's define our sample images in an array:

接著，我們定義示範圖檔在一個陣列中： 

var images = [
"http://www.sololearn.com/uploads/slider/1.jpg",
"http://www.sololearn.com/uploads/slider/2.jpg",
"http://www.sololearn.com/uploads/slider/3.jpg"
];
TIP:We are going to use three sample images that we have uploaded to our server. You can use any number of images.

提示：我們將使用上傳在我們伺服器的3張示範圖片，你可以使用任何大量的圖片。

-----

Image Slider

輪播圖

Now we need to handle the Next and Prev button clicks and call the corresponding functions to change the image.

現在我們需要處理Next和Prev按鈕，點擊並呼叫相應的函式(function)去改變照片。

HTML:

<div>
<button onclick="prev()"> Prev </button>
<img id="slider" src="http://www.sololearn.com/uploads/slider/1.jpg"
width="200px" height="100px"/>
<button onclick="next()"> Next </button>
</div>

JS: 

var images = [
"http://www.sololearn.com/uploads/slider/1.jpg",
"http://www.sololearn.com/uploads/slider/2.jpg",
"http://www.sololearn.com/uploads/slider/3.jpg"
];
var num = 0;

function next() {
var slider = document.getElementById("slider");
num++;
if(num >= images.length) {
num = 0;
}
slider.src = images[num];
}

function prev() {
var slider = document.getElementById("slider");
num--;
if(num < 0) {
num = images.length-1;
}
slider.src = images[num];
}

The num variable holds the current image. The next and previous button clicks are handled by their corresponding functions, which change the source of the image to the next/previous image in the array.

num變數保持當前的圖片，next和previous按鈕照他們相應的函式被處理，函式用陣列中下一張或前一張照片改變照片來源。 

TIP:We have created a functioning image slider!

提示：我們新增好一個運作的輪播圖了！ 

翻譯小心得｜ capturing和bubbling也是接觸過，但沒有常用的概念，有明確的定義和簡單的範例說明後，可以很清楚掌握。 第二個部分的輪播圖操作，概念是學過、用過，但之前沒有做類似功能的小作品，也是不錯的收穫。 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
​