DOM下的事件 · javascript

[TOC] ### 1. 查看方法體（整個函數） ~~~ <script> function test(){ console.log(1); } document.body.innerHTML = test; </script> ~~~ ### 2. onfocus-->獲取焦點 onblur-->失去焦點 ~~~ 列1 <input type="text" id="txt"> <script> var txt = document.getElementById("txt"); txt.onfocus = function(){ this.style.background = "red" } txt.onblur = function(){ this.style.background = "green"; } </script> 列2 簡書搜索框 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <input type="text" id="txt"> <script> $("#txt").focus(function(){ $(this).animate({width:"300px"},1000) }) $("#txt").blur(function(){ $(this).animate({width:"200px"},1000) }) </script> ~~~ ### 3. 內聯事件 ~~~ <p onclick="go()">hello world</p> <script> function go(){ alert(1); } </script> ~~~ ### 4. onmouseover--鼠標移入 onmouseout--鼠標移除 ~~~ <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet"> <p id="test" class="animated">hello world</p> <script> var test = document.getElementById("test"); test.onmouseover = function(){ this.classList.add("shake"); } test.onmouseout = function(){ this.classList.remove("shake"); } </script> ~~~ ### 5. vue ~~~ <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script> <div id="test" @click="handleClick"> {{msg}} </div> <script> new Vue({ el:"#test", data:{ msg:"hello" }, methods:{ handleClick:function(){ alert(1); } } }) </script> ~~~ ### 6. 窗口加載完畢 ~~~ 通用的頁面加載js有四種方式： 1.window.onload = function(){}; —-js 2.$(window).load(function(){});——Jquery 3.$(document).ready(function(){});–Jquery 4.$(function(){});———————Jquery 其中1和2為同一種，3和4為同一種 1、2表示：頁面全部加載完成（引用文件，圖片）在加載內部函數，且只能執行一個（當文件由多個onload或者load，只加載最后一個）。 3、4在window.onload執行前執行的，在DOM加載完畢后，頁面全部內容（如圖片等）完全加載完畢前被執行。而window.onload會在頁面資源全部加載完畢后才會執行。 PS： DOM文檔加載步驟： 1.解析HTML結構 2.加載外部的腳本和樣式文件 3.解析并執行腳本代碼 4.執行$(function(){})內對應代碼 5.加載圖片等二進制資源 6.頁面加載完畢，執行window.onload <script> // $(document).ready( // ) window.onload = function(){ } 判斷頁面是否加載完畢 if(document.readyState == "complete"){ //coding } </script> ~~~ ### 7. 1 onchange 輸入框的內容發生改變時觸發 ~~~ <input type="text" id="txt"> <script> /* onchange 輸入框的內容發生改變時觸發 input輸入框有value屬性,可以讀寫 */ var txt = document.getElementById("txt"); txt.onchange= function(){ this.value = "change" } </script> ~~~ ### 8. onsubmit事件 ~~~ <form id="submit"> <p><input type="text" id="user"></p> <input type="submit" > </form> <script> // 當表單的submit按鈕被點擊的時候,表單會觸發onsubmit事件 var submit = document.getElementById("submit"); var user = document.getElementById("user"); submit.onsubmit = function(event){ if(user.value=="123"){ window.location.href = "https://www.baidu.com"; } event.preventDefault(); } </script> ~~~ ### 9. event.preventDefault(); ~~~ <a href="https://www.baidu.com" id="test">hello world</a> <script> /* 場景 a,form 阻止默認行為 return false event.preventDefault(); */ var a = document.getElementById("test"); // 在ie9以下event事件作為window的屬性 winddow.event() // chrome,event作為事件的參數 a.onclick = function(event){ try{ //chrome event = event; }catch(err){ //ie9以下 event = window.event(); } window.location.href="https://www.sogou.com/"; // return false; event.preventDefault(); } </script> ~~~ ### 10. onresize ~~~ <script> // onresize-->當瀏覽器的窗口大小發生改變的時候觸發 // window.innerWidth-->獲取瀏覽器窗口的width window.onresize= function(){ alert(window.innerWidth) } </script> ~~~ ### 11. onscroll ~~~ <script> /* onscroll-->窗口滾動的時候觸發 document.documentElement.scrollTop滾動條距離頂部的高度 */ window.onscroll = function(){ // var height = document.documentElement.scrollTop; var height = window.scrollY; console.log(height); } </script> ~~~ ### 12. 獲取窗口寬度和距離頂部高度的方法 ~~~ window.innerWidth-->獲取瀏覽器窗口的width 獲取瀏覽器窗口的距離頂部高度 var height = document.documentElement.scrollTop; var height = window.scrollY; ~~~ ### 13. onkeydown ~~~ <script> /* onkeydown-->用戶按下鍵盤上的一個鍵的時候發生 keyCode-->鍵盤對應的編碼 */ document.onkeydown = function(event){ alert(event.keyCode); } </script> ~~~ ### 14. 事件冒泡 ~~~ <div id="parent"> parent <div id="child">child</div> </div> <script> // 當子元素觸發一個事件的時候,倘若父元素也有相同的事件,父元素的事件也會觸發 var parent = document.getElementById("parent"); var child = document.getElementById("child"); parent.onclick = function(){ alert("parent"); } child.onclick = function(event){ alert("child"); // 阻止事件冒泡 event.stopPropagation(); } </script> ~~~ ### 15. confirm("msg") 彈出框確定取消按鈕 ~~~ <button id="btn">你是否想剁手</button> <script> // window.confirm("msg")-->boolean var btn = document.getElementById("btn"); btn.onclick = function(){ var value = window.confirm("你確定要剁手嗎"); if(value){ window.location.href = "https://www.taobao.com" }else{ window.location.href="http://www.hudazx.cn" } } </script> ~~~ ### 16. prompt 友好的提示 ~~~ <script> var value = window.prompt("輸入你的年齡"); if(value>18){ alert("能進網吧"); } </script> ~~~ ### 17. setInterval(func,time) 間隔一段的時間執行函數 ~~~ <button id="btn">點我</button> <script> /* setInterval(func,time) 間隔一段的時間執行函數 */ var btn = document.getElementById("btn"); btn.onclick = function(){ setInterval(go,1000) } function go(){ alert("請下載") } </script> ~~~ ### 18. clearInterval(name) 清除定時器 ~~~ <script> // num=0,max=10,每過一秒num++,當num>max清除定時器 //clearInterval(name) var num = 0; var max = 3; var timer; timer = setInterval(function () { if (num > max) { clearInterval(timer); } else { alert(num) num++ } }, 100) </script> ~~~ ### 19. setTimeout()-->間隔一定時間執行函數,并且只執行一次 ~~~ <script> // setTimeout()-->間隔一定時間執行函數,并且只執行一次 setTimeout(function(){ alert(1) },1000) </script> ~~~ ### 20. clearTimeout() 清除超時調用 ~~~ <script> // clearTimeout()-->清除超時調用 var num = 0; var max = 3; var timer; function go() { num++; alert(num); if (num > max) { clearTimeout(timer); } else { timer = setTimeout(go, 1000); } } go(); </script> ~~~