关于事件的一些理解，冒泡等等

时间 2019-12-02
原文原文链接
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        #box{            width: 100px;            height: 100px;            background: #0f0;        }    </style></head><body><!--<a href="#" id="btn">新浪</a><ul id="list">    <li><a href="#">首页</a></li>    <li><a href="#">博客</a></li>    <li><a href="#">相册</a></li>    <li><a href="#">关于咱们</a></li></ul>--><!--<button class="box">0</button><button class="box">0</button>--><div class="box" id="box">    <button id="btn">0</button>    <button>0</button>    <button>0</button>    <input id="txt" type="text"></div><script>    //添加元素/*    var myDiv = document.getElementById('list');//获取父节点div    var li = document.createElement('li');//新建一个li标签    var text = document.createTextNode('li');//新建立一个文本    var att = document.createAttribute('class');//新建一个属性class    myDiv.insertBefore(li, myDiv.childNodes[0]);//给[0]子元素以前添加标签    myDiv.appendChild(li);//为div添加子节点 最后一位    li.appendChild(text);//为li添加文本    li.setAttributeNode(att);//为span添加一个class名    att.value = 'democlass';//添加属性值    //替换元素    item.replaceChild(text.node, item.childNodes[0]);//    //删除元素    myDiv.removeChild(li);//    myDiv.parentNode.removeChild(li);//删除本身    var list = document.getElementById('list');    while (list.removeChilds.length) {//删除所有子节点        list.removeChilds(list.childNodes[0]);    }    //操做样式   必须驼峰命名    myDiv.style.marginTop;    var box = document.getElementById('myDiv');    box.style.marginTop = '100px';//必须带单位    box.style.marginBottom = '100px';*/    //事件    //简单计数器实现    //最先出现onclick    var btn = document.getElementsByTagName('button');    for (var i = 0; i < btn.length; i++) {        btn[i].addEventListener('click' ,function() {//w3c规定实现添加事件            this.innerHTML = parseInt(this.innerHTML) + 1;        });    }    //addEventListener添加    //attachEventListener移除    //IE使用    //srcElement添加    //removeElement移除    var btn = document.getElementsByTagName('button');    for (var i = 0; i < btn.length; i++) {        btn[i].addEventListener('click' ,function(e) {//w3c规定实现添加事件            e.srcElement.innerHTML = parseInt(e.srcElement) + 1;//提出函数节省内存        });    }    //w3c添加事件    //document.addEventListener(event事件, function函数, useCapture状态)    //兼容方法    function addEvent(el, eventName, fn) {        if (el.attachEvent) {            el.attachEvent('on', eventName, fn);        } else if (el.addEventListener){            el.addEventListener(eventName, fn)        } else{            el['on' + eventName] = fn;        }    }    //删除方法待添加/*    function removeEvent(el, eventName, fn) {        if (el.attachEvent) {            el.attachEvent('on', eventName, fn);        } else if (el.addEventListener){            el.addEventListener(eventName, fn)        } else{            el['on' + eventName] = fn;        }    }*///    事件模型///    1.捕获事件   2 目标阶段  3冒泡阶段/*    var box = document.getElementById('box');     box.addEventListener('click', function (e) {         console.log(e.target);//当前对象         console.log(e.currentTarget);//监听对象通常用这个     }, false);*/    var box = document.getElementById('box');    //事件委托    box.addEventListener('click', function (e) {/*        var btn = e.target;        btn.innerHTML = parseInt(btn.innerHTML) + 1;*/        console.log('我是box监听');//        console.log(e.currentTarget);        console.log(e.eventPhase);    });//false冒泡阶段    var btn1 = document.getElementById('btn');    //事件委托    btn1.addEventListener('click', function (e) {        console.log('我是btn监听');//        console.log(e.currentTarget);        console.log(e.eventPhase);        e.stopPropagation();        e.cancelable = true;    });//false冒泡阶段    //事件委托    document.body.addEventListener('click', function (e) {        console.log('我是body监听');//        console.log(e.currentTarget);        console.log(e.eventPhase);    });//false冒泡阶段    btn1.addEventListener('contextmenu', function (e) {//        alert('我帅吗');        e.preventDefault();        console.log(e.clientX);//获取鼠标坐标x        console.log(e.clientY);//获取鼠标坐标y    });//false冒泡阶段    var txt = document.getElementById('txt');    txt.addEventListener('keydown', function (e) {        console.log(e.keyCode);        e.preventDefault();    });//    event.target  点击永远是当前对象！！！！//    event.currentTarget点击获取的是监听对象！！！！//    keycode==判断ascll码  判断用户输入的是文字仍是数字  字母什么的//    阻止默认行为 e.preventDefault();  用法 e.preventDefault(); window.addEventListener('contextmenu', function (e)  例如阻止默认菜单//    阻止提交表单//    stopPropagation阻止冒泡   用法 e.stopPropagation();//    ie下e.cancelable  =  true使用  +    e.stopPropagation();  两句同时写    //var btn = document.getElementById('btn')    //btn.innerText = '百度'    //btn.innerHTML = '<b>搜狐</b>'    /*function changeGg(id, href, text) {        var btn = document.getElementById(id);        btn.innerHTML = '<a href ="' + href + '">' + text + '</a>'    }*/    /**     * 轮播图更换     */   /* function FocusPictureAdReplace (date){        this.init(date) //自动调用    }    FocusPictureAdReplace.prototype = {        init: function (data) {            var FosPicConId = document.getElementById('FosPicConId');            var FosPicConLi = FosPicConId.getElementsByClassName('FosPicConLi');            var FosPicConLi03 = FosPicConLi[data.index - 1];            FosPicConLi03.innerHTML = '\                <a href="'+ data.linkURL + '" target="_blank">\                    <img src="'+ data.imgURL + '" alt="'+ data.txt +'" title="'+ data.txt +'" width="360" height="220">\                </a>\                <div class="FosPicConTxtBg">\                </div>\                <div class="FosPicConTxt">\                <a href=" '+ data.linkURL + ' " target="_blank">'+ data.txt +' </a>;\                </div>';        }    };    var data2 = {        index: 3,        imgURL: "http://d.ifengimg.com/w650_h390/p3.ifengimg.com/a/2016_43/2d768f933a227fa_size115_w396_h280.jpg",        txt: "测试文本",        linkURL: "http://www.ifeng.com"    };    var data3 = {        index: 4,        imgURL: "http://d.ifengimg.com/w650_h390/p3.ifengimg.com/a/2016_43/2d768f933a227fa_size115_w396_h280.jpg",        txt: "测试文本4",        linkURL: "http://www.ifeng4.com"    };    var focusPictureAdReplace = new FocusPictureAdReplace(data2);    focusPictureAdReplace.init(data3); //手动调用*//*    function FocusPictureAdReplace() { //建立一个类函数    }    FocusPictureAdReplace.prototype={//对象原型内写方法        replace:function (date) {            var box1 = document.getElementsByClassName('inner');            var box2 = box1.document.getElementsByClassName('item current');            var box3 = box2[date.index - 1];            box3.innerHTML = '\            <a class="skuLink" href="' + date.linkURL + '" target="_blank" title="'+ date.txt + '">\            <img class="skuImg" data-exposal="" data-src="http://img1.360buyimg.com/imgb/s220x220_jfs/t4432/281/186902003/93575/4d5f30c2/58cb5b6aN371ae45c.jpg" src="'+ date.imgURL + '" data-done="1">\            <div class="skuInfo">\            <p class="skuName ">'+ date.txt +'</p>\            <p class="skuAdContent "></p>\            <p class="skuPrice10389382483 skuPriceInner">豪情你哲哥</p>\            </div>\            <div class="bg-shadow"></div>\            </a> '        }    }    var data2 = {        index: 3,        imgURL: "http://d.ifengimg.com/w650_h390/p3.ifengimg.com/a/2016_43/2d768f933a227fa_size115_w396_h280.jpg",        txt: "测试文本",        linkURL: "http://www.ifeng.com"    }    var focusPictureAdReplace = new FocusPictureAdReplace()    focusPictureAdReplace.replace(data2)*/    /**     *              ----鼠标监听事件移入监听元素内部的触发状况----     * mouseover在元素内部会触发  而且只会触发一次离开时候不触发  碰到子元素也会触发     * mouseenter在元素内部触发   只触发一次离开时候不触发   碰到子元素不触发     * mousemove在元素内部触发  在元素内部一直会触发事件     */    /**     *              ----鼠标监听事件移出监听元素内部的触发状况----     * mouseout在元素离开时候触发  而且移到子元素时候会触发     * mouseleave在元素内部触发  移到子元素不会触发     * mousemove  在元素内部一直会触发事件     */</script></body></html>