事件捕獲、事件冒泡以及事件代理

言

上圖是W3C標準的DOM事件流模型圖，從圖中可以看出，元素事件響應在DOM樹中是從頂層的Window開始“流向”目標元素，然后又從目標元素“流向”頂層的Window

通常，我們將這種事件流向分為三個階段：捕獲階段，目標階段，冒泡階段

1.捕獲階段是指事件響應從最外層的Window開始，逐級向內層前進，直到具體事件目標元素。在捕獲階段，不會處理響應元素注冊的冒泡事件。

2.目標階段指觸發事件的最底層的元素，如上圖中的。

3.冒泡階段與捕獲階段相反，事件的響應是從最底層開始一層一層往外傳遞到最外層的Window。

現在，我們就可以知道，DOM事件流的三個階段是先捕獲階段，然后是目標階段，最后才是冒泡階段。我們時常面試所說的先捕獲后冒泡也由此而來。事件代理就是利用事件冒泡或事件捕獲的機制把一系列的內層元素事件綁定到外層元素

事件冒泡和事件捕獲

實際操作中，我們可以通過 element.addEventListener() 設置一個元素的事件模型為冒泡事件或者捕獲事件。
先來看一下 addEventListener 函數的語法：

element.addEventListener(type, listener, useCapture)
// type 監聽事件類型的字符串
// listener 事件監聽回調函數，即事件觸發后要處理的函數
// useCapture 默認值false，表示事件冒泡；設為true時，表示事件捕獲

事件冒泡舉例

<div id="a" style="width: 100%; height: 300px;background-color: antiquewhite;">
  a
<div id="b" style="width: 100%; height: 200px;background-color: burlywood;">
		b
		<div id="c" style="width: 100%; height: 100px;background-color: cornflowerblue;">
			c
		</div>
	</div>
</div>
<script>
	var a=document.getElementById('a')
	var b=document.getElementById('b')
	var c=document.getElementById('c')
  //注冊冒泡事件監聽器
	a.addEventListener('click', ()=> {console.log("冒泡a")})
	b.addEventListener('click', ()=> {console.log('冒泡b')})
	c.addEventListener('click', ()=> {console.log("冒泡c")})
</script>

冒泡事件的執行順序為：c -> b -> a

事件捕獲舉例

<div id="a" style="width: 100%; height: 300px;background-color: antiquewhite;">
	a
	<div id="b" style="width: 100%; height: 200px;background-color: burlywood;">
		b
		<div id="c" style="width: 100%; height: 100px;background-color: cornflowerblue;">
			c
		</div>
	</div>
</div>
<script>
	var a=document.getElementById('a')
	var b=document.getElementById('b')
	var c=document.getElementById('c')
  //注冊捕獲事件監聽器
  a.addEventListener('click', ()=> {console.log("捕獲a")}, true)
  b.addEventListener('click', ()=> {console.log('捕獲b')}, true)
  c.addEventListener('click', ()=> {console.log("捕獲c")}, true)
</script>

捕獲事件的執行順序為：a -> b -> c

事件捕獲VS事件冒泡

我們將上述的代碼a,b,c三個元素都注冊捕獲和冒泡事件，并以元素c作為觸發事件的主體，即事件流中的目標階段。

<div id="a" style="width: 100%; height: 300px;background-color: antiquewhite;">
	a
	<div id="b" style="width: 100%; height: 200px;background-color: burlywood;">
		b
		<div id="c" style="width: 100%; height: 100px;background-color: cornflowerblue;">
			c
		</div>
	</div>
</div>
<script>
	var a=document.getElementById('a')
	var b=document.getElementById('b')
	var c=document.getElementById('c')
	a.addEventListener('click', ()=> {console.log("冒泡a")})
	b.addEventListener('click', ()=> {console.log('冒泡b')})
	c.addEventListener('click', ()=> {console.log("冒泡c")})
	a.addEventListener('click', ()=> {console.log("捕獲a")}, true)
	b.addEventListener('click', ()=> {console.log('捕獲b')}, true)
	c.addEventListener('click', ()=> {console.log("捕獲c")}, true)
</script>

執行順序為：捕獲a -> 捕獲b -> 冒泡c -> 捕獲c -> 冒泡b -> 冒泡a

從執行結果可以看到，a,b兩個元素的事件響應都是先捕獲后冒泡的，但對于觸發事件的目標元素c，事件的響應并沒有遵循先捕獲后冒泡的規則，這是為什么？因為目標元素是事件觸發主體處于事件流中的目標階段，處理事件的順序是根據注冊順序來執行的。

事件代理（事件委托）

我們知道了事件冒泡和事件捕獲的原理，那么對于事件委托就比較容易理解了。
重復一遍，事件代理就是利用事件冒泡或事件捕獲的機制把一系列的內層元素事件綁定到外層元素。至于為什么通常我們說事件代理是利用事件冒泡的機制來實現的，只是大家習以為常而已。

//div
<ul id="item-list">
	<li>item1</li>
	<li>item2</li>
	<li>item3</li>
	<li>item4</li>
</ul>

//js

var items=document.getElementById('item-list');
//事件捕獲實現事件代理
items.addEventListener('click', (e)=> {console.log('捕獲：click ',e.target.innerHTML)}, true);
//事件冒泡實現事件代理
items.addEventListener('click', (e)=> {console.log('冒泡：click ',e.target.innerHTML)}, false);

對于上述的列表元素，我們希望將用戶點擊了哪個item打印出來，通常我們可以給每個item注冊點擊事件監聽器，但是需要對每個元素進行事件監聽器的注冊；但是通過事件代理，我們可以將多個事件監聽器減少為一個，這樣就減少代碼的重復編寫了。
利用事件冒泡或事件捕獲實現事件代理

事件代理既可以通過事件冒泡來實現，也可以通過事件捕獲來實現。

總結

DOM事件流有3個階段：捕獲階段，目標階段，冒泡階段；三個階段的順序為：捕獲階段——目標階段——冒泡階段；
對于非目標階段的元素，事件響應執行順序遵循先捕獲后冒泡的原則；通過暫緩執行捕獲事件，可以達到先冒泡后捕獲的效果；
對于目標元素，事件響應執行順序根據的事件的執行順序執行；
事件捕獲是從頂層的Window逐層向內執行，事件冒泡則相反；
事件委托（事件代理）是根據事件冒泡或事件捕獲的機制來實現的。

試面試經常涉及各種算法，本文簡要介紹常用的一些算法，并用JavaScript實現。

1、插入排序

1）算法簡介

插入排序（Insertion-Sort）的算法描述是一種簡單直觀的排序算法。它的工作原理是通過構建有序序列，對于未排序數據，在已排序序列中從后向前掃描，找到相應位置并插入。插入排序在實現上，通常采用in-place排序（即只需用到O(1)的額外空間的排序），因而在從后向前掃描過程中，需要反復把已排序元素逐步向后挪位，為最新元素提供插入空間。

2）算法描述和實現

一般來說，插入排序都采用in-place在數組上實現。具體算法描述如下：

從第一個元素開始，該元素可以認為已經被排序；
取出下一個元素，在已經排序的元素序列中從后向前掃描；
如果該元素（已排序）大于新元素，將該元素移到下一位置；
重復步驟3，直到找到已排序的元素小于或者等于新元素的位置；
將新元素插入到該位置后；
重復步驟2~5。

JavaScript代碼實現：

function insertionSort(array) {
if (Object.prototype.toString.call(array).slice(8, -1)===‘Array’) {
for (var i=1; i < array.length; i++) {
var key=array[i];
var j=i – 1;
while (j >=0 && array[j] > key) {
array[j + 1]=array[j];
j–;
}
array[j + 1]=key;
}
return array;
} else {
return ‘array is not an Array!’;
}
}

3）算法分析

最佳情況：輸入數組按升序排列。T(n)=O(n)
最壞情況：輸入數組按降序排列。T(n)=O(n2)
平均情況：T(n)=O(n2)

二、二分插入排序

1）算法簡介

二分插入（Binary-insert-sort)排序是一種在直接插入排序算法上進行小改動的排序算法。其與直接插入排序算法最大的區別在于查找插入位置時使用的是二分查找的方式，在速度上有一定提升。

2）算法描述和實現

一般來說，插入排序都采用in-place在數組上實現。具體算法描述如下：

從第一個元素開始，該元素可以認為已經被排序；
取出下一個元素，在已經排序的元素序列中二分查找到第一個比它大的數的位置；
將新元素插入到該位置后；
重復上述兩步。

JavaScript代碼實現：

function binaryInsertionSort(array) {
if (Object.prototype.toString.call(array).slice(8, -1)===‘Array’) {
for (var i=1; i < array.length; i++) {
var key=array[i], left=0, right=i – 1;
while (left <=right) {
var middle=parseInt((left + right) / 2);
if (key < array[middle]) {
right=middle – 1;
} else {
left=middle + 1;
}
}
for (var j=i – 1; j >=left; j–) {
array[j + 1]=array[j];
}
array[left]=key;
}
return array;
} else {
return ‘array is not an Array!’;
}
}

3）算法分析

最佳情況：T(n)=O(nlogn)
最差情況：T(n)=O(n2)
平均情況：T(n)=O(n2)

三、選擇排序

1）算法簡介

選擇排序(Selection-sort)是一種簡單直觀的排序算法。它的工作原理：首先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置，然后，再從剩余未排序元素中繼續尋找最小（大）元素，然后放到已排序序列的末尾。以此類推，直到所有元素均排序完畢。

2）算法描述和實現

n個記錄的直接選擇排序可經過n-1趟直接選擇排序得到有序結果。具體算法描述如下：

初始狀態：無序區為R[1..n]，有序區為空；
第i趟排序(i=1,2,3…n-1)開始時，當前有序區和無序區分別為R[1..i-1]和R(i..n）。該趟排序從當前無序區中選出關鍵字最小的記錄 R[k]，將它與無序區的第1個記錄R交換，使R[1..i]和R[i+1..n)分別變為記錄個數增加1個的新有序區和記錄個數減少1個的新無序區；
n-1趟結束，數組有序化了。

JavaScript代碼實現：

function selectionSort(array) {
if (Object.prototype.toString.call(array).slice(8, -1)==='Array') {
var len=array.length, temp;
for (var i=0; i < len - 1; i++) {
var min=array[i];
for (var j=i + 1; j < len; j++) {
if (array[j] < min) {
temp=min;
min=array[j];
array[j]=temp;
}
}
array[i]=min;
}
return array;
} else {
return ‘array is not an Array!’;
}
}

3）算法分析

最佳情況：T(n)=O(n2)
最差情況：T(n)=O(n2)
平均情況：T(n)=O(n2)

四、冒泡排序

1）算法簡介

冒泡排序是一種簡單的排序算法。它重復地走訪過要排序的數列，一次比較兩個元素，如果它們的順序錯誤就把它們交換過來。走訪數列的工作是重復地進行直到沒有再需要交換，也就是說該數列已經排序完成。這個算法的名字由來是因為越小的元素會經由交換慢慢“浮”到數列的頂端。

2）算法描述和實現

具體算法描述如下：

比較相鄰的元素。如果第一個比第二個大，就交換它們兩個；
對每一對相鄰元素作同樣的工作，從開始第一對到結尾的最后一對，這樣在最后的元素應該會是最大的數；
針對所有的元素重復以上的步驟，除了最后一個；
重復步驟1~3，直到排序完成。

JavaScript代碼實現：

function bubbleSort(array) {
if (Object.prototype.toString.call(array).slice(8, -1)===‘Array’) {
var len=array.length, temp;
for (var i=0; i < len – 1; i++) {
for (var j=len – 1; j >=i; j–) {
if (array[j] < array[j - 1]) {
temp=array[j];
array[j]=array[j - 1];
array[j - 1]=temp;
}
}
}
return array;
} else {
return ‘array is not an Array!’;
}
}

3）算法分析

最佳情況：T(n)=O(n)
最差情況：T(n)=O(n2)
平均情況：T(n)=O(n2)

五、快速排序

1）算法簡介

快速排序的基本思想：通過一趟排序將待排記錄分隔成獨立的兩部分，其中一部分記錄的關鍵字均比另一部分的關鍵字小，則可分別對這兩部分記錄繼續進行排序，以達到整個序列有序。

2）算法描述和實現

快速排序使用分治法來把一個串（list）分為兩個子串（sub-lists）。具體算法描述如下：

從數列中挑出一個元素，稱為 ”基準”（pivot）；
重新排序數列，所有元素比基準值小的擺放在基準前面，所有元素比基準值大的擺在基準的后面（相同的數可以到任一邊）。在這個分區退出之后，該基準就處于數列的中間位置。這個稱為分區（partition）操作；
遞歸地（recursive）把小于基準值元素的子數列和大于基準值元素的子數列排序。

JavaScript代碼實現：

//方法一
function quickSort(array, left, right) {
if (Object.prototype.toString.call(array).slice(8, -1)===‘Array’ && typeof left===‘number’ && typeof right===‘number’) {
if (left < right) {
var x=array[right], i=left – 1, temp;
for (var j=left; j <=right; j++) {
if (array[j] <=x) {
i++;
temp=array[i];
array[i]=array[j];
array[j]=temp;
}
}
quickSort(array, left, i – 1);
quickSort(array, i + 1, right);
};
} else {
return ‘array is not an Array or left or right is not a number!’;
}
}
var aaa=[3, 5, 2, 9, 1];
quickSort(aaa, 0, aaa.length – 1);
console.log(aaa);
//方法二
var quickSort=function(arr) {
if (arr.length <=1) { return arr; }
var pivotIndex=Math.floor(arr.length / 2);
var pivot=arr.splice(pivotIndex, 1)[0];
var left=[];
var right=[];
for (var i=0; i < arr.length; i++){
if (arr[i] < pivot) {
left.push(arr[i]);
} else {
right.push(arr[i]);
}
}
return quickSort(left).concat([pivot], quickSort(right));
};

3）算法分析

最佳情況：T(n)=O(nlogn)
最差情況：T(n)=O(n2)
平均情況：T(n)=O(nlogn)

六、堆排序

1）算法簡介

堆排序（Heapsort）是指利用堆這種數據結構所設計的一種排序算法。堆積是一個近似完全二叉樹的結構，并同時滿足堆積的性質：即子結點的鍵值或索引總是小于（或者大于）它的父節點。

2）算法描述和實現

具體算法描述如下：

將初始待排序關鍵字序列(R1,R2….Rn)構建成大頂堆，此堆為初始的無序區；
將堆頂元素R[1]與最后一個元素R[n]交換，此時得到新的無序區(R1,R2,……Rn-1)和新的有序區(Rn),且滿足R[1,2...n-1]<=R[n]；
由于交換后新的堆頂R[1]可能違反堆的性質，因此需要對當前無序區(R1,R2,……Rn-1)調整為新堆，然后再次將R[1]與無序區最后一個元素交換，得到新的無序區(R1,R2….Rn-2)和新的有序區(Rn-1,Rn)。不斷重復此過程直到有序區的元素個數為n-1，則整個排序過程完成。

JavaScript代碼實現：

/*方法說明：堆排序
@param array 待排序數組*/
function heapSort(array) {
if (Object.prototype.toString.call(array).slice(8, -1)===‘Array’) {
//建堆
var heapSize=array.length, temp;
for (var i=Math.floor(heapSize / 2); i >=0; i–) {
heapify(array, i, heapSize);
}
//堆排序
for (var j=heapSize – 1; j >=1; j–) {
temp=array[0];
array[0]=array[j];
array[j]=temp;
heapify(array, 0, –heapSize);
}
} else {
return ‘array is not an Array!’;
}
}
/*方法說明：維護堆的性質
@param arr 數組
@param x 數組下標
@param len 堆大小*/
function heapify(arr, x, len) {
if (Object.prototype.toString.call(arr).slice(8, -1)===‘Array’ && typeof x===‘number’) {
var l=2 * x, r=2 * x + 1, largest=x, temp;
if (l < len && arr[l] > arr[largest]) {
largest=l;
}
if (r < len && arr[r] > arr[largest]) {
largest=r;
}
if (largest !=x) {
temp=arr[x];
arr[x]=arr[largest];
arr[largest]=temp;
heapify(arr, largest, len);
}
} else {
return ‘arr is not an Array or x is not a number!’;
}
}

3）算法分析

最佳情況：T(n)=O(nlogn)
最差情況：T(n)=O(nlogn)
平均情況：T(n)=O(nlogn)

七、歸并排序

1）算法簡介

歸并排序是建立在歸并操作上的一種有效的排序算法。該算法是采用分治法（Divide and Conquer）的一個非常典型的應用。歸并排序是一種穩定的排序方法。將已有序的子序列合并，得到完全有序的序列；即先使每個子序列有序，再使子序列段間有序。若將兩個有序表合并成一個有序表，稱為2-路歸并。

2）算法描述和實現

具體算法描述如下：

把長度為n的輸入序列分成兩個長度為n/2的子序列；
對這兩個子序列分別采用歸并排序；
將兩個排序好的子序列合并成一個最終的排序序列。

JavaScript代碼實現：

function mergeSort(array, p, r) {
if (p < r) {
var q=Math.floor((p + r) / 2);
mergeSort(array, p, q);
mergeSort(array, q + 1, r);
merge(array, p, q, r);
}
}
function merge(array, p, q, r) {
var n1=q – p + 1, n2=r – q, left=[], right=[], m=n=0;
for (var i=0; i < n1; i++) {
left[i]=array[p + i];
}
for (var j=0; j < n2; j++) {
right[j]=array[q + 1 + j];
}
left[n1]=right[n2]=Number.MAX_VALUE;
for (var k=p; k <=r; k++) {
if (left[m] <=right[n]) {
array[k]=left[m];
m++;
} else {
array[k]=right[n];
n++;
}
}
}

3）算法分析

最佳情況：T(n)=O(n)
最差情況：T(n)=O(nlogn)
平均情況：T(n)=O(nlogn)

八、桶排序

1）算法簡介

桶排序 (Bucket sort)的工作的原理：假設輸入數據服從均勻分布，將數據分到有限數量的桶里，每個桶再分別排序（有可能再使用別的排序算法或是以遞歸方式繼續使用桶排序進行排序）。

2）算法描述和實現

具體算法描述如下：

設置一個定量的數組當作空桶；
遍歷輸入數據，并且把數據一個一個放到對應的桶里去；
對每個不是空的桶進行排序；
從不是空的桶里把排好序的數據拼接起來。

JavaScript代碼實現：

/*方法說明：桶排序
@param array 數組
@param num 桶的數量*/
function bucketSort(array, num) {
if (array.length <=1) {
return array;
}
var len=array.length, buckets=[], result=[], min=max=array[0], regex=‘/^[1-9]+[0-9]*$/’, space, n=0;
num=num || ((num > 1 && regex.test(num)) ? num : 10);
for (var i=1; i < len; i++) {
min=min <=array[i] ? min : array[i];
max=max >=array[i] ? max : array[i];
}
space=(max – min + 1) / num;
for (var j=0; j < len; j++) {
var index=Math.floor((array[j] – min) / space);
if (buckets[index]) { // 非空桶，插入排序
var k=buckets[index].length – 1;
while (k >=0 && buckets[index][k] > array[j]) {
buckets[index][k + 1]=buckets[index][k];
k–;
}
buckets[index][k + 1]=array[j];
} else { //空桶，初始化
buckets[index]=[];
buckets[index].push(array[j]);
}
}
while (n < num) {
result=result.concat(buckets[n]);
n++;
}
return result;
}

3）算法分析

桶排序最好情況下使用線性時間O(n)，桶排序的時間復雜度，取決與對各個桶之間數據進行排序的時間復雜度，因為其它部分的時間復雜度都為O(n)。很顯然，桶劃分的越小，各個桶之間的數據越少，排序所用的時間也會越少。但相應的空間消耗就會增大。

九、計數排序

1）算法簡介

計數排序(Counting sort)是一種穩定的排序算法。計數排序使用一個額外的數組C，其中第i個元素是待排序數組A中值等于i的元素的個數。然后根據數組C來將A中的元素排到正確的位置。它只能對整數進行排序。

2）算法描述和實現

具體算法描述如下：

找出待排序的數組中最大和最小的元素；
統計數組中每個值為i的元素出現的次數，存入數組C的第i項；
對所有的計數累加（從C中的第一個元素開始，每一項和前一項相加）；
反向填充目標數組：將每個元素i放在新數組的第C(i)項，每放一個元素就將C(i)減去1。

JavaScript代碼實現：

function countingSort(array) {
var len=array.length, B=[], C=[], min=max=array[0];
for (var i=0; i < len; i++) {
min=min <=array[i] ? min : array[i];
max=max >=array[i] ? max : array[i];
C[array[i]]=C[array[i]] ? C[array[i]] + 1 : 1;
}
for (var j=min; j < max; j++) {
C[j + 1]=(C[j + 1] || 0) + (C[j] || 0);
}
for (var k=len – 1; k >=0; k–) {
B[C[array[k]] – 1]=array[k];
C[array[k]]–;
}
return B;
}

3）算法分析

當輸入的元素是n 個0到k之間的整數時，它的運行時間是 O(n + k)。計數排序不是比較排序，排序的速度快于任何比較排序算法。由于用來計數的數組C的長度取決于待排序數組中數據的范圍（等于待排序數組的最大值與最小值的差加上1），這使得計數排序對于數據范圍很大的數組，需要大量時間和內存。

頭條創作挑戰賽#

banner

本文同步本人掘金平臺的原創翻譯：https://juejin.cn/post/7091657693362356255

你肯定處理過很多的事件監聽，比如點擊事件或者表單提交。事件監聽對許多用例來說很有幫助，但是有時我們需要創建自己的自定義事件來處理復雜的交互。在這片短文中，我將告訴你有關創建自定義事件，偵聽自定義事件以及創建雙擊自定義事件所要了解的內容。

怎么創建自定義事件

創建自定義事件聽起來很困難，但是只需要下面簡單的一行代碼即可。

const myEvent=new Event("myCustomEvent")
復制代碼

你可以通過事件構造函數創建一個新的 Event 對象。在最基本的形式中，你只需要將一個字符串傳遞給構造函數，這個字符串就是你定義的事件名稱。為了監聽這個事件，你可以將該事件監聽器添加到你要監聽的元素上，如下：

document.addEventListener("myCustomEvent", e=> {
  console.log(e)
})
復制代碼

最后一步，你需要做的事，觸發創建并正在監聽的事件。

document.dispatchEvent(myEvent)
復制代碼

這就需呀 dispatchEvent 函數了。每個元素都有這個方法，你要做的就是將你創建的對象傳遞給它。

如果我們將上面講的組合在一起，我們就得到了一個基本的事件，這個事件在我們的 document 元素觸發，相關的事件內容會被打印出來。

圖中是這個事件對象的最基本形式。它包含大量信息，最重要的部分我這里突出顯示了。

isTrusted 屬性僅指該事件是由用戶交互觸發，還是由自定義 JavaScript 代碼觸發的。例如，當用戶單擊按鈕時，事件將 isTrusted 設置為 true，而我們自定義的事件會將其設置為 false，因為該事件是由 JavaScript 觸發的。

target 指調用 dispatchEvent 函數的元素。

type 指事件的名稱。

事件定制

你可能注意到了，上面的詳情中有屬性 bubbles, cancelable 和 composed 屬性。這些實際上，在我們創建自定義事件時可以配置的選項。

const myEvent=new Event("myCustomEvent", {
  bubbles: true,
  cancelable: true,
  composed: true
})
復制代碼

冒泡 bubbles

當事件觸發后，bubbles 屬性決定這個事件是否可以通過 HTML 進行冒泡。這個值默認為 false，這意味著不可以進行冒泡行為，如果你想事件調用父 HTML 元素，你可以將其設置為 true。

const bubbleEvent=new Event("bubbleEvent", { bubbles: true })
const defaultEvent=new Event("defaultEvent", { bubbles: false })

document.addEventListener("bubbleEvent", ()=> {
  // This will get called since the event will bubble up to the document from the button
  console.log("Bubble")
})

document.addEventListener("defaultEvent", ()=> {
  // This never gets called since the event cannot bubble up to the document from the button
  console.log("Default")
})

const button=document.querySelector("button")
button.dispatchEvent(bubbleEvent)
button.dispatchEvent(defaultEvent)
復制代碼

可取消 cancelable

cancelable 屬性決定事件是否可以通過調用 e.preventDefault() 取消。默認是 false 不可以。如果該屬性是 true 值，你可以調用 e.preventDefault() 方法。e.preventDefault() 會將事件 defaultPrevented 屬性設置為 true。

const cancelableEvent=new Event("cancelableEvent", { cancelable: true })
const defaultEvent=new Event("defaultEvent", { cancelable: false })

document.addEventListener("cancelableEvent", e=> {
  e.preventDefault()
  console.log(e.defaultPrevented) // True
})

document.addEventListener("defaultEvent", e=> {
  e.preventDefault()
  console.log(e.defaultPrevented) // False
})

document.dispatchEvent(cancelableEvent)
document.dispatchEvent(defaultEvent)
復制代碼

組合 composed

composed 屬性決定事件是否可以通過影子 DOM 向上傳播。默認值是 false。該屬性僅在你使用自定 HTML 元素和影子 DOM 的時候才適用，它所做的是允許事件在影子 DOM 外面傳播。如果你想在影子 DOM 中觸發的事件可以在影子 DOM 外被捕捉到，就將其設置為 true。

沒聽懂沒關系，后面學著學著就懂了

給事件傳遞自定義數據

當你使用自定事件時，你希望自定義的數據傳遞給你的事件。使用 new Event 構造函數是不可能的，這也就是為什么會有第二種創建事件的方法。

const myEvent=new CustomEvent("myEvent", { detail: { hello: "World" } })
復制代碼

CustomEvent 構造函數取代 Event 構造函數。這與 new Event 的工作方式相同，但你可以將 detail 屬性以及 bubbles，cancelable 和 composed屬性一起傳遞給第二個參數。detail 屬性中你設置的內容都會傳遞給事件監聽器。

const myEvent=new CustomEvent("myEvent", { detail: { hello: "World" } })

document.addEventListener("myEvent", e=> {
  console.log(e.detail) // { hello: "World" }
})

document.dispatchEvent(myEvent)
復制代碼

命名約定

在我們講自定義雙擊事件的例子前，我想先講講命名約定。你可以為自定義事件命名任何你想要的名字，但是還是遵循命名約定，以更方便使用自己的代碼。最普遍的命名約定事件，是為事件添加 custom: 前綴。

custom: 以區分自定義事件和本身的事件，而且，如果 JavaScript 添加與你的事件同名的新事件，它還可以確保你的代碼不會中斷。舉個例子，如果 JavaScript 添加了一個名為 doubleclick 事件，然后你已經在時候 doubleclick 自定義事件了，那么你會遇到問題，因為你自定義代碼將觸發該事件，并且瀏覽器也會嘗試觸發它自己的副本。

// Always use some form of naming convention
const myEvent=new Event("custom:doubleClick")
復制代碼

雙擊事件

在這個例子中，我們將創建一個雙擊的事件，只要你在短時間內單擊一個元素，就會觸發該事件。該事件還會將按鈕單擊之間的總時間作為自定義數據傳遞。

首先，我們需要創建一個正常的單擊事件監聽器來確保是否有雙擊。

const button=document.querySelector("button")

const MAX_DOUBLE_CLICK_TIME=500
let lastClick=0
button.addEventListener("click", e=> {
  const timeBetweenClicks=e.timeStamp - lastClick
  if (timeBetweenClicks > MAX_DOUBLE_CLICK_TIME) {
    lastClick=e.timeStamp
    return
  }

  // TODO: Double click happened. Trigger custom event.
  lastClick=0
})
復制代碼

上面的代碼使用 timeStamp 屬性來確保按鈕上單擊事件之間的時間。如果點擊之間的時間超過 500 毫秒。則會立刻返回并更新 lastClick 的值。一旦我們在 500 毫秒內點擊了兩次，我們將通過 if 檢查并觸發我們的雙擊事件。為此，我們需要創建我們的事件并調用它。

對于我們自定義的事件，我們將所有選項都設置為 true，因為默認情況下，單擊事件將所有這些屬性設置為 true，而且我們希望雙擊的行為類似于正常的單擊。我們也將 timeBetweenClicks 傳遞到 detail 選項中。最后，我們在事件的目標上調度事件，這里是按鈕元素。我們剩下要做的最后一件事就是監聽事件。

我們剛剛向按鈕田間了一個簡單的事件監聽器，它將打印出 Double Click 之間的時間。

總結

自定義事件是 JavaScript 中處理手勢和雙擊事件的好方案，最重要的是，他們非常容易實現和使用。

本文為譯文，采用意譯

【完】?

在線咨詢

上一篇：浮動元素：控制頁面元素的位置和布局的秘密
下一篇：HTML5移動端的消息提示層

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

事件捕獲、事件冒泡以及事件代理

言

事件冒泡和事件捕獲

事件冒泡舉例

事件捕獲舉例

事件捕獲VS事件冒泡

事件代理（事件委托）

總結

怎么創建自定義事件

事件定制

冒泡 bubbles

可取消 cancelable

組合 composed

給事件傳遞自定義數據

命名約定

雙擊事件

總結

您的項目需求