标签：console log 对象 js 事件 box1 event box2
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对象中包含了所有与事件相关的信息(私有的、共有的属性和方法)。
weiweiweiiii
发布了1 篇原创文章 · 获赞 0 · 访问量 19
私信
关注
标签：console,log,对象,js,事件,box1,event,box2 来源： https://blog.csdn.net/weiweiweiiii/article/details/104445758
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。