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>
