前言
那么好,本次我们聊聊表单改变时如何利用onchange方法来触发input改变事件以及鼠标常用的滑入滑出,点击down和点击up事件.
关于onchange方法
onchange方法在鼠标输入完后点击任何非输入框位置时触发.触发时即可改变原有输入框的值.
out 、leave、over、down、up鼠标方法
当用户使用onmouseleave或者onmouseout方法时,是鼠标移出鼠标事件所在的div中.
移入鼠标事件则为,onmouseover事件.
点击鼠标未松开事件是,onmousedown,松开事件为onmouseup.
以下做一个小案例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="text" id="frames" onchange="myfunction()"> <div id="mouse" onmouseleave="leave(this)" onmouseover="over(this)" onmouseout="out(this)"> 你好 </div> <div id="mouses" onmousedown="down(this)" onmouseup="up(this)">鼠标未被点击</div> <script> // input输入完小写变大写 function myfunction(){ let a=document.getElementById('frames') // 小写变大写 a.value=a.value.toUpperCase() } function leave(obj){ obj.innerHTML='鼠标leave' } function over(obj){ obj.innerHTML="鼠标over" } function out(obj){ obj.innerHTML="鼠标out" } function down(obj){ obj.innerHTML="鼠标down" } function up(obj){ obj.innerHTML="鼠标up" } </script> </body> </html>
