DOM事件 · Javascript

[TOC] ## 1.DOM事件(event) > JavaScript與HTML之間的交互式通過事件實現的 ### 1.1 onclick > 點擊事件 ### 1.2onfocus和onblur ~~~ <body> <input type="text" id="txt"> <script> var txt = document.getElementById("txt"); txt.onfocus=function(){ this.style.background="pink"; } txt.onblur = function(){ this.style.background= "green"; } </script> </body> ~~~ ![](https://box.kancloud.cn/5ef5fb7a868f881abc0161f9b7d20ad9_328x256.gif) #### 小項目：實現焦點拉長 ~~~ <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> ~~~ ~~~ <style> input{ width: 200px; height: 30px; outline: none; border-radius: 8px; } </style> ~~~ ~~~ <body> <input type="text" id="txt"> <script> $("#txt").focus(function(){ $(this).animate({width:"300px"},1000) }) $("#txt").blur(function(){ $(this).animate({width:"200px"},1000) }) </script> </body> ~~~ ![](https://box.kancloud.cn/01dc5109a27bda055f0d0aea9fb96901_526x79.gif) ### 1.3 onmouseover和onmouseout > onmouseover //鼠標移到某元素之上 onmouseout //鼠標從某元素移開 ` <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet"> ` ~~~ <body> <p id="test" class="animated">hello world</p> <script> /* onmouseover-->鼠標移入 onmouseout-->鼠標移除 */ var test = document.getElementById("test"); test.onmouseover = function(){ this.classList.add("shake") } test.onmouseout = function(){ this.classList.remove("shake"); } </script> </body> ~~~ ![](https://box.kancloud.cn/dd147737ce12e04bdaff40acffd5c1ab_348x79.gif) ### 1.4onload > 頁面加載時觸發 ### 1.5onchange > 輸入框的內容改變時發生 > onchange事件支持的標簽input,select,textarea ~~~ <body> <input type="text" id="txt"> <script> // input 輸入框有value屬性，可以讀寫 var txt = document.getElementById("txt"); txt.onchange = function(){ this.value = "change" } </script> </body> ~~~ ![](https://box.kancloud.cn/cd979694d1aed008f47b460d8eba5e9c_348x79.gif) ### 1.6onsubmit > 表單中的確認按鈕被點擊時發生 ~~~ <body> <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(){ alert(1); } </script> </body> ~~~ ![](https://box.kancloud.cn/f7bd043b07b685e1fc37157badd46eff_1228x293.gif) ### 1.7onresize >onresize-->當瀏覽器的窗口大小發生改變的時候觸發 > window.innerWidth-->獲取瀏覽器窗口的width ~~~ <body> <script> window.onresize = function(){ alert(window.innerWidth) } </script> </body> ~~~ ![](https://box.kancloud.cn/ec1a908f1f1ddcbeb57d550f8e8c9484_533x609.gif) ### 1.8onscroll > //窗口滾動 ~~~ <style> body{ height: 2000px; } </style> ~~~ ~~~ <body> <script> window.onscroll = function(){ var height = window.scrollY; console.log(height); } </script> </body> ~~~ ![](https://box.kancloud.cn/3c2a58f255e800f9e92a6aae7d7e1a76_1366x609.gif) * 鍵盤事件與KeyCode屬性 ### onkeydown:用戶按下一個鍵盤按鍵時發生 ~~~ <body> <script> document.onkeydown = function(event){ alert(event.keyCode); } </script> </body> ~~~ 效果：當按下某個鍵盤按鈕時出現對應的值 #### 小項目：實現輸入的字數顯示出來 ~~~ <body> <p>你還可以輸入<em id="em" style="color: red">0</em>/300 </p> <textarea id="txt" cols="30" rows="10"></textarea> <script> var em = document.getElementById("em"); var txt = document.getElementById("txt"); txt.onkeydown = function(){ var len = this.value.length; em.innerHTML = len; } </script> </body> ~~~ ![](https://box.kancloud.cn/d4fd30647e5eec23dc6d79627495a1a5_254x253.gif)