JS之DOM

HTMLdom和COREdom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTMLdom</title>
</head>
<body>
<table id="myTable" border="1" width="400px" height="100px" style="border-collapse: collapse">
    <tr>
        <td>书名</td>
        <td>价格</td>
        <td>操作</td>
    </tr>
    <tr id="tr1">
        <td>看的见风景的房间</td>
        <td>￥30</td>
        <td>
            <button onclick="removeRow(this)">删除</button>
        </td>
    </tr>
    <tr>
        <td>幸福从天而降</td>
        <td>￥18.5</td>
        <td>
            <button onclick="removeRow(this)">删除</button>
        </td>
    </tr>
    <tr>
        <td>60个瞬间</td>
        <td>￥32</td>
        <td>
            <button onclick="removeRow(this)">删除</button>
        </td>
    </tr>
</table>
<button onclick="insert1()">增加一行</button>
<button onclick="delete2()">删除第2行</button>
<button onclick="changeTitle()">修改标题</button>
</body>
<script>
    function insert1() {
        /*/!*1：core Dom*!/
         var tr = document.createElement("tr");
         var td1 = document.createElement("td");
         td1.innerHTML = "钢铁是怎么炼成的";
         var td2 = document.createElement("td");
         td2.innerHTML = "￥50";
         tr.appendChild(td1);
         tr.appendChild(td2);
         var table1 = document.getElementById("myTable");
         var tr1 = document.getElementById("tr1");
         table1.firstElementChild.insertBefore(tr,tr1);*/

        /*2：html Dom*/
        var table = document.getElementById("myTable");
        var row = table.insertRow(2);                       //定义一行，2是从上数012，就是第三行增加一行
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);                      //增加两个单元格
        cell1.innerHTML = "钢铁是怎样炼成的";
        cell2.innerHTML = "$50";
    }
    function delete2() {
        /*core DOM*/
        /*var tr1 = document.getElementById("tr1");
         var table = document.getElementById("myTable");
         table.firstElementChild.removeChild(tr1);*/

        /*HTML DOM*/
        var table = document.getElementById("myTable");
        table.deleteRow(1);
    }
    function changeTitle() {
        var table = document.getElementById("myTable");
        table.rows[0].cells[0].align = "center";
        table.rows[0].cells[1].align = "center";
    }

    function removeRow(obj) {
        var index = obj.parentNode.parentNode.rowIndex;
        var table = document.getElementById("myTable");
        table.deleteRow(index);
    }
</script>
</html>

鼠标事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标事件</title>
</head>
<body>
<button onclick="myClick()">鼠标单击</button>
<button ondblclick="myDBClick()">鼠标双击</button>
<button onmousedown="myMouseDown()" onmouseup="myMouseUp()">鼠标按下和抬起</button>
<button onmouseover="myMouseOver()" onmouseout="myMouseOut()">鼠标悬浮和离开</button>
<button onmousemove="myMouseMove()">鼠标移动</button>
<button onmouseenter="myMouseEnter()" onmouseleave="myMouseLeave()">鼠标进入和离开</button>
</body>
<script>
    function myClick() {
        console.log("你单击了按钮！");
    }
    function myDBClick() {
        console.log("你双击了按钮！");
    }
    function myMouseDown() {
        console.log("鼠标按下了！");
    }
    function myMouseUp() {
        console.log("鼠标抬起了！");
    }
    function myMouseOver() {
        console.log("鼠标悬浮！");
    }
    function myMouseOut() {
        console.log("鼠标离开！")
    }
    function myMouseMove() {
        console.log("鼠标移动！")
    }
    function myMouseEnter() {
        console.log("鼠标进入！")
    }
    function myMouseLeave() {
        console.log("鼠标离开！")
    }

</script>
</html>

键盘事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
</head>
<body>
<input id="name" type="text" onkeydown="myKeyDown(this.id)" onkeyup="myKeyUp(this.id)">
</body>
<script>
    /*输出输入的字符*/
    function myKeyDown(id) {
        console.log(document.getElementById(id).value);
    }
    /*按键结束，字体转换为大写*/
    function myKeyUp(id) {
        var text = document.getElementById(id).value;
        document.getElementById(id).value = text.toUpperCase();
    }
    /*还有个keypress：某个按键被按下并松开，与keydown对应*/
</script>
</html>

HTML事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<script>
        function loaded() {
            var name1 = document.getElementById("name");
            name1.onclick = function () {
                alert("洗刷刷");
            }
        };
    </script>-->
    <style>
        #container{
            height: 1000px;
            background-color: aqua;
        }
    </style>
    <title>HTML事件</title>
</head>
<body onload="loaded()">
<input type="text" id="name" onselect="mySelect(this.id)">
<input type="text" id="name2" onchange="myChange(this.id)">
<input type="text" id="name3" onfocus="myFocus()">
<div id="container"></div>
</body>
<script>
    window.onload = function () {
      console.log("文档加载完毕！");
    };
    /*window.onunload = function () {
        alert("文档被关闭！");
    };*/
    function mySelect(id) {
        var text = document.getElementById(id).value;
        console.log(text);
    }
    function myChange(id) {
        var text = document.getElementById(id).value;
        console.log(text);
    }
    function myFocus() {
        console.log("得到光标！");
    }
    window.onresize = function () {
        console.log("窗口变化！")
    };
    var name1 = document.getElementById("name");
    name1.onclick = function () {
        alert("洗刷刷");
    };
    window.onscroll = function () {
        console.log("滚动条滚动")
    }

</script>
</html>

事件模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件模型</title>
</head>
<body>
<!--脚本模型：行内绑定-->
<button onclick="javascript:alert('Hello')">Hello!</button>

<!--内联模型-->
<button onclick="showHello()">Hello2!</button>

<!--动态绑定-->
<button id="btn3">Hello3!</button>
</body>
<script>
    /*内联模型*/
    function showHello() {
        alert("Hello");
    }

    /*动态绑定*/
    var btn3 = document.getElementById("btn3");
    /*DOM0:
     同一个元素，同类事件只能添加一个；
     如果添加多个，后面添加的会覆盖之前添加的*/
    /*btn3.onclick =function () {
     alert("hello")
     };
     btn3.onclick =function () {
     alert("hello5")
     };*/

    /*DOM2:
     可以给同一个元素添加多个同类事件*/
    /*btn3.addEventListener("click", function () {
     alert("Hello1")
     });
     btn3.addEventListener("click", function () {
     alert("Hello2")
     });*/
    /*DOM0与DOM2可以运行看看差别就明白了*/

    /*不同浏览器的兼容写法*/
    if (btn3.attachEvent()) {/*IE*/
        btn3.attachEvent("onclick", function () {
            alert("IE hello")
        });
    } else {                    /*W3C*/
        btn3.addEventListener("click", function () {
            alert("W3C hello")
        })
</script>
</html>

事件冒泡及捕获

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #div1 {
            width: 400px;
            height: 400px;
            background-color: red;
        }

        #div2 {
            width: 300px;
            height: 300px;
            background-color: yellow;
        }

        #div3 {
            width: 200px;
            height: 200px;
            background-color: blue;
        }

        #div4 {
            width: 100px;
            height: 100px;
            background-color: #4D2E83;
        }

    </style>
    <title>事件冒泡</title>
</head>
<body>
<div id="div1">
    <div id="div2">
        <div id="div3">
            <div id="div4">

            </div>
        </div>
    </div>
</div>
</body>
<script>
    /*事件冒泡：事件的触发方向是从子元素往父元素
                子元素的事件发生以后，会引发父元素同类事件
     * 事件捕获：事件的触发方向是从父元素往子元素                 在每个var后边加了个,true*/
    /*var div1 = document.getElementById("div1");
    div1.addEventListener("click", function () {
        alert("div1")
    }, true);
    var div2 = document.getElementById("div2");
    div2.addEventListener("click", function () {
        alert("div2")
    }, true);
    var div3 = document.getElementById("div3");
    div3.addEventListener("click", function () {
        alert("div3")
    }, true);
    var div4 = document.getElementById("div4");
    div4.addEventListener("click", function () {
        alert("div4")
    }, true);*/




    /*在function里面加event，后边加event.stopPropagation();就使得事件冒泡结束*/
    var div1 = document.getElementById("div1");
    div1.addEventListener("click", function () {
        alert("div1")
    });
    var div2 = document.getElementById("div2");
    div2.addEventListener("click", function (event) {
        event.stopPropagation();
        alert("div2")
    });
    var div3 = document.getElementById("div3");
    div3.addEventListener("click", function (event) {
        event.stopPropagation();
        alert("div3")
    });
    var div4 = document.getElementById("div4");
    div4.addEventListener("click", function (event) {
        event.stopPropagation();
        alert("div4")
    });
</script>
</html>

阻止默认事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默认事件</title>
</head>
<body>
<a href="https://www.baidu.com" onclick="stopA(event)">baidu</a>
</body>
<script>
    /*阻止超链接的默认事件*/
    function stopA(event) {
        if (event.preventDefault()){
            event.preventDefault();         //W3C
        }else{
            event.returnValue=false;        //IE
        }
        alert("老子就是不让你跳转")
    }
</script>
</html>

相关阅读:
C/C++ 链接汇总
 C# 网页操作
 Win10屏幕开始菜单图标丢失修复方案无意中发现的...
AI 人工智能
 GIT 命令
 Layui / WEB UI
PHP DES解密对应Java SHA1PRNG方式加密
 视频参数介绍及关系《转》
分布式时系统/服务数据一致性方案
 JS埋点小结
原文地址：https://www.cnblogs.com/haloxinghong/p/7307716.html