js核心基础之Events事件机制（移动端事件、PC端事件、事件穿透）

PC端
在pc端，网页的操作都是用鼠标的，即响应的都是鼠标事件，包括mousedown、mouseup、click，
通常，click事件会在mouseup之后触发，会在300ms之后，因为，会凭借这个时间去判断是否触发双击事件（不准确）
1、mousedown,当用户在这个元素上按下鼠标键的时候；
2、mouseup，当用户在这个元素上松开鼠标键的时候，大概在mousedown之后的88ms的时候被触发（浏览器不一样时间也不一样）；
3、click，当一个mousedown和一个mouseup都在这个元素上被检测到的时候发生，并且跟mousueup同一时间触发；

注：在一个元素节点上，只要触发了mousedown和mouseup就一定会触发click事件，prenventdefault并不能阻止。

移动端
在移动端几乎使用的都是touch事件
touchstart: //手指放到屏幕上时触发，即使已经有一个手指放在了屏幕上也会触发
touchmove: //手指在屏幕上滑动式触发
touchend: //手指离开屏幕时触发在touchstart70ms之后触发
touchcancel: //系统取消touch事件的时候触发，这个好像比较少用

在移动端，在touchend之后，或触发mousedown，mouseup、click等事件，在touchstart70ms之后触发
使用event.preventdefault之后，就不会再触发mousedown之类的事件。

事件穿透
当在使用mousedown之后，将当前节点隐藏，而当前又绑定了click事件，这时候，该节点有不存了，所以会触发该节点之下的节点

<div id="div">
    div
</div>

<div id="div1">
    div1
</div>

#div {
    width: 300px;
    height: 200px;
    background: darkcyan;
}

#div1 {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 100px;
    left: 20px;
    background: red;
}

var div = document.getElementById('div');
div.addEventListener('click', function (event) {
    console.log('div-------click----------------------------', event);
})
div.addEventListener('mousedown', function (event) {
    console.log('div------mousdown----------------------', event);
})
div.addEventListener('mouseup', function (event) {
    console.log('div--------mouseup---------------------------', event);
})

var div1 = document.getElementById('div1');
div1.addEventListener('mousedown', function (event) {
    console.log('div1******mousedown******', event);
    div1.style = 'display:none;';
})
div1.addEventListener('mouseup', function (event) {
    console.log('div1******mouseup******', event);
})
div1.addEventListener('click', function (event) {
    console.log('div1******click******', event);
})

结果：

div1******mousedown******
div--------mouseup---------------------------

原理：
即在mousedown之后，将div1隐藏，因为div1已经不见了，所以div1的mouseup、click事件并没有触发；
所以，mouseup事件被div接收到了，所以触发了mouseup事件，那么div1的click事件倍谁接收了呢？按道理来讲，也是被div接收了，
但是，因为，在div上并没有触发mousedown事件，只触发了mouseup事件，所以，并没有触发clcik事件。

当使用touchstart的时候将div1隐藏，
js

var div = document.getElementById('div');
div.addEventListener('click', function (event) {
    console.log('div-------click----------------------------', event.timeStamp);
})
div.addEventListener('mousedown', function (event) {
    console.log('div------mousdown----------------------', event.timeStamp);
})
div.addEventListener('mouseup', function (event) {
    console.log('div--------mouseup---------------------------', event.timeStamp);
})

var div1 = document.getElementById('div1');
div1.addEventListener('mousedown', function (event) {
    console.log('div1******mousedown******', event.timeStamp);
})
div1.addEventListener('mouseup', function (event) {
    console.log('div1******mouseup******', event.timeStamp);
})
div1.addEventListener('click', function (event) {
    console.log('div1******click******', event.timeStamp);
})

// touch

div1.addEventListener('touchstart', function (event) {
    console.log('div1******touchstart******', event.timeStamp);
})
div1.addEventListener('touchend', function (event) {
    console.log('div1******touchend******', event.timeStamp);
    div1.style = 'display:none;';
    // event.preventDefault();
})

结果：

div1******touchstart****** 1363.88
div1******touchend****** 1435.7350000000001
div------mousdown---------------------- 1435.7350000000001
div--------mouseup--------------------------- 1435.7350000000001
div-------click---------------------------- 1435.7350000000001

原理：div1本身的事件触发事件为 touchstart->touchend= mousdown=mouseup=click；
所以无论是在touchstart还是touchend时隐藏都会触发mousedown，mouseup、click，所以，当div1隐藏了，就会触发div的一系列函数，
（注意，在这里div触发该系列函数时，跟点击div触发时不一样，在这里，函数触发的时间都是同一个时间段）。

js核心基础之Events事件机制（移动端事件、PC端事件、事件穿透）

猜你喜欢