HTML事件
<html lang="en"> <head> <meta charset="UTF-8"> <style> #container{ height: 800px; background-color: red; } </style> <!--<script> function loaded() { var name1 = document.getElementById("name"); name1.onclick = function () { alert("洗刷刷"); } }; </script>--> <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>
结果图：
得到括号内的效果
事件模型
<html lang="en"> <head> <meta charset="UTF-8"> <title>事件模型</title> </head> <body> <!--脚本模型：行内绑定--> <button onclick="javascript:alert('Hello')">Hello</button> <!--内联模型--> <button onclick="showHello()">Hello！</button> <!--动态绑定--> <button id="btn">Hello1！</button> </body> <script> function showHello() { alert("Hello！") } var btn = document.getElementById("btn"); /*DOM0：同一个元素，同类事件只能添加一个， 如果添加多个，后面添加的会覆盖之前添加的*/ /*btn.onclick = function () { alert("Hello1!"); };*/ /*DOM2:可以给同一个元素添加多个同类事件*/ /*btn.addEventListener("click",function () { alert("Hello") }); btn.addEventListener("click",function () { alert("Hello1!") });*/ /*不同浏览器的兼容写法*/ if (btn.attachEvent){/*IE*/ btn.attachEvent("onclick",function () { alert("IE Hello") }); }else{ /*W3C*/ btn.addEventListener("click",function () { alert("W3C Hello") }); } </script> </html>
结果图：
事件冒泡
<html lang="en"> <head> <meta charset="UTF-8"> <style> #div1{ 400px; height: 400px; background-color: red; } #div2{ 300px; height: 300px; background-color: yellow; } #div3{ 200px; height: 200px; background-color: darkcyan; } #div4{ 100px; height: 100px; background-color: darkorange; } </style> <title>事件冒泡</title> </head> <body> <div id="div1"> <div id="div2"> <div id="div3"> <div id="div4"> </div> </div> </div> </div> </body> <script> /*事件冒泡：子元素的事件发生以后，会引发父元素同类事件 * 事件捕获：在参数function后面加上参数true；事件的触发方式是从父元素网子元素*/ var div1 = document.getElementById("div1"); div1.addEventListener("click",function () { alert("div1"); }); var div2 = document.getElementById("div2"); div2.addEventListener("click",function () { 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>
结果图：
阻止默认事件
<html lang="en"> <head> <meta charset="UTF-8"> <title>阻止默认事件</title> </head> <body> <a href="http://www.baidu.com" onclick="stopA(event)">百度</a> </body> <script> function stopA(event) { if(event.preventDefault()){ event.preventDefault(); /*w3c*/ }else { event.returnValue = false; /*IE*/ } event.preventDefault(); alert("老子就是不让你跳转！") } </script> </html>
结果图：
