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

言

上图是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

给事件传递自定义数据

命名约定

双击事件

总结

您的项目需求