艾利百科--临沂网站制作,临沂网页设计,临沂微信公众号,兼容并蓄,开放共赢!

艾利百科

当前位置: 主页 > 网站制作 > jQuery/JS >

JS中的事件冒泡、默认事件及如何阻止

时间:2018-07-10 14:11来源:未知 作者:kunbeatable 点击:
1、什么是 事件冒泡和事件捕获? 事件冒泡是由IE开发团队提出来的,即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播。 当用户点击了div元素,click事件将按照divbodyhtmldocument的顺序进行传播。 IE9,chrome,Firefox,
1、什么是 事件冒泡和事件捕获?
     事件冒泡是由IE开发团队提出来的,即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播。当用户点击了<div>元素,click事件将按照<div>—><body>—><html>—>document的顺序进行传播。IE9,chrome,Firefox,Opera,Safari都支持事件冒泡,并将事件冒泡到window对象。
     事件捕获是由Netscape Communicator团队提出来的,是先由最上一级的节点先接收事件,然后向下传播到具体的节点。当用户点击了<div>元素,采用事件捕获,则click事件将按照document—><html>—><body>—><div>的顺序进行传播。IE9,chrome,Firefox,Opera,Safari都支持事件捕获,但是IE8和IE8以下的版本只支持事件冒泡。尽管DOM2规范要求事件应该从document对象开始传播,但是现在的浏览器实现都是从window对象开始捕获事件。

2、什么是默认事件?
        有一些html元素默认的行为,比如说a标签,点击后有跳转动作;form表单中的submit类型的input有一个默认提交跳转事件;reset类型的input有重置表单行为。这些浏览器的默认功能统称为默认事件。

3、为什么要阻止事件冒泡及如何阻止。
      为了阻止当前事件向上传递,只在当前对象上发生。不同浏览器对阻止冒泡的写法存在兼容问题,在ie浏览器中阻止冒泡的方法是window.event.cancelBubble=true而在谷歌,火狐等浏览器的方法则是e.stopPropagation()。
      阻止冒泡事件的兼容性写法:
     //阻止冒泡事件的兼容性处理
      function stopBubble(e) {
        if(e && e.stopPropagation) { //非IE
          e.stopPropagation();
        } else { //IE
          window.event.cancelBubble = true;
        }
      

4、为什么要阻止默认事件以及如何阻止。
 
有一些浏览器行为是在事件处理程序执行前发生的,也就是说这些默认行为是无法取消的,需要人为去屏蔽浏览器的默认行为。例如点击<a href=''>点击</a>阻止跳转到另一个界面。
    function stopDefault( e ) { 
    if ( e && e.preventDefault ){
        e.preventDefault(); //阻止默认浏览器动作(W3C) 
    }else {
        window.event.returnValue = false; //IE中阻止函数器默认动作的方式 
    }
}    

5、如何正确使用return false。
当你每次调用”return false“的时候,它实际上做了3件事情:
•event.preventDefault();
•event.stopPropagation();
•停止回调函数执行并立即返回。

只有当你同时需要preventDefault和stopPropagation,并且你的代码可以接受直到你的回调执行完成才停止执行浏览器的默认行为,那你就可以使用”return false“。

顶一下
(1)
100%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片