标签：返回 绑定 client 标签 elements bubble body 获取 位置
事件中的 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)
}
标签：返回 绑定 client 标签 elements bubble body 获取 位置
原文地址：http://www.cnblogs.com/zhangmeijuan/p/7469864.html
