day18
JavaScript事件基础
事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。
HTML事件
直接在HTML元素标签内添加时间，执行脚本。
语法：<tag 事件="执行脚本" ></tag>
功能：在HTML元素上绑定事件。
说明：执行脚本可以是一个函数的调用。
this是对该DOM元素的引用
鼠标事件
onload：页面加载时触发
onclick:鼠标点击时触发
onmouseover：鼠标滑过时触发
onmouseout：鼠标离开时触发
onfoucs：获得焦点时触发
onblur：失去焦点时触发
onchange：域的内容改变时发生（一班作用域select或checkbox或radio）
DOM0级事件
1.通过DOM获取HTML元素
2.（获取HTML元素）.事件=执行脚本
语法：ele.事件=执行脚本
功能：在DOM对象上绑定事件
说明：还行脚本可以是一个匿名函数，也可以是一个函数的调用。
不建议使用HTML事件原因：
1.多元素绑定相同时间是，效率低。
2.不建议在HTML元素中写JavaScript代码。
onsubmit:表单中的确认按钮被点击时发生
onmousedown：鼠标按钮在元素上按下时触发
onmousemove：在鼠标指针移动式发生
onmouseup：在元素上松开鼠标按钮时触发
onresize：当调整浏览器窗口的大小时触发
onscroll：拖动滚动条时触发
键盘事件与keyCode属性
onkeydown：在用户按下一个键盘按键时发生
onkeypress：在键盘按键被按下并释放一个键时发生
onkeyup：在键盘按键被松开时发生
keyCode：返回onkeypress、onkeydown或onkeyup事件触发的键的值的
字符代码，或键的代码
onload.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload = function () { var box = document.getElementById('box'); var clicked = function () { alert('clicked!') } box.onclick = clicked; } </script> <style type="text/css"> .box{ cursor: pointer; } </style> </head> <body> <div id="box" class="box">这是一个div</div> </body> </html>
onfocus_onblur.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .left,.tip{ float: left; } .box{ margin-top: 50px; margin-left: 20px; } .tip{ display: none; } </style> <script> window.onload = function () { var phone = document.getElementById('phone'); var tip = document.getElementById('tip'); phone.onfocus = function () { tip.style.display="block"; } phone.onblur = function () { var phoneVal = this.value; if (phoneVal.length == 11 && isNaN(phoneVal) == false) { tip.innerHTML = '<img src="img/right.png" alt="right">'; } else { tip.innerHTML = '<img src="img/error.png" alt="right">'; } } } </script> </head> <body> <div class="box"> <div class="left"> <input type="text" placeholder="请输入手机号" id="phone"> </div> <div class="tip" id="tip"> 请输入有效的手机号 </div> </div> </body> </html>
ononchange.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload = init; function init() { var menu = document.getElementById('menu'); menu.onchange =function () { var bgcolor = this.value; if (bgcolor == "") { document.body.style.background = '#fff'; } else { document.body.style.background = bgcolor; } } } </script> </head> <body> <div class="box"> 请选择页面的背景颜色： <select name="menu" id="menu"> <option value="">请选择</option> <option value="#f00">红色</option> <option value="#0f0">绿色</option> <option value="#00f">蓝色</option> <option value="#ccc">灰色</option> <option value="#ff0">黄色</option> </select> </div> </body> </html>
other.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ background: #f00; width: 200px; height: 200px; } </style> <script> window.onload = function () { var box = document.getElementById('box'); box.onmousedown = function () { console.log("我被按下了") } box.onmousemove = function () { console.log("我移动了"); } box.onmouseup = function () { console.log("我被松开了"); } box.onclick = function () { console.log("我被点击了"); } window.onresize = function () { console.log("我的尺寸变了"); } window.onscroll = function () { console.log("我被拖动了"); } } </script> </head> <body> <div class="box" id="box"></div> </body> </html>
键盘事件和keyCode.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> p span{ color: #f00; } p span em{ font-style: normal; } </style> </head> <body> <div class="box"> <p>您还可以输入<span><em id="count">30</em>/30</span> </p> <textarea id="text" rows="5" cols="50"></textarea> </div> <script> var text = document.getElementById('text'); var count = document.getElementById('count') var total = 30; document.onkeyup = function (event) { var len = text.value.length; var allow = total - len; count.innerHTML = allow; console.log(event.keyCode); } </script> </body> </html>