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)