JavaScript 事件对象介绍(3)

 IE中的event对象的属性 
 属性                 类型            读/写             说明
 cancelBubble       Boolean          读写             默认值为false,但将其设置为true就可以取消事件冒泡;
 returnValue        Boolean          读写             默认值为true,但将其值设置为false就可以取消事件的默认行为;
 srcElement         Element          只读             事件的目标;
 type               String           只读             被触发的事件类型;

// 兼容target和srcElement函数 function getTarget(evt){ var e = evt || window.event; return e.target || e.srcElement; // 兼容得到事件目标DOM对象; } document.onclick = function(evt){ var target = getTarget(evt); alert(target); }

五 事件流

事件流是描述的从页面接收事件的顺序,当几个都具有事件的元素层叠在一起的时候,那么点击其中一个元素;
 并不是只有当前被点击的元素会触发事件,而是层叠在点击范围的所有元素都会触发事件;
 事件流包含两种模式:冒泡和捕获;

1.事件冒泡
 是从里往外逐个触发;

2.事件捕获
 是从外往里逐个触发;

// 现代浏览器都是冒泡类型;而捕获模式是早期的Netscape默认情况; // 现在的浏览器要使用DOM2级模型的事件绑定机制才能手动定义事件流模式; document.onclick = function(){ alert('我是document'); } document.documentElement.onclick = function(){ alert('我是html'); } document.body.onclick = function(){ alert('我是body'); } document.getElementById('box').onclick = function(){ alert('我是div'); } document.getElementsByTagName('input')[0].onclick=function(){ alert('我是input'); } // PS:点击input会逐级冒泡到document;

// 阻止事件冒泡兼容函数 function stopPro(evt){ var e = evt || window.event; // 如果存在cancelBubble,则是IE浏览器,将其值设为true就可以阻止事件冒泡; // 否则执行W3C中的阻止事件冒泡方法stopPropagation(); window.event ? e.cancelBubble = true : e.stopPropagation(); }

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgjfxz.html