主页 > 专题教程 > javascript > js基础 >
来源:自学PHP网 时间:2018-02-08 10:24 作者: 阅读:次
[导读] 在触发DOM中的某个事件的时候,会产生一个事件对象event,这个对象包含着所有与事件相关的信息。这些信息包括发生事件的元素,事件的类型和其它一些特定的相关信息。...
在触发DOM中的某个事件的时候,会产生一个事件对象 所有兼容DOM的浏览器都会将一个 var btn = document.getElementById("btn"); /* DOM0级方法 */ btn.onclick = function(event){ console.info(event.type); //输出:“click” } /* DOM2级方法 */ btn.addEventListener("click",function(event){ console.info(event.type); //输出:“click” },false);
在事件处理程序的内部,对象 要阻止事件的默认行为,可以使用 var link = document.getElementById("myLink"); link.onclick = function(event){ event.preventDefault(); } 另外,只有在
<html lang="zh" id="html" class="demo"> <head> <meta charset="UTF-8"> <title>事件冒泡</title> </head> <body id="body" class="demo"> <div id="parent" class="demo"> <button id="child" class="demo">点击一下</button> </div> <script type="text/javascript"> window.onload = function(){ var elements = document.querySelectorAll(".demo"); //alert(elements.length); for(var i = 0 ; i < elements.length; i++){ elements[i].onclick = function(event){ var element = elements[i]; //获取事件 event = event?event:window.event; //获取事件发生的目标 target = event.target?event.target:event.srcElement; console.info("事件源:"+target.id+" , "+target.tagName+", 事件对象:"+this.id); } } } </script> </body> </html> 上面的代码会产生事件冒泡,从控制台中可以看到事件冒泡的结果。如果要取消事件冒泡,只需要添加 <html lang="zh" id="html" class="demo"> <head> <meta charset="UTF-8"> <title>事件冒泡</title> </head> <body id="body" class="demo"> <div id="parent" class="demo"> <button id="child" class="demo">点击一下</button> </div> <script type="text/javascript"> window.onload = function(){ var elements = document.querySelectorAll(".demo"); //alert(elements.length); for(var i = 0 ; i < elements.length; i++){ elements[i].onclick = function(event){ var element = elements[i]; //获取事件 event = event?event:window.event; //获取事件发生的目标 target = event.target?event.target:event.srcElement; console.info("事件源:"+target.id+" , "+target.tagName+", 事件对象:"+this.id); //取消事件冒泡 event.stopPropagation(); } } } </script> </body> </html> 可以看到,此时,在控制台中显示的事件对象只有按钮对象。 事件对象的 与访问DOM中的 var btn = document.getElementById("btn"); btn.onclick = function(){ var event = window.event; console.info(event.type); //输出"click" } 上面的例子通过 如果事件处理程序使用的是 var btn = document.getElementById("btn"); btn.attachEvent("onclick",function(event){ console.info(event.type); //输出"click" }); 如果是使用HTML属性来指定事件处理程序,那么还可以通过一个 <input type="button" value="点击" onclick="alert(event.type)"/> IE中的
因为事件处理程序的作用域是根据指定它的方式来确定的,所以不能认为 var btn = document.getElementById("btn"); btn.onclick = function(){ console.info(window.event.srcElement === this); //输出true } btn.attachEvent("onclick",function(event){ console.info(event.srcElement === this); //输出false }); 上面的代码中,第一个事件处理程序使用的是DOM0级事件处理程序,
var link = document.getElementById("myLink"); link.onclick = function(){ window.event.returnValue = false; } 上面的例子中,指定的超链接在点击之后不会被导航到指定的URL上。 最后, 我们可以通过自定义函数来实现跨浏览器的事件对象。 首先是跨浏览器获取是事件对象的方法。该方法返回对 /* 跨浏览器获取event对象 */ function getEvent(event){ return event ? event : window.event; } 然后是跨浏览器获取事件的目标。 /* 跨浏览器获取事件的目标 */ function getTarget(event){ return event.target ? event.target : event.srcElement; } 接着是跨浏览器阻止事件默认行为的方法。 /* 跨浏览器阻止事件默认行为 */ function preventDefault(event){ if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue = false; } } 最后是跨浏览器阻止事件冒泡的方法。 /* 跨浏览器阻止事件冒泡 */ function stopPropagation(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble = true; } } |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com