在popup窗口中俘获事件的缺陷&修复

博客介绍了处理HTML元素事件的两种方法,即直接向事件处理回调赋值和使用attachEvent()方法。以popup窗口为例,指出两种方法在popup中有差别,使用向事件处理回调赋值方法时,在popup窗口中响应事件处理函数存在缺陷,还给出了解决该问题的两种办法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

    我们在处理HTML元素的事件时,通常可以使用两种方法来添加其处理函数。一是直接向HTML元素的 事件处理回调(如:onclick、onlond等)赋值;一是使用元素的attachEvent()方法来添加处理函数。这两种方法对于普通的页面表现出来的效果是完全相同的,而对于popup它们却有很大的差别。

    先看下面的popup中事件处理示例,再来说是什么问题:
ExpandedBlockStart.gif ContractedBlock.gif < script  language ="javascript" > dot.gif
InBlock.gif
function NormalEventListener(elmt)
ExpandedSubBlockStart.gifContractedSubBlock.gif
dot.gif{
InBlock.gif    alert(event);
ExpandedSubBlockEnd.gif}

InBlock.gif
function AttachEventListener(evt)
ExpandedSubBlockStart.gifContractedSubBlock.gif
dot.gif{
InBlock.gif    alert(evt);
ExpandedSubBlockEnd.gif}

InBlock.gif
var popwin = window.createPopup();
InBlock.gif
var popdoc = popwin.document;
InBlock.gif
var div = popdoc.createElement('DIV');
InBlock.gifdiv.style.width 
= '100%';
InBlock.gifdiv.style.height 
= '100%';
InBlock.gifdiv.style.border 
= 'dotted 1px blue';
InBlock.gifdiv.innerText 
= 'click me.';
InBlock.gifdiv.onclick 
= function Click()
ExpandedSubBlockStart.gifContractedSubBlock.gif
dot.gif{
InBlock.gif    NormalEventListener(
this);
ExpandedSubBlockEnd.gif}
;
InBlock.gifdiv.attachEvent('onclick', AttachEventListener);
InBlock.gifpopwin.document.body.appendChild(div);
ExpandedBlockEnd.gifpopwin.show(
100100200200);
None.gif
</ script >

    这个示例中,分别使用了两种方法来添加事件处理函数。对于attachEvent这种方式,我在' 使用Popup窗口创建无限级Web页菜单(3)'一文中介绍过它的用法,而且说明了怎么在其处理函数中获取全局事件变量 event。就是被attach的处理函数的第一个参数即是默认的 event变量。

    今天我无意中使用了另一种方法,向 事件处理回调赋值的方法附加事件处理函数,div.onclick = function()。却发现了一个popup窗口中响应时间处理函数的缺陷。执行上面的代码,我们会发现NormalEventListener()方法的elmt参数是引发事件的元素本身的引用,而此时调用 event属性,却发现 event这厮居然是:null angry_smile.gif。这可咋怎呐?! 

    原来NoramlEventListener()中的 event是window. event,因为这个函数定义在IE的window的作用域内,它的引用也可以写成window.NormalEventListener(),而我们触发的事件是在popup窗口中的window中。就是说IE的window和popwin.document.parentWindow是两个不同的域,当然这个时候window. event就是null了。解决这个问题的办法有两个,一可以去取popwin.document.parentWindow的 event,不过这个方法比较麻烦,需要专门去记录那个popwin变量。另外还有一个最简单的方法可以取到正确的 event属性。因为每个事件触发的源元素(srcElement)和触发它的事件属性总是在同一个域中,所以我们就可以使用如下办法将其取到:
None.gif  function  NormalEventListener(elmt)
None.gif {
None.gif    
var  evt  =   elmt .document.parentWindow.event;
None.gif    alert(evt);
None.gif }None.gif

    这个elmt参数是从Click函数中传递过来的触发事件的元素本身,即: event.srcElement。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值