9-14（事件）

一、事件冒泡

 <div id="wrap1">
        <div id="wrap2">

        </div>
 </div>

    <script type="text/javascript">
        var wrap1 = document.getElementById("wrap1")
        var wrap2 = document.getElementById("wrap2")
        wrap1.onclick = function(){
            console.log("我是wrap1")
        }
        wrap2.onclick = function(e){
            console.log("我是wrap2")
            //e.stopPropagation();-->可以在子元素中使用e.stopPropagation()方法阻止冒泡向父元素蔓延，此方法需要传入一个形参e(此时的形参e相当于一个事件对象，因为事件对象默认作为处理函数的第一个对象传入，因此实际上调用的是事件对象（click）中停止冒泡的方法)
        }
    </script>
    //这个事件的执行经历了以下三个阶段
    1、捕获
        首先由内向外，记录绑定了的事件处理函数 -->捕获了wrap1、wrap2的处理函数
    2、触发
        首先触发目标元素上的函数(如果目标元素是子元素，则优先执行子元素上的函数-->wrap2)
    3、冒泡
        由内向外依次执行捕获了的函数(先执行了wrap2,再执行wrap1) 注意：当父元素和子元素都绑定了同一个事件时，才会触发冒泡，例如都绑定了onclick事件。如果绑定的为不同的事件，则冒泡不会蔓延
    因此输出的结果为-->我是wrap2-->我是wrap1

事件冒泡会产生的问题

事件在进行触发时，会首先遍历所有绑定事件了的对象以处理函数，如果事件监听的越多，则遍历的时间也会相应的增加，因此事件的响应也就会越慢。

如何解决

如果有多个平级的事件需要绑定相同的事件监听，则只需要在父元素绑定一次

实例：

 <div id="list">
       <input type="text" id="result"><br>
       <input type="button" value="1">
       <input type="button" value="2">
       <input type="button" value="3">
       <input type="button" value="+"><br>
       <input type="button" value="4">
       <input type="button" value="5">
       <input type="button" value="6">
       <input type="button" value="-"><br>
       <input type="button" value="7">
       <input type="button" value="8">
       <input type="button" value="9">
       <input type="button" value="*"><br>
       <input type="button" value="0">
       <input type="button" value="C">
       <input type="button" value="=">
       <input type="button" value="/"><br>
    </div>

var list1 = document.getElementById("list")
        var result1 = document.getElementById("result")
        var sum = ""
        var sum1 =""
        list.onclick = function(e){
            if(e.target.nodeName =='INPUT'){
                console.log(e.target.value)
                switch(e.target.value){
                    case "C":
                        result1.value = ""
                        break;
                     case "=":
                           if(result1.value !==""){
                               result1.value = eval(result1.value)
                           }
                    default:
                        if(result1.value.indexOf("+")==-1){
                            result1.value += e.target.value.replace("=","") 
                        }
                }
            }
        }
//参数e对应的是click事件对象对应的是list中对应的被点击的目标元素