標籤：alert containe res add cli nbsp func body 百度
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{ width: 400px; height: 400px; background-color: red; } #div2{ width: 300px; height: 300px; background-color: yellow; } #div3{ width: 200px; height: 200px; background-color: darkcyan; } #div4{ width: 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>
結果圖：
JS學習記錄（事件補充一）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
