js事件对象
js事件对象
在DOM元素触发事件时，事件处理函数中会产生的一个事件对象event。
事件对象获取方法
所有浏览器都支持event对象，只是支持的方式不一样
FireFox、Chrome等浏览器要获取到event对象，需要从函数中传入，参数名随意
而IE在浏览器中event作为window对象的一个属性存在，可以直接使用 event 或 window.event 获取到
//事件对象获取方法
document.onkeydown = function(ev){ //onkeydown 事件会在用户按下个键盘按键时发生
var e = ev || event ; //兼容各个浏览器
console.log(e);
}
事件对象中与鼠标/键盘相关属性
clientX/clientY属性：返回当事件被触发时，鼠标指针的坐标(到浏览器窗口的坐标)
offsetX/offsetY属性：返回当事件被触发时，鼠标指针的坐标(在事件源元素中的坐标)
pageX/pageY属性：返回当事件被触发时，鼠标指针的坐标(整个页面中的坐标)
button属性：返回触发事件的鼠标按键
which属性：返回触发事件的按键码(针对键盘和鼠标事件) IE678不支持
keyCode属性：返回键盘按键的按键码
组合键：ctrlKey、altKey、shiftKey、metaKey(OS)
document.onclick = function(ev){
var e = ev || event;
console.log(e.clientX , e.clientY); //事件被触发时，鼠标指针的坐标(到浏览器窗口的坐标)
console.log(e.offsetX , e.offsetY); //返回当事件被触发时，鼠标指针的坐标(在事件源元素中的坐标)
console.log(e.pageX , e.pageY); //事件被触发时，鼠标指针的坐标(整个页面中的坐标,包含滚动高度)
console.log(e.button); //返回触发事件的鼠标按键
}
document.onkeydown = function(ev){
var e = ev || event;
console.log(e.which); //返回触发事件的按键码(针对键盘和鼠标事件) IE678不支持
console.log(e.keyCode); //返回键盘按键的按键码
console.log(e.ctrlKey); //判断是否按下ctrl键，返回布尔值
console.log(e.altKey); //判断是否按下alt键，返回布尔值
console.log(e.shiftKey); //判断是否按下shift键，返回布尔值
console.log(e.metaKey); //判断是否按下meta(windows键盘是Windows)键，返回布尔值
}
事件源：target（触发事件的对象）
在谷歌、火狐中获得触发事件的元素(事件源)
使用：event.target
在IE中获得触发事件的元素
使用：event.srcElement
var Target = event.target || event.srcElement;//兼容写法
//event事件对象包含了跟事件相关的所有信息
btn.onclick = function(ev){ //低版本ie只识别window对象下的event属性
var e = ev || event ; //获取事件对象兼容写法
console.log(e);
var target = e.target || e.srcElement; //获取事件源兼容写法
console.log(target);
}
举例：
当两个有嵌套关系的div分别绑定点击事件，点击子元素box2，target指向box2。点击box1时，target指向box1。
<body>
<div class="box1">
<div class="box2">div>
div>
<script>
var box1 = document.querySelector('.box1');
var box2 = document.querySelector('.box2');
box2.onclick = function(ev){
var e = ev || event; //获取事件对象
console.log(e.target); //指向box2
}
box1.onclick = function(ev){
var e = ev || event; //获取事件对象
console.log(e.target); //指向box1
}
script>
body>
事件流
事件流：事件的流向，事件的执行顺序。
当子元素和父元素都定义了相同的事件，比如都定义了onclick事件，
点击子元素时，父元素的onclick事件也会被触发。
JS里称这种事件连续发生的机制为事件冒泡或者事件捕获。
事件冒泡：事件从里向外发生，事件从最精确对象(target)开始触发，然后到最不精确的对象(document)触发。
事件捕获：事件从外向里发生，事件从最不精确的对象(document)开始触发，然后到最精确对象(target)触发。
【W3C模型】
W3C将两者进行中和，在任何W3C的事件模型中，事件先进入捕获阶段，再进入冒泡阶段。
举例：
当在前有嵌套的结构中，点击box2，会按事件冒泡的方式，依次触发box2、box1的点击事件。
<body>
<div class="box1">
<div class="box2">div>
div>
<script>
var box1 = document.querySelector('.box1');
var box2 = document.querySelector('.box2');
box2.onclick = function(){
alert('我是box2')
}
box1.onclick = function(){
alert('我是box1')
}
script>
body>
阻止默认行为
event.preventDefault() //火狐
event.returnValue = false //IE
event.preventDefault ? event.preventDefault() : (event.returnValue = false); //兼容写法
阻止事件传播
event.stopPropagation() //火狐
event.cancelBubble = true //IE
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true); //兼容写法。
阻止事件传播：当前点击波box2,不会发生冒泡。也就不会触发box1的点击事件
<body>
<div class="box1">
<div class="box2">div>
div>
<script>
var box1 = document.querySelector('.box1');
var box2 = document.querySelector('.box2');
box2.onclick = function(ev){
var e = ev || event; //获取事件对象
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true); //阻止事件传播（兼容）
alert('我是box2')
}
box1.onclick = function(){
alert('我是box1')
}
script>
body>
总结
event对象，代表事件的状态。
event事件对象只在事件发生的过程中才有效。
event对象中包含了所有与事件相关的信息(私有的、共有的属性和方法)。