關於事件的一些理解，冒泡等等

時間 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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。