事件的傳播順序（冒泡模型與捕捉模型）,阻止，移除

時間 2019-11-20

原文原文鏈接

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件的傳播順序（冒泡模型與捕捉模型先捕捉再冒泡）,阻止，移除</title>
<style>
    #outside{
       width: 600px;
       height:600px;
       margin:0px auto;
       border: 1px solid red;
    }
    #inside{
        width: 400px;
        height:400px;
        margin:0 auto;
        margin-top: 100px;
        border: 1px solid #008000;
    }
    #remove{
        margin: 0px auto;
        margin-top:20px;
        height: 100px;
        width:200px;
        border: 1px solid red;
    }
</style>
<script type="text/javascript">
    /**
     * 事件的傳播順序（冒泡模型與捕捉模型）,阻止事件與效果，移除事件
     * 1.正由於有了元素的嵌套，纔有元素事件的執行順序之分
     * 2.當點擊內層div執行順序會是怎樣
     * addEventListener（'click','function',false） false表明冒泡事件，true表明捕捉事件
     * stopPropagation() 中止事件的傳播
     * 阻止事件效果,好比當提交表單時，讓其不跳轉,在標準的W3C中是經過事件的preventDefault=true屬性來控制的
     * 而在ie模型中是經過returnValue=false屬性值來實現的
     * obj.removeEventListener()
     * 冒泡事件是一次從內而外執行事件，而捕捉是從外到裏捕捉事件
     */
</script>
</head>
<body>
   <div id="outside">
       <div id="inside">

       </div>
   </div>

   <div id="remove">
      <button onclick="add();">事件的監聽</button>
      <button onclick="remove();">事件的移除</button>
   </div>
<script>
    var outside=document.getElementById("outside");
    var inside=document.getElementById("inside");
    outside.addEventListener('click',function(ev){
        alert("outside");
        //阻止事件的傳播
        ev.stopPropagation();
        //阻止事件的效果,ie中須要用returnValue=false屬性設置
        ev.preventDefault=true;
    },false);
    inside.addEventListener('click',function(){
        alert("inside");
    },false);
    /**
     * 事件的艦艇與移除
     *
     */
    function add(){
        var remove=document.getElementById("remove");
        remove.addEventListener('click',bodyalert,false);
        alert("事件被監聽了");
    }
    function remove(){
        var remove=document.getElementById("remove");
        remove.removeEventListener('click',bodyalert,false);
        alert("事件被移除了");
    }
    function bodyalert(){
        alert("事件被監聽了");
    }

</script>
</body>
</html>