那么好,本次我们聊聊表单改变时如何利用onchange方法来触发input改变事件以及鼠标常用的滑入滑出,点击down和点击up事件.
关于onchange方法
onchange方法在鼠标输入完后点击任何非输入框位置时触发.触发时即可改变原有输入框的值.
out 、leave、over、down、up鼠标方法
当用户使用onmouseleave或者onmouseout方法时,是鼠标移出鼠标事件所在的div中.
移入鼠标事件则为,onmouseover事件.
点击鼠标未松开事件是,onmousedown,松开事件为onmouseup.
以下做一个小案例:
javascript
<!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>