原生js之dom表单改变和鼠标常用事件

原生JavaScript之dom表单改变和鼠标常用事件

前言
关于onchange方法
out 、leave、over、down、up鼠标方法

前言

那么好,本次我们聊聊表单改变时如何利用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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

相关阅读:
react的样式处理方案及样式透穿(styled-components)
【简历优化】如何写好项目的亮点难点？项目经历怎么写最好？
idea 创建maven父子工程(spring cloud 组件教程大全一)
使用sipParseArgs/sipBuildResult进行python/C++对象的转换
【C++】内存管理
基于FPGA的HyperRam接口设计与实现
MySQL知识点归纳总结（一）
setContentView源码解析
leetcode-151. 颠倒字符串中的单词-20220823
纯科普：亚马逊常见认证要求汇总

原文地址：https://blog.csdn.net/lplovewjm/article/details/132735486