详细解析DOM事件的event事件对象(二)
上篇博客说到了DOM的键盘事件和鼠标事件的event对象,这次我们再来聊一聊event对象剩下的属性。
HTML代码:
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
CSS代码:
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
margin-top: 20px;
color: white;
font-size: 50px;
}
.box:nth-of-type(odd){
background: red;
}
.box:nth-of-type(even){
background: green;
}
JavaScript代码:
var aBox=document.getElementsByClassName("box");
// bubbles 返回布尔值,指示事件是否是冒泡事件类型。 2
// cancelable 返回布尔值,指示事件是否可拥可取消的默认动作。 2
aBox[0].onclick=function(ev){
var ev=ev||window.event;
console.log(ev)
}
// eventPhase 返回事件传播的当前阶段。 2
// target 返回触发此事件的元素(事件的目标节点)。 2
aBox[2].onclick=function(ev){
var ev=ev||window.event;
console.log(ev.target);
}
aBox[3].onclick=function(ev){
var ev=ev||window.event;
console.log(ev.target);
}
// currentTarget 返回其事件监听器触发该事件的元素。 2
// timeStamp 返回事件生成的日期和时间。 2
// type 返回当前 Event 对象表示的事件的名称。 2
aBox[1].onmouseover=function(ev){
var ev=ev||window.event;
console.log(ev)
}
视频讲解链接:
https://www.bilibili.com/video/BV1Vk4y1z7Jm/