Event 事件 - 扩展

Posted 2020-10-05

事件中的 this

在事件的处理函数中，可以通过 this 关键字来指代绑定该事件的标签。

<p id="para"> 我是一个p标签 </p>

在点击完 <p> 标签后获取到它里面的内容，常规做法：

para.addEventListener("click", function(){
console.log( para.textContent ); // 我是一个p标签
}, false)

事件对象

事件源.addEventListener(eventName, function(event){
// event 就是事件对象
}, boolean)

事件对象说明：
当事件发生时，只能在事件函数内部访问的对象；
处理函数结束后会自动销毁；

兼容的事件对象

（1）IE 9 及之后的版本和其他浏览?：通过事件的处理函数的形参直接得到 Event 对象。

btn.onclick = function(event){
console.log( event )
}

（2）IE 8 及之前的版本浏览?：Event 事件对象被提供在 window 对象中。

btn.onclick = function(event){
console.log( window.event )
}

Event 对象的属性

target

Event 事件对象提供了 target 属性用于获取触发事件的目标元素（标签）。
例：

<ul id="ul">
<li> <a href="#"> 我是a标签 </a> </li>
</ul>

ul.addEventListener(‘click‘, function(event){
console.log( event.target );
}, false);

1、鼠标事件

相对于浏览?位置：
event.clientX ：返回当事件被触发时鼠标指针向对于浏览?页面（或客户区）的水平坐标。
event.clientY ：返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标。
相对于屏幕位置：
event.screenX ：返回事件发生时鼠标指针相对于屏幕的水平坐标。
event.screenY ：返回事件发生时鼠标指针相对于屏幕的垂直坐标。
相对于事件源位置：
event.offsetX ：返回事件发生时鼠标指针相对于事件源的水平坐标
event.offsetY ：返回事件发生时鼠标指针相对于事件源的垂直坐标
event.layerX ：返回事件发生时鼠标指针相对于事件源的水平坐标（Firefox）
event.layerY ：返回事件发生时鼠标指针相对于事件源的垂直坐标（Firefox）

例：

document.body.addEventListener("mousemove", function(event){
console.log(event.clientX, event.clientY)
console.log(event.offsetX, event.offsetY)
// ... ...
}, false)

2、键盘事件

keyCode ：获取按下的键盘按键的值的字符代码。
altKey ：指示在指定的事件发?生时，Alt 键是否被按下。
ul.addEventListener(‘click‘, function(event){
console.log( event.srcElement )
}, false);
1
2
3
var target = event.target || event.srcElement; 1
?鼠标事件
document.body.addEventListener("mousemove", function(event){
console.log(event.clientX, event.clientY)
console.log(event.offsetX, event.offsetY)
// ... ...
}, false)

键盘事件
ctrlKey ：指示当事件发生时，Ctrl 键是否被按下。
shiftKey ：指示当事件发生时，"SHIFT" 键是否被按下。

例：

<input type="text" id="box">

box.addEventListener("keydown", function(event){
console.log( event.keyCode ); // 输出当前按键对应的 keyCode 数值
console.log( event.shiftKey ); // 按下“SHIFT”键输出 true，否则输出 false
// ... ...
}, false)

事件流

事件流的分类

冒泡型事件流（ Event Bubbling ）
捕获型事件流（ Event Capturing ）
DOM 事件流模型

<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>

捕获型事件流

box1.addEventListener("click", function(){
console.log( "box1" );
}, true)
box2.addEventListener("click", function(){
console.log( "box2" );
}, true)
box3.addEventListener("click", function(){
console.log( "box3" );
}, true)

冒泡型事件流

box1.addEventListener("click", function(){
console.log( "box1" );
}, false)
box2.addEventListener("click", function(){
console.log( "box2" );
}, false)
box3.addEventListener("click", function(){
console.log( "box3" );
}, false)

DOM 事件流模型

事件周期

捕获阶段：事件根据 DOM 树结构从最上层节点依次向目标节点传播的阶段。
触发阶段：真正的目标节点正在处理事件的阶段。
冒泡阶段：事件根据 DOM 树结构从目标节点依次向上传播的阶段。

阻止事件流

if ( event.stopPropagation ){
event.stopPropagation();
} else {
event.cancelBubble = true;
}

事件委托

<ul id="list">
<li><a href="#"> 链接1 </a></li>
<li><a href="#"> 链接2 </a></li>
<li><a href="#"> 链接3 </a></li>
</ul>

let allA = document.getElementsByTagName("a");
for(let i = 0; i < allA.length; i++){
allA[i].addEventListener("click", function(){
console.log( this );
}, false)
}