JS的Dom和事件处理机制（三）

一、事件监听原理

 var btn = document.getElementsByTagName("button")[0];

//    btn.addEventListener("click",fn1);
//    btn.addEventListener("click",fn2);
    fn("click",fn1,btn);


    function fn1(){
        console.log("九尺龙泉万卷书，上天生我意何如。");
    }

    //原理（了解）（自己封装一个）(click)
    function fn(str,fn,ele){
        //判断位置要注意：如果进入绑定事件本身，那么该事件已经本绑定了
        //所以获取旧的事件必须在新的事件绑定之前
        var oldEvent = ele["on"+str];
        ele["on"+str] = function () {
            //不能直接执行函数，因为我们还不知道以前有没有绑定我同样的事件
            //进行判断，如果以前有过绑定事件，那么把以前的执行完毕在执行现在的事件，如果没有就直接执行
            //如果没有被定义过事件该事件源的该事件属性应该是null对应的boolean值是false
            //如果已经定义过事件该事件源的该事件属性应该是function本身对应的boolean值是true
            if(oldEvent){
                //因为oldEvent本身他就是函数本身，那么后面加一个();就是执行函数
                oldEvent();
                fn();
            }else{
                //没有绑定过事件
                fn();
            }
        }
    }

二、事件兼容

    //火狐谷歌IE9+支持addEventListener
//    btn.addEventListener("click",fn1);
//    btn.addEventListener("click",fn2);

    //IE678支持attachEvent
//    btn.attachEvent("onclick",fn1);
//    btn.attachEvent("onclick",fn2);

    //兼容写法
    EventListen = {
        addEvent: function (ele,fn,str) {
            //通过判断调用的方式兼容IE678
            //判断浏览器是否支持该方法，如果支持那么调用，如果不支持换其他方法
            if(ele.addEventListener){
                //直接调用
                ele.addEventListener(str,fn);
            }else if(ele.attachEvent){
                ele.attachEvent("on"+str,fn);
            }else{
                //在addEventListener和attachEvent都不存在的情况下，用此代码
                ele["on"+str] = fn;
            }
        }
    }


    EventListen.addEvent(btn,fn1,"click")
    EventListen.addEvent(btn,fn2,"click")

三、冒泡和捕获

//    冒泡和捕获
   box1.onclick = function () {
       alert("我是box1");
   }

   box2.onclick = function () {
       alert("我是box2");
   }

   box3.onclick = function () {
       alert("我是box3");
   }

   document.onclick = function () {
       alert("我是document");
   }

点最里面的蓝色div，事件会一层层冒泡上去，3、2、1、document。

<div class="box1" id="box1">
    <div class="box2">
        <div class="box3"></div>
    </div>
</div>

box1.addEventListener("click", function () {
       alert("我是box1");
   },true);

   box2.addEventListener("click", function () {
       alert("我是box2");
   },true);

   box3.addEventListener("click", function () {
       alert("我是box3");
   },true);

   document.addEventListener("click", function () {
       alert("我是document");
   },true);

true：document、box1、box2、box3，出现顺序

false：3、2、1、document

四、取消冒泡

    box.onmouseover = function (event) {
        console.log("鼠标放到了box上");
        //阻止冒泡
        event = event || window.event;

        if(event && event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble = true;
        }
    }

五、事件委托

<button>创建4个移民li</button>
<ul>
    <li>我是土著li</li>
    <a href="#">我是土著li</a>
    <li>我是土著li</li>
    <li>我是土著li</li>
    <a href="#">我是土著li</a>
    <li>我是土著li</li>
</ul>
<script>

    var liArr = document.getElementsByTagName("li");
    var ul = document.getElementsByTagName("ul")[0];
    var btn = document.getElementsByTagName("button")[0];

//    for(var i=0;i<liArr.length;i++){
//        liArr[i].onclick = function () {
//            alert("我是土著li");
//        }
//    }

    btn.onclick = function () {
        for(var i=1;i<=4;i++){
            var newLi = document.createElement("li");
            var newA = document.createElement("a");
            newLi.innerHTML = "我是移民li";
            newA.innerHTML = "我是移民a";
            newA.href = "#";
            ul.appendChild(newLi);
            ul.appendChild(newA);
        }
    }


    //普通的时间绑定，没有办法为新创建的元素绑定事件。所以我们要使用冒泡的特性，事件委托！
    //事件委托
    ul.onclick = function (event) {
        //获取事件触动的时候传递过来的值
        event = event || window.event;
        var aaa = event.target?event.target:event.srcElement;
        //判断标签名，如果是li标签弹窗
        if(aaa.tagName === "LI"){
            alert("我是li");
        }
    }