那么好,本次我们聊聊表单改变时如何利用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>
