Js学习笔记－事件冒泡、事件捕获、阻止默认行为

本文链接：https://blog.csdn.net/KoalaShane/article/details/53557551

事件冒泡

事件冒泡是指，触发内层的事件之后，事件会按照DOM的层次结构像水泡一样不断的向上直至顶端．例如：

<script type="text/javascript">
$(function(){
    // 为span元素绑定click事件
    $('span').bind("click",function(){
        var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
        $('#msg').html(txt);
    });
    // 为div元素绑定click事件
    $('#content').bind("click",function(){
        var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
        $('#msg').html(txt);
    });
    // 为body元素绑定click事件
    $("body").bind("click",function(){
        var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
        $('#msg').html(txt);
    });
})
</script>

<div id="content">
    外层div元素
    <span>内层span元素</span>
    外层div元素
</div>

<div id="msg"></div>

当点击内部<span>元素的同时，也点击了包含<span>元素的<div>和包含<div>元素的元素<body>，并且每一个元素都会按照特定的顺序响应click事件．

冒泡过程：
(1) <span>
(2) <div>
(3) <body>

为了避免意料之外的效果，有必要对事件的作用范围进行限制．阻止事件冒泡可以使用JQuery提供的stopPropagation()方法．

$('#content').bind("click",function(event){　　//evet事件对象
    var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
    $('#msg').html(txt);
    event.stopPropagation();    //  阻止事件冒泡
});

在W3c中，使用event.stopPropagation（）方法

在IE下设置event.cancelBubble = true；

事件捕获

事件捕获和事件冒泡是刚好相反的两个过程，事件捕获是从最顶部往下开始触发．

捕获过程：
(1)<body>
(2) <div>
(3) <span>

事件捕获是从最外层元素开始，然后再到最里层元素．遗憾的是，并非所有主流浏览器都支持事件捕获，JQuery不支持事件捕获．

W3C自带的两个事件，添加事件和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点中都包含这两个方法，并且它们都接受3个参数；事件名、函数、冒泡或捕获的布尔值(true表示捕获，false表示冒泡)。

window.addEventListener('load',function(){  //添加事件    3个参数（事件名，函数，冒泡） IE不兼容捕获
    alert('123') 
},false) 

window.removeEventListener('load',function(){  //删除事件   
    alert('123') 
},false)

IE 实现了与DOM 中类似的两个方法：attachEvent()和detachEvent()。这两个方法接受相同的两个参数：事件处理程序名称与事件处理程序函数。由于IE8 及更早版本只支持事件冒泡，所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。

window.attachEvent('load',function(){  //（事件名，函数） 
    alert('123') 
})

window.detachEvent('load',function(){  //（事件名，函数） 
    alert('123') 
})

阻止默认行为

网页中的元素有自己默认的行为 , 比如 , 单击超链接后会跳转、单击”提交”按钮后表单会提交 , 有时需要阻止元素的默认行为.event.preventDefault()

<script type="text/javascript">
$(function(){
   $("#sub").bind("click",function(event){
       var username = $("#username").val();  //获取元素的值
       if(username==""){     //判断值是否为空
            $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息
             event.preventDefault();  //阻止默认行为 ( 表单提交 )
         }
   })
})
</script>

<form action="test.html">
    用户名：<input type="text" id="username" />
    <input type="submit" value="提交" id="sub"/>
</form>

<div id="msg"></div>