黑馬程序員_學習日記60_706Dom2（事件冒泡、this、動態創建Dom、innerHTML、動態設置樣式）

一、事件冒泡
（一） window.event.cancelBubble 取消事件冒泡

<table οnclick="alert('table onclick');">
    <tr οnclick="alert('tr onclick');">
        <td οnclick="alert('td onclick');">
            <p οnclick="alert('p onclick');window.event.cancelBubble=true">aaaa</p>
        </td>
        <td>
            bbb
        </td>
    </tr>
</table>

（二） onmourseover向內冒泡，onmourseenter不會向內冒泡

<head>
    <title></title>                                    
    <style type="text/css">
        #d1
        {
            width:200px; /* 200px不加"" */
            height:200px;
            background-color:Red;
        }
        #d11
        {
            width:100px;
            height:100px;   
            background-color:Yellow; 
        }
        
        #d2
        {
            width:200px;
            height:200px;  
            background-color:Red;  
        }
        #d22
        {
            width:100px;
            height:100px;   
            background-color:Yellow; 
        }
    </style>
    <script type="text/javascript">
        var count1 = 0;
        function f1() {
            count1++;
            var div11 = document.getElementById("d11");
            div11.innerHTML = count1;
        }

        var count2 = 0;
        function f2() {
            count2++;
            var div22 = document.getElementById("d22");
            div22.innerHTML = count2;
        }
    </script>
</head>
<body>
    <!--onmouseover事件在兩塊div間移動也會被觸發-->
    <div id="d1" οnmοuseοver="f1();">
        <div id="d11"></div>
    </div>
    <br />
    <!--onmouseenter事件在進入大div時才被觸發-->
    <div id="d2" οnmοuseenter="f2();">
        <div id="d22"></div>
    </div>
</body>

二、事件中的this
（一）在事件調用函數中，this代表window對象；
在事件響應函數中，this代表當前觸發事件的對象。

<head>
    <title></title>
    <script type="text/javascript">
        function f4() {
            //事件調用函數中的this代表window對象
            alert(this.location.href);
            alert(this.value);
        }
    </script>
</head>
<body>
    <!--事件響應函數中的this代表當前觸發事件的對象，在這裏就是button-->
    <input type="button" value="btn2" οnclick="alert(this.value)" /><br/>
    <input type="button" value="btn4" οnclick="f4()"/>
    <!--如果這樣寫this就表示觸發事件的對象-->
    <!--<input type="button" value="btn4" οnclick="f4(this)" />-->
</body>

（二）this與srcElement在事件冒泡中的區別：
srcElement是觸發事件的對象，alert的值全是aaaa

<table οnclick="alert(event.srcElement.innerHTML);">
    <tr οnclick="alert(event.srcElement.innerHTML);">
        <td οnclick="alert(event.srcElement.innerHTML);">
            <p οnclick="alert(event.srcElement.innerHTML);">aaaa</p>
        </td>
        <td>bbb</td>
    </tr>
</table>

this是監聽事件的對象，alert的值是當前監聽對象內的值，每次不一樣

<table οnclick="alert(this.innerHTML);">
    <tr οnclick="alert(this.innerHTML);">
        <td οnclick="alert(this.innerHTML);">
            <p οnclick="alert(this.innerHTML);">aaaa</p>
        </td>
        <td>bbb</td>
    </tr>
</table>

三、動態創建DOM
document.write只能在頁面加載過程中才能動態創建。
（一）可以調用document的createElement方法來創建具有指定標籤的DOM對象。

<head>
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            var div = document.getElementById("d1");
            //返回dom對象，在內存中創建
            var btn = document.createElement("input");
            btn.type = "button";
            btn.value = "我是動態創建的";

            btn.onclick = function () {
                //動態添加刪除對象的onclick事件
                var txt = document.getElementById("t");
                div.removeChild(txt);
            }
            //最後不要忘了把內存中的btn加到頁面中
            div.appendChild(btn);
        }
    </script>
</head>
<body>
    <div id="d1">
        <input type="text" id="t"/>
    </div> 
</body>

（二）動態創建的元素，在沒有加載前，不能用get…ById獲取

四、innerText、innerHTML、value
（一）value 獲取或設置表單元素的值。
（二）幾乎所有DOM元素都有innerText和innerHTML屬性。所有瀏覽器都支持innerHTML。
innerText和innerHTML的區別：
1、innerText中的內容原樣輸入，會對html的特殊符號轉義；輸出時獲取純文本。

<head>
    <title></title>
    <script type="text/javascript">
        function f1() {
            var div = document.getElementById("d1");
            //innerText會將div中原有的內容覆蓋掉
            div.innerText = "<font color='red'>都說</font><b>傳智播客</b>好";
        }
    </script>
</head>
<body>
    <div id="d1">123123<input type="text" /></div>
    <input type="button" οnclick="f1()" value="click" />
</body>

2、 innerHTML 輸入時帶效果，輸出時原樣輸出

五、案例：動態創建表格

<head>
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            var json = [
                { "name": "bokeyuan", "site": "http://www.cnblogs.com" },
                { "name": "cnbeta", "site": "http://www.cnbeta.com" },
                { "name": "qiushibaike", "site": "http://www.qiushibaike.com" }
            ];
            var div = document.getElementById("d1");
            //創建表
            var table = document.createElement("table");
            div.appendChild(table);

            for (var i = 0; i < json.length; i++) {
                var site = json[i];
                //創建行
                var row = document.createElement("tr");
                table.appendChild(row);
                //創建單元格
                var td = document.createElement("td");
                var link = document.createElement("<a href='" + site.site + "'></a>");
                //<a href=""></a>中間的值不能直接用字符串拼接，要用innerHTML
                link.innerHTML = site.name;
                td.appendChild(link);
                row.appendChild(td);

                td = document.createElement("td");
                td.innerText = site.site;
                row.appendChild(td);
            }
        }
    </script>
</head>
<body>
    <div id="d1"></div>
</body>

六、瀏覽器兼容性問題
在Chrome瀏覽器中不支持appendChild，動態創建表格用insertRow、inertCell。
在insertRow(-1)和insertCell(-1)中如果不加”-1”,也會出現下圖所示的兼容性問題。

<script type="text/javascript">
    window.onload = function () {
        var json = [{ "name": "cnblogs", "site": "http://www.cnblogs.com" },
            { "name": "cnbeta", "site": "http://www.cnbeta.com" },
            { "name": "qiushibaike", "site": "http://www.qiushibaike.com" }
        ];
        var tb = document.createElement("table");
        document.getElementById("d1").appendChild(tb);
        tb.border = 1;

        for (var i = 0; i < json.length; i++) {
            var site = json[i];
            //如果不寫"-1"會出現
            var row = tb.insertRow(-1);

            var td = row.insertCell(-1);
            td.innerHTML = site.name;

            td = row.insertCell(-1);
            td.innerHTML = site.site;
        }
    }
</script>

七、動態增刪節點用哪種方式？
操作頁面元素時，用innerHTML方式還是createElement()、appendChild()與removeChild()的方式操作Dom節點。
1、對於大量進行節點操作時，使用innerHTML的方式性能要好於頻繁的DOM操作。
先將頁面的HTML代碼寫好，然後調用一次innerHTML，而不要反覆調用innerHTML。
2、對於使用innerHTML的方式來刪除節點，在某些情況下會存在內存問題，比如：div下面有很多其他元素，每個元素都綁定有事件處理程序。此時，innerHTML只是把當前元素從節點上移除了，但那些事件處理程序依然佔用內存。

八、動態設置樣式
可以動態設置類樣式和行內樣式

<style type="text/css">
    .cls
    {
        width:200px;
        height:200px;
        background-color:Red;
        /*這兩個屬性都是設置透明度的*/
        filter:alpha(opacity=50);
        opacity:0.5;    
    }
</style>
<script type="text/javascript">
    window.onload = function () {
        //設置類樣式
        //document.getElementById("d1").className="cls";
        //設置行內樣式
        document.getElementById("d1").style.width = "200px";
        document.getElementById("d1").style.height = "200px";
        document.getElementById("d1").style.backgroundColor = "blue";
    }
</script>

黑馬程序員_學習日記60_706Dom2（事件冒泡、this、動態創建Dom、innerHTML、動態設置樣式）

SQL優化-20231016

Jack's Notes7——反射案例(主程序加載插件)

黑馬程序員_學習日記65_713ASP.NET（委託、託管、擴展方法、泛型委託、進程_應用程序域_線程、多線程、異步委託）

Jack's Tag——小馬哥經典語錄

黑馬程序員_學習日記60_706Dom2（事件冒泡、this、動態創建Dom、innerHTML、動態設置樣式）

Jack's Notes12——全選、全不選、反選(循環遍歷給按鈕動態註冊事件)

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結