整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
上圖是W3C標(biāo)準(zhǔn)的DOM事件流模型圖，從圖中可以看出，元素事件響應(yīng)在DOM樹中是從頂層的Window開始“流向”目標(biāo)元素，然后又從目標(biāo)元素“流向”頂層的Window
通常，我們將這種事件流向分為三個(gè)階段：捕獲階段，目標(biāo)階段，冒泡階段
1.捕獲階段是指事件響應(yīng)從最外層的Window開始，逐級(jí)向內(nèi)層前進(jìn)，直到具體事件目標(biāo)元素。在捕獲階段，不會(huì)處理響應(yīng)元素注冊(cè)的冒泡事件。
2.目標(biāo)階段指觸發(fā)事件的最底層的元素，如上圖中的。
3.冒泡階段與捕獲階段相反，事件的響應(yīng)是從最底層開始一層一層往外傳遞到最外層的Window。
現(xiàn)在，我們就可以知道，DOM事件流的三個(gè)階段是先捕獲階段，然后是目標(biāo)階段，最后才是冒泡階段。我們時(shí)常面試所說的先捕獲后冒泡也由此而來。事件代理就是利用事件冒泡或事件捕獲的機(jī)制把一系列的內(nèi)層元素事件綁定到外層元素
實(shí)際操作中，我們可以通過 element.addEventListener() 設(shè)置一個(gè)元素的事件模型為冒泡事件或者捕獲事件。
先來看一下 addEventListener 函數(shù)的語法：
element.addEventListener(type, listener, useCapture)
// type 監(jiān)聽事件類型的字符串
// listener 事件監(jiān)聽回調(diào)函數(shù)，即事件觸發(fā)后要處理的函數(shù)
// useCapture 默認(rèn)值false，表示事件冒泡；設(shè)為true時(shí)，表示事件捕獲<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')
//注冊(cè)冒泡事件監(jiān)聽器
a.addEventListener('click', ()=> {console.log("冒泡a")})
b.addEventListener('click', ()=> {console.log('冒泡b')})
c.addEventListener('click', ()=> {console.log("冒泡c")})
</script>冒泡事件的執(zhí)行順序?yàn)椋篶 -> 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')
//注冊(cè)捕獲事件監(jiān)聽器
a.addEventListener('click', ()=> {console.log("捕獲a")}, true)
b.addEventListener('click', ()=> {console.log('捕獲b')}, true)
c.addEventListener('click', ()=> {console.log("捕獲c")}, true)
</script>捕獲事件的執(zhí)行順序?yàn)椋篴 -> b -> c
我們將上述的代碼a,b,c三個(gè)元素都注冊(cè)捕獲和冒泡事件，并以元素c作為觸發(fā)事件的主體，即事件流中的目標(biāo)階段。
<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>執(zhí)行順序?yàn)椋?/span>捕獲a -> 捕獲b -> 冒泡c -> 捕獲c -> 冒泡b -> 冒泡a
從執(zhí)行結(jié)果可以看到，a,b兩個(gè)元素的事件響應(yīng)都是先捕獲后冒泡的，但對(duì)于觸發(fā)事件的目標(biāo)元素c，事件的響應(yīng)并沒有遵循先捕獲后冒泡的規(guī)則，這是為什么？因?yàn)?/span>目標(biāo)元素是事件觸發(fā)主體處于事件流中的目標(biāo)階段，處理事件的順序是根據(jù)注冊(cè)順序來執(zhí)行的。
我們知道了事件冒泡和事件捕獲的原理，那么對(duì)于事件委托就比較容易理解了。
重復(fù)一遍，事件代理就是利用事件冒泡或事件捕獲的機(jī)制把一系列的內(nèi)層元素事件綁定到外層元素。至于為什么通常我們說事件代理是利用事件冒泡的機(jī)制來實(shí)現(xiàn)的，只是大家習(xí)以為常而已。
//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');
//事件捕獲實(shí)現(xiàn)事件代理
items.addEventListener('click', (e)=> {console.log('捕獲：click ',e.target.innerHTML)}, true);
//事件冒泡實(shí)現(xiàn)事件代理
items.addEventListener('click', (e)=> {console.log('冒泡：click ',e.target.innerHTML)}, false); 對(duì)于上述的列表元素，我們希望將用戶點(diǎn)擊了哪個(gè)item打印出來，通常我們可以給每個(gè)item注冊(cè)點(diǎn)擊事件監(jiān)聽器，但是需要對(duì)每個(gè)元素進(jìn)行事件監(jiān)聽器的注冊(cè)；但是通過事件代理，我們可以將多個(gè)事件監(jiān)聽器減少為一個(gè)，這樣就減少代碼的重復(fù)編寫了。
利用事件冒泡或事件捕獲實(shí)現(xiàn)事件代理
事件代理既可以通過事件冒泡來實(shí)現(xiàn)，也可以通過事件捕獲來實(shí)現(xiàn)。
試面試經(jīng)常涉及各種算法，本文簡(jiǎn)要介紹常用的一些算法，并用JavaScript實(shí)現(xiàn)。
1、插入排序
1）算法簡(jiǎn)介
插入排序（Insertion-Sort）的算法描述是一種簡(jiǎn)單直觀的排序算法。它的工作原理是通過構(gòu)建有序序列，對(duì)于未排序數(shù)據(jù)，在已排序序列中從后向前掃描，找到相應(yīng)位置并插入。插入排序在實(shí)現(xiàn)上，通常采用in-place排序（即只需用到O(1)的額外空間的排序），因而在從后向前掃描過程中，需要反復(fù)把已排序元素逐步向后挪位，為最新元素提供插入空間。
2）算法描述和實(shí)現(xiàn)
一般來說，插入排序都采用in-place在數(shù)組上實(shí)現(xiàn)。具體算法描述如下：
從第一個(gè)元素開始，該元素可以認(rèn)為已經(jīng)被排序；
取出下一個(gè)元素，在已經(jīng)排序的元素序列中從后向前掃描；
如果該元素（已排序）大于新元素，將該元素移到下一位置；
重復(fù)步驟3，直到找到已排序的元素小于或者等于新元素的位置；
將新元素插入到該位置后；
重復(fù)步驟2~5。
JavaScript代碼實(shí)現(xiàn)：
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 ‘a(chǎn)rray is not an Array!’;
}
}
3）算法分析
最佳情況：輸入數(shù)組按升序排列。T(n)=O(n)
最壞情況：輸入數(shù)組按降序排列。T(n)=O(n2)
平均情況：T(n)=O(n2)
二、二分插入排序
1）算法簡(jiǎn)介
二分插入（Binary-insert-sort)排序是一種在直接插入排序算法上進(jìn)行小改動(dòng)的排序算法。其與直接插入排序算法最大的區(qū)別在于查找插入位置時(shí)使用的是二分查找的方式，在速度上有一定提升。
2）算法描述和實(shí)現(xiàn)
一般來說，插入排序都采用in-place在數(shù)組上實(shí)現(xiàn)。具體算法描述如下：
從第一個(gè)元素開始，該元素可以認(rèn)為已經(jīng)被排序；
取出下一個(gè)元素，在已經(jīng)排序的元素序列中二分查找到第一個(gè)比它大的數(shù)的位置；
將新元素插入到該位置后；
重復(fù)上述兩步。
JavaScript代碼實(shí)現(xiàn)：
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 ‘a(chǎn)rray is not an Array!’;
}
}
3）算法分析
最佳情況：T(n)=O(nlogn)
最差情況：T(n)=O(n2)
平均情況：T(n)=O(n2)
三、選擇排序
1）算法簡(jiǎn)介
選擇排序(Selection-sort)是一種簡(jiǎn)單直觀的排序算法。它的工作原理：首先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置，然后，再?gòu)氖Ｓ辔磁判蛟刂欣^續(xù)尋找最小（大）元素，然后放到已排序序列的末尾。以此類推，直到所有元素均排序完畢。
2）算法描述和實(shí)現(xiàn)
n個(gè)記錄的直接選擇排序可經(jīng)過n-1趟直接選擇排序得到有序結(jié)果。具體算法描述如下：
初始狀態(tài)：無序區(qū)為R[1..n]，有序區(qū)為空；
第i趟排序(i=1,2,3…n-1)開始時(shí)，當(dāng)前有序區(qū)和無序區(qū)分別為R[1..i-1]和R(i..n）。該趟排序從當(dāng)前無序區(qū)中選出關(guān)鍵字最小的記錄 R[k]，將它與無序區(qū)的第1個(gè)記錄R交換，使R[1..i]和R[i+1..n)分別變?yōu)橛涗泜€(gè)數(shù)增加1個(gè)的新有序區(qū)和記錄個(gè)數(shù)減少1個(gè)的新無序區(qū)；
n-1趟結(jié)束，數(shù)組有序化了。
JavaScript代碼實(shí)現(xiàn)：
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 ‘a(chǎn)rray is not an Array!’;
}
}
3）算法分析
最佳情況：T(n)=O(n2)
最差情況：T(n)=O(n2)
平均情況：T(n)=O(n2)
四、冒泡排序
1）算法簡(jiǎn)介
冒泡排序是一種簡(jiǎn)單的排序算法。它重復(fù)地走訪過要排序的數(shù)列，一次比較兩個(gè)元素，如果它們的順序錯(cuò)誤就把它們交換過來。走訪數(shù)列的工作是重復(fù)地進(jìn)行直到?jīng)]有再需要交換，也就是說該數(shù)列已經(jīng)排序完成。這個(gè)算法的名字由來是因?yàn)樵叫〉脑貢?huì)經(jīng)由交換慢慢“浮”到數(shù)列的頂端。
2）算法描述和實(shí)現(xiàn)
具體算法描述如下：
比較相鄰的元素。如果第一個(gè)比第二個(gè)大，就交換它們兩個(gè)；
對(duì)每一對(duì)相鄰元素作同樣的工作，從開始第一對(duì)到結(jié)尾的最后一對(duì)，這樣在最后的元素應(yīng)該會(huì)是最大的數(shù)；
針對(duì)所有的元素重復(fù)以上的步驟，除了最后一個(gè)；
重復(fù)步驟1~3，直到排序完成。
JavaScript代碼實(shí)現(xiàn)：
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 ‘a(chǎn)rray is not an Array!’;
}
}
3）算法分析
最佳情況：T(n)=O(n)
最差情況：T(n)=O(n2)
平均情況：T(n)=O(n2)
五、快速排序
1）算法簡(jiǎn)介
快速排序的基本思想：通過一趟排序?qū)⒋庞涗浄指舫瑟?dú)立的兩部分，其中一部分記錄的關(guān)鍵字均比另一部分的關(guān)鍵字小，則可分別對(duì)這兩部分記錄繼續(xù)進(jìn)行排序，以達(dá)到整個(gè)序列有序。
2）算法描述和實(shí)現(xiàn)
快速排序使用分治法來把一個(gè)串（list）分為兩個(gè)子串（sub-lists）。具體算法描述如下：
從數(shù)列中挑出一個(gè)元素，稱為 ”基準(zhǔn)”（pivot）；
重新排序數(shù)列，所有元素比基準(zhǔn)值小的擺放在基準(zhǔn)前面，所有元素比基準(zhǔn)值大的擺在基準(zhǔn)的后面（相同的數(shù)可以到任一邊）。在這個(gè)分區(qū)退出之后，該基準(zhǔn)就處于數(shù)列的中間位置。這個(gè)稱為分區(qū)（partition）操作；
遞歸地（recursive）把小于基準(zhǔn)值元素的子數(shù)列和大于基準(zhǔn)值元素的子數(shù)列排序。
JavaScript代碼實(shí)現(xiàn)：
//方法一
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 ‘a(chǎn)rray 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）算法簡(jiǎn)介
堆排序（Heapsort）是指利用堆這種數(shù)據(jù)結(jié)構(gòu)所設(shè)計(jì)的一種排序算法。堆積是一個(gè)近似完全二叉樹的結(jié)構(gòu)，并同時(shí)滿足堆積的性質(zhì)：即子結(jié)點(diǎn)的鍵值或索引總是小于（或者大于）它的父節(jié)點(diǎn)。
2）算法描述和實(shí)現(xiàn)
具體算法描述如下：
將初始待排序關(guān)鍵字序列(R1,R2….Rn)構(gòu)建成大頂堆，此堆為初始的無序區(qū)；
將堆頂元素R[1]與最后一個(gè)元素R[n]交換，此時(shí)得到新的無序區(qū)(R1,R2,……Rn-1)和新的有序區(qū)(Rn),且滿足R[1,2...n-1]<=R[n]；
由于交換后新的堆頂R[1]可能違反堆的性質(zhì)，因此需要對(duì)當(dāng)前無序區(qū)(R1,R2,……Rn-1)調(diào)整為新堆，然后再次將R[1]與無序區(qū)最后一個(gè)元素交換，得到新的無序區(qū)(R1,R2….Rn-2)和新的有序區(qū)(Rn-1,Rn)。不斷重復(fù)此過程直到有序區(qū)的元素個(gè)數(shù)為n-1，則整個(gè)排序過程完成。
JavaScript代碼實(shí)現(xiàn)：
/*方法說明：堆排序
@param array 待排序數(shù)組*/
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 ‘a(chǎn)rray is not an Array!’;
}
}
/*方法說明：維護(hù)堆的性質(zhì)
@param arr 數(shù)組
@param x 數(shù)組下標(biāo)
@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 ‘a(chǎn)rr is not an Array or x is not a number!’;
}
}
3）算法分析
最佳情況：T(n)=O(nlogn)
最差情況：T(n)=O(nlogn)
平均情況：T(n)=O(nlogn)
七、歸并排序
1）算法簡(jiǎn)介
歸并排序是建立在歸并操作上的一種有效的排序算法。該算法是采用分治法（Divide and Conquer）的一個(gè)非常典型的應(yīng)用。歸并排序是一種穩(wěn)定的排序方法。將已有序的子序列合并，得到完全有序的序列；即先使每個(gè)子序列有序，再使子序列段間有序。若將兩個(gè)有序表合并成一個(gè)有序表，稱為2-路歸并。
2）算法描述和實(shí)現(xiàn)
具體算法描述如下：
把長(zhǎng)度為n的輸入序列分成兩個(gè)長(zhǎng)度為n/2的子序列；
對(duì)這兩個(gè)子序列分別采用歸并排序；
將兩個(gè)排序好的子序列合并成一個(gè)最終的排序序列。
JavaScript代碼實(shí)現(xiàn)：
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）算法簡(jiǎn)介
桶排序 (Bucket sort)的工作的原理：假設(shè)輸入數(shù)據(jù)服從均勻分布，將數(shù)據(jù)分到有限數(shù)量的桶里，每個(gè)桶再分別排序（有可能再使用別的排序算法或是以遞歸方式繼續(xù)使用桶排序進(jìn)行排序）。
2）算法描述和實(shí)現(xiàn)
具體算法描述如下：
設(shè)置一個(gè)定量的數(shù)組當(dāng)作空桶；
遍歷輸入數(shù)據(jù)，并且把數(shù)據(jù)一個(gè)一個(gè)放到對(duì)應(yīng)的桶里去；
對(duì)每個(gè)不是空的桶進(jìn)行排序；
從不是空的桶里把排好序的數(shù)據(jù)拼接起來。
JavaScript代碼實(shí)現(xiàn)：
/*方法說明：桶排序
@param array 數(shù)組
@param num 桶的數(shù)量*/
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）算法分析
桶排序最好情況下使用線性時(shí)間O(n)，桶排序的時(shí)間復(fù)雜度，取決與對(duì)各個(gè)桶之間數(shù)據(jù)進(jìn)行排序的時(shí)間復(fù)雜度，因?yàn)槠渌糠值臅r(shí)間復(fù)雜度都為O(n)。很顯然，桶劃分的越小，各個(gè)桶之間的數(shù)據(jù)越少，排序所用的時(shí)間也會(huì)越少。但相應(yīng)的空間消耗就會(huì)增大。
九、計(jì)數(shù)排序
1）算法簡(jiǎn)介
計(jì)數(shù)排序(Counting sort)是一種穩(wěn)定的排序算法。計(jì)數(shù)排序使用一個(gè)額外的數(shù)組C，其中第i個(gè)元素是待排序數(shù)組A中值等于i的元素的個(gè)數(shù)。然后根據(jù)數(shù)組C來將A中的元素排到正確的位置。它只能對(duì)整數(shù)進(jìn)行排序。
2）算法描述和實(shí)現(xiàn)
具體算法描述如下：
找出待排序的數(shù)組中最大和最小的元素；
統(tǒng)計(jì)數(shù)組中每個(gè)值為i的元素出現(xiàn)的次數(shù)，存入數(shù)組C的第i項(xiàng)；
對(duì)所有的計(jì)數(shù)累加（從C中的第一個(gè)元素開始，每一項(xiàng)和前一項(xiàng)相加）；
反向填充目標(biāo)數(shù)組：將每個(gè)元素i放在新數(shù)組的第C(i)項(xiàng)，每放一個(gè)元素就將C(i)減去1。
JavaScript代碼實(shí)現(xiàn)：
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）算法分析
當(dāng)輸入的元素是n 個(gè)0到k之間的整數(shù)時(shí)，它的運(yùn)行時(shí)間是 O(n + k)。計(jì)數(shù)排序不是比較排序，排序的速度快于任何比較排序算法。由于用來計(jì)數(shù)的數(shù)組C的長(zhǎng)度取決于待排序數(shù)組中數(shù)據(jù)的范圍（等于待排序數(shù)組的最大值與最小值的差加上1），這使得計(jì)數(shù)排序?qū)τ跀?shù)據(jù)范圍很大的數(shù)組，需要大量時(shí)間和內(nèi)存。
頭條創(chuàng)作挑戰(zhàn)賽#
banner
本文同步本人掘金平臺(tái)的原創(chuàng)翻譯：https://juejin.cn/post/7091657693362356255
你肯定處理過很多的事件監(jiān)聽，比如點(diǎn)擊事件或者表單提交。事件監(jiān)聽對(duì)許多用例來說很有幫助，但是有時(shí)我們需要?jiǎng)?chuàng)建自己的自定義事件來處理復(fù)雜的交互。在這片短文中，我將告訴你有關(guān)創(chuàng)建自定義事件，偵聽自定義事件以及創(chuàng)建雙擊自定義事件所要了解的內(nèi)容。
創(chuàng)建自定義事件聽起來很困難，但是只需要下面簡(jiǎn)單的一行代碼即可。
const myEvent=new Event("myCustomEvent")
復(fù)制代碼你可以通過事件構(gòu)造函數(shù)創(chuàng)建一個(gè)新的 Event 對(duì)象。在最基本的形式中，你只需要將一個(gè)字符串傳遞給構(gòu)造函數(shù)，這個(gè)字符串就是你定義的事件名稱。為了監(jiān)聽這個(gè)事件，你可以將該事件監(jiān)聽器添加到你要監(jiān)聽的元素上，如下：
document.addEventListener("myCustomEvent", e=> {
console.log(e)
})
復(fù)制代碼最后一步，你需要做的事，觸發(fā)創(chuàng)建并正在監(jiān)聽的事件。
document.dispatchEvent(myEvent)
復(fù)制代碼這就需呀 dispatchEvent 函數(shù)了。每個(gè)元素都有這個(gè)方法，你要做的就是將你創(chuàng)建的對(duì)象傳遞給它。
如果我們將上面講的組合在一起，我們就得到了一個(gè)基本的事件，這個(gè)事件在我們的 document 元素觸發(fā)，相關(guān)的事件內(nèi)容會(huì)被打印出來。
圖中是這個(gè)事件對(duì)象的最基本形式。它包含大量信息，最重要的部分我這里突出顯示了。
isTrusted 屬性僅指該事件是由用戶交互觸發(fā)，還是由自定義 JavaScript 代碼觸發(fā)的。例如，當(dāng)用戶單擊按鈕時(shí)，事件將 isTrusted 設(shè)置為 true，而我們自定義的事件會(huì)將其設(shè)置為 false，因?yàn)樵撌录怯?JavaScript 觸發(fā)的。
target 指調(diào)用 dispatchEvent 函數(shù)的元素。
type 指事件的名稱。
你可能注意到了，上面的詳情中有屬性 bubbles, cancelable 和 composed 屬性。這些實(shí)際上，在我們創(chuàng)建自定義事件時(shí)可以配置的選項(xiàng)。
const myEvent=new Event("myCustomEvent", {
bubbles: true,
cancelable: true,
composed: true
})
復(fù)制代碼當(dāng)事件觸發(fā)后，bubbles 屬性決定這個(gè)事件是否可以通過 HTML 進(jìn)行冒泡。這個(gè)值默認(rèn)為 false，這意味著不可以進(jìn)行冒泡行為，如果你想事件調(diào)用父 HTML 元素，你可以將其設(shè)置為 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)
復(fù)制代碼cancelable 屬性決定事件是否可以通過調(diào)用 e.preventDefault() 取消。默認(rèn)是 false 不可以。如果該屬性是 true 值，你可以調(diào)用 e.preventDefault() 方法。e.preventDefault() 會(huì)將事件 defaultPrevented 屬性設(shè)置為 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)
復(fù)制代碼composed 屬性決定事件是否可以通過影子 DOM 向上傳播。默認(rèn)值是 false。 該屬性僅在你使用自定 HTML 元素和影子 DOM 的時(shí)候才適用，它所做的是允許事件在影子 DOM 外面?zhèn)鞑ァＨ绻阆朐谟白?DOM 中觸發(fā)的事件可以在影子 DOM 外被捕捉到，就將其設(shè)置為 true。
沒聽懂沒關(guān)系，后面學(xué)著學(xué)著就懂了
當(dāng)你使用自定事件時(shí)，你希望自定義的數(shù)據(jù)傳遞給你的事件。使用 new Event 構(gòu)造函數(shù)是不可能的，這也就是為什么會(huì)有第二種創(chuàng)建事件的方法。
const myEvent=new CustomEvent("myEvent", { detail: { hello: "World" } })
復(fù)制代碼CustomEvent 構(gòu)造函數(shù)取代 Event 構(gòu)造函數(shù)。這與 new Event 的工作方式相同，但你可以將 detail 屬性以及 bubbles，cancelable 和 composed屬性一起傳遞給第二個(gè)參數(shù)。detail 屬性中你設(shè)置的內(nèi)容都會(huì)傳遞給事件監(jiān)聽器。
const myEvent=new CustomEvent("myEvent", { detail: { hello: "World" } })
document.addEventListener("myEvent", e=> {
console.log(e.detail) // { hello: "World" }
})
document.dispatchEvent(myEvent)
復(fù)制代碼在我們講自定義雙擊事件的例子前，我想先講講命名約定。你可以為自定義事件命名任何你想要的名字，但是還是遵循命名約定，以更方便使用自己的代碼。最普遍的命名約定事件，是為事件添加 custom: 前綴。
custom: 以區(qū)分自定義事件和本身的事件，而且，如果 JavaScript 添加與你的事件同名的新事件，它還可以確保你的代碼不會(huì)中斷。舉個(gè)例子，如果 JavaScript 添加了一個(gè)名為 doubleclick 事件，然后你已經(jīng)在時(shí)候 doubleclick 自定義事件了，那么你會(huì)遇到問題，因?yàn)槟阕远x代碼將觸發(fā)該事件，并且瀏覽器也會(huì)嘗試觸發(fā)它自己的副本。
// Always use some form of naming convention
const myEvent=new Event("custom:doubleClick")
復(fù)制代碼在這個(gè)例子中，我們將創(chuàng)建一個(gè)雙擊的事件，只要你在短時(shí)間內(nèi)單擊一個(gè)元素，就會(huì)觸發(fā)該事件。該事件還會(huì)將按鈕單擊之間的總時(shí)間作為自定義數(shù)據(jù)傳遞。
首先，我們需要?jiǎng)?chuàng)建一個(gè)正常的單擊事件監(jiān)聽器來確保是否有雙擊。
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
})
復(fù)制代碼上面的代碼使用 timeStamp 屬性來確保按鈕上單擊事件之間的時(shí)間。如果點(diǎn)擊之間的時(shí)間超過 500 毫秒。則會(huì)立刻返回并更新 lastClick 的值。一旦我們?cè)?500 毫秒內(nèi)點(diǎn)擊了兩次，我們將通過 if 檢查并觸發(fā)我們的雙擊事件。為此，我們需要?jiǎng)?chuàng)建我們的事件并調(diào)用它。
對(duì)于我們自定義的事件，我們將所有選項(xiàng)都設(shè)置為 true，因?yàn)槟J(rèn)情況下，單擊事件將所有這些屬性設(shè)置為 true，而且我們希望雙擊的行為類似于正常的單擊。我們也將 timeBetweenClicks 傳遞到 detail 選項(xiàng)中。最后，我們?cè)谑录哪繕?biāo)上調(diào)度事件，這里是按鈕元素。我們剩下要做的最后一件事就是監(jiān)聽事件。
我們剛剛向按鈕田間了一個(gè)簡(jiǎn)單的事件監(jiān)聽器，它將打印出 Double Click 之間的時(shí)間。
自定義事件是 JavaScript 中處理手勢(shì)和雙擊事件的好方案，最重要的是，他們非常容易實(shí)現(xiàn)和使用。
本文為譯文，采用意譯
【完】?
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
