国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > web前端 > htmlcss > JS的事件监听机制

JS的事件监听机制

来源:程序员人生   发布时间:2015-04-28 07:49:16 阅读次数:2563次

很久之前有个叫Netscape的姑娘,她制定了Javascript的1套事件驱动机制(即事件捕获)

后来又有1个叫“IE”的小子,这孩子比较傲气,他认为“凭甚么我要依照你的规则走”,因而他又创造了1套自己的规则(事件冒泡)

再后来,有个叫W3C的牙婆,想撮合这两个孩子,将他们的特点融会在了1起,这下,事件产生的顺序变成:

事件从根节点开始,逐级派送到子节点,若节点绑定了事件动作,则履行动作,然后继续走,这个阶段称为“捕获阶段(Capture)”;
履行完捕获阶段后,事件由子节点往根节点派送,若节点绑定了事件动作,则履行动作,然后继续走,这个阶段称为“冒泡阶段(Bubble)”。

仁慈的Netscape和其姐妹们都接受了牙婆的建议,采取了新的事件规则,而自豪固执的IE小子始终依照自己的规则履行。终究使得这成为困扰前端开发人员的兼容性问题之1。那末,怎样绑定事件呢?

由于这两派阅读器的差异,其绑定的方法也不1样,其中,遵守标准的阅读器使用W3C定义的addEventListener函数绑定,函数定义以下:

function addEventListener(string eventFlag, function eventFunc, [bool useCapture=false])

eventFlag : 事件名称,如click、mouseover…
eventFunc: 绑定到事件中履行的动作
useCapture: 指定是不是绑定在捕获阶段,true为是,false为否,默许为true
在事件监听流中可使用event.stopPropagation()来禁止事件继续往下流

IE中使用自有的attachEvent函数绑定时间,函数定义以下:

function attachEvent(string eventFlag, function eventFunc)

eventFlag: 事件名称,但要加上on,如onclick、onmouseover…
eventFunc: 绑定到事件中履行的动作
在事件监听流中可使用window.event.cacenlBubble=false来禁止事件继续往下流

总结:addEventListener(string eventFlag, function eventFunc, [bool useCapture=false]),针对ff,chrome,safari阅读器,false指冒泡阶段,默许为true,指捕获阶段。不过1般我们都用false。

attachEvent(string eventFlag, function eventFunc),针对ie系列、还有opera阅读器,少了事件处理机制的参数,只指定事件类型(别忘了on)和触发哪一个函数。

有了这些认知以后,有了大致的思路,对应的代码:

if(document.addEventListener){ document.addEventListener('click', hideBox, false);

在document绑定信息框(竖的那个)隐藏函数(即随意点html页面的哪里关闭展开的信息框,这也是使用document.addEventListener的缘由,要帮在文档上)

document.getElementById('status_hide').addEventListener('click', showBox, false);

在status_hide节点绑定信息框展开(详细的那个)函数并停止事件流(即点击竖的这个,展开详细的那个)

document.getElementById('status_show').addEventListener('click', stopEvent, false);

由于false肯定的是事件冒泡,为了避免点详情的时候,向上冒泡到document,触发document设置的click时hidebox方法,在status_show我们要绑定禁止事件流函数。

}

这个明白了,针对ie再写个attachEvent的就能够了,固然ie的参数只用2个就能够了,它的时间处理机制就是冒泡不用额外设置。

最后要说说这段函数。

var stopEvent = function(event){ e = event || window.event; if(e.stopPropagation){ e.stopPropagation(); }else { e.cancelBubble = true; } };

可以肯定它的作用是避免前面提到的冒泡,引发不该引发的click事件。

可是它呢function(event){e = event || window.event}

生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生