首页 > 代码库 > 深入学习jQuery事件对象
深入学习jQuery事件对象
目录
[1]获取 [2]事件类型 [3]事件目标[4]当前元素[5]事件冒泡[6]默认行为[7]命名空间[8]返回值前面的话
在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象，但支持方式不同。jQuery在遵循W3C规范的情况下，对事件对象的常用属性进行了封装，使得事件处理在各个浏览器下都可以正常运行而不需要进行浏览器类型判断，本文将详细介绍jQuery事件对象
获取
对于DOM事件对象来说，标准浏览器和IE8-浏览器的事件对象获取方式不一致。标准浏览器的事件对象是事件处理程序中的第一个参数，而IE8-浏览器的事件对象是直接使用event变量
jQuery采用了标准写法，并兼容低版本IE浏览器
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><div id="box" style="height:30px;width:200px;background:pink;"></div><script>$(‘#box‘).click(function(event){ $(this).html(event.type);})</script>
<iframe style="width: 100%; height: 50px;" src="http://sandbox.runjs.cn/show/7zp5y0ro" frameborder="0" width="320" height="240"></iframe>
事件类型
事件有很多类型，事件对象中的type属性表示被触发的事件的类型
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><div id="box" style="height:30px;width:200px;background:pink;"></div><script>$(‘#box‘).on(‘click mouseover mouseout‘,function(event){ $(this).html(event.type);})</script>
<iframe style="width: 100%; height: 50px;" src="http://sandbox.runjs.cn/show/w3fxwf6l" frameborder="0" width="320" height="240"></iframe>
事件目标
事件目标target属性返回事件当前所在的节点，即正在执行的监听函数所绑定的那个节点
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul id="box"> <li class="in">1</li> <li class="in">2</li></ul> <script>$(‘#box‘).on(‘mousemove‘,function(event){ $(event.target).css(‘background-color‘,‘lightblue‘);})$(‘#box‘).on(‘mouseout‘,function(event){ $(event.target).css(‘background-color‘,‘transparent‘);})</script>
<iframe style="width: 100%; height: 60px;" src="http://sandbox.runjs.cn/show/zx1he9wj" frameborder="0" width="320" height="240"></iframe>
当前元素
currentTarget属性始终指向事件绑定的当前DOM元素，与this值始终相等
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul id="box"> <li class="in">1</li> <li class="in">2</li></ul> <script>$(‘#box‘).on(‘mousemove‘,function(event){ $(event.currentTarget).css(‘background-color‘,‘lightblue‘);})$(‘#box‘).on(‘mouseout‘,function(event){ $(event.currentTarget).css(‘background-color‘,‘transparent‘);})</script>
<iframe style="width: 100%; height: 60px;" src="http://sandbox.runjs.cn/show/oidy9svb" frameborder="0" width="320" height="240"></iframe>
事件冒泡
DOM事件流分为三个阶段：事件捕获、处于目标和事件冒泡，由于IE8-浏览器不支持事件捕获。jQuery也不支持事件捕获
stopPropagation()
jQuery采用标准写法stopPropagation()来实现阻止事件冒泡
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn1">按钮</button><button id="btn2">阻止冒泡</button><script>$(‘#btn1‘).on(‘click‘,function(){ alert(1);});$(document).on(‘click‘,function(){ alert(0);});$(‘#btn2‘).on(‘click‘,function(event){ event.stopPropagation(); $(‘#btn1‘).on(‘click‘,function(event){ event.stopPropagation(); });});</script>
<iframe style="width: 100%; height: 40px;" src="http://sandbox.runjs.cn/show/oxkesxs3" frameborder="0" width="320" height="240"></iframe>
isPropagationStopped()
event.isPropagationStopped()方法用来检测事件对象中是否调用过event.stopPropagation()
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><div id="box" style="height: 30px;background:lightblue"></div><script>$(‘#box‘).click(function(event){ alert(event.isPropagationStopped());//false event.stopPropagation(); alert(event.isPropagationStopped());//true});</script>
<iframe style="width: 100%; height: 50px;" src="http://sandbox.runjs.cn/show/ubjw2eu8" frameborder="0" width="320" height="240"></iframe>
stopImmediatePropagation()
stopImmediatePropagation()方法不仅可以取消事件的进一步冒泡，而且可以阻止同一个事件的其他监听函数被调用
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn1">按钮一</button><button id="btn2">按钮二</button><script>$(‘#btn1‘).on(‘click‘,function(event){ event.stopImmediatePropagation(); alert(1);});$(‘#btn1‘).on(‘click‘,function(){ alert(2);});$(‘#btn2‘).on(‘click‘,function(event){ alert(1); event.stopPropagation();});$(‘#btn2‘).on(‘click‘,function(){ alert(2);});$(document).on(‘click‘,function(){ alert(0);});</script>
<iframe style="width: 100%; height: 40px;" src="http://sandbox.runjs.cn/show/qhv5agsy" frameborder="0" width="320" height="240"></iframe>
isImmediatePropagationStopped()
event.isImmediatePropagationStopped()方法用来检测事件对象中是否调用过event.stopImmediatePropagation()
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><div id="box" style="height: 30px;background:lightblue"></div><script>$(‘#box‘).click(function(event){ alert(event.isImmediatePropagationStopped());//false event.stopImmediatePropagation(); alert(event.isImmediatePropagationStopped());//true});</script>
<iframe style="width: 100%; height: 50px;" src="http://sandbox.runjs.cn/show/bce6leac" frameborder="0" width="320" height="240"></iframe>
默认行为
jQuery使用event.preventDefault()方法来阻止默认行为
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><div id="box" style="height: 30px;background:lightblue"></div><script>$(‘#box‘).contextmenu(function(event){ event.preventDefault();});</script>
<iframe style="width: 100%; height: 50px;" src="http://sandbox.runjs.cn/show/nauuwwql" frameborder="0" width="320" height="240"></iframe>
isDefaultPrevented()
event.isDefaultPrevented()方法可以用来检测当前事件是否阻止默认事件
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><div id="box" style="height: 30px;background:lightblue"></div><script>$(‘#box‘).contextmenu(function(event){ alert(event.isDefaultPrevented());//false event.preventDefault(); alert(event.isDefaultPrevented());//true});</script>
<iframe style="width: 100%; height: 50px;" src="http://sandbox.runjs.cn/show/3gawvjfx" frameborder="0" width="320" height="240"></iframe>
命名空间
event.namespace属性返回事件的命名空间
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><div id="box" style="height: 30px;background:lightblue"></div><script>$(‘#box‘).bind(‘test.abc‘,function(event){ alert(event.namespace);//abc});$(‘#box‘).click(function(){ $(‘#box‘).trigger(‘test.abc‘);})</script>
<iframe style="width: 100%; height: 50px;" src="http://sandbox.runjs.cn/show/dikefopt" frameborder="0" width="320" height="240"></iframe>
返回值
event.result是事件被触发的一个事件处理程序的最后返回值
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><div id="box" style="height: 30px;background:lightblue"></div><script>$(‘#box‘).click(function(event){ return 123;});$(‘#box‘).click(function(event){ $(‘#box‘).html(event.result);})</script>
<iframe style="width: 100%; height: 50px;" src="http://sandbox.runjs.cn/show/87houofd" frameborder="0" width="320" height="240"></iframe>
<script type="text/javascript">// 0){ return; } if(select[i].getBoundingClientRect().top <= 0 && select[i+1]){ if(select[i+1].getBoundingClientRect().top > 0){ change(oCon.children[i+2]) } }else{ change(oCon.children[select.length+1]) } }}document.body.onmousewheel = wheel;document.body.addEventListener(‘DOMMouseScroll‘,wheel,false);var oCon = document.getElementById("content");var close = oCon.getElementsByTagName(‘span‘)[0];close.onclick = function(){ if(this.innerHTML == ‘显示目录‘){ this.innerHTML = ‘ב; this.style.background = ‘‘; oCon.style.border = ‘2px solid #ccc‘; oCon.style.width = ‘‘; oCon.style.height = ‘‘; oCon.style.overflow = ‘‘; oCon.style.lineHeight = ‘30px‘; }else{ this.innerHTML = ‘显示目录‘; this.style.background = ‘#3399ff‘; oCon.style.border = ‘none‘; oCon.style.width = ‘60px‘; oCon.style.height = ‘30px‘; oCon.style.overflow = ‘hidden‘; oCon.style.lineHeight = ‘‘; }}for(var i = 2; i < oCon.children.length; i++){ oCon.children[i].onmouseover = function(){ this.style.color = ‘#3399ff‘; } oCon.children[i].onmouseout = function(){ this.style.color = ‘inherit‘; if(this.mark){ this.style.color = ‘#3399ff‘; } } oCon.children[i].onclick = function(){ change(this); } }function change(_this){ for(var i = 2; i < oCon.children.length; i++){ oCon.children[i].mark = false; oCon.children[i].style.color = ‘inherit‘; oCon.children[i].style.textDecoration = ‘none‘; oCon.children[i].style.borderColor = ‘transparent‘; } _this.mark = true; _this.style.color = ‘#3399ff‘; _this.style.textDecoration = ‘underline‘; _this.style.borderColor = ‘#2175bc‘; }// ]]></script><script type="text/javascript" src="http://files.cnblogs.com/files/xiaohuochai/contextMenu.js"></script>深入学习jQuery事件对象