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");        }    }