JS中事件响应
程序员文章站
2022-06-08 18:34:27
...
这里归类下几种常用的时间响应，用法都很简单而且效果很好。
1.按键触发
这种事件响应很常见了，也是一开始就接触的。举个简单的例子：
<!DOCTYPE html>
<html>
<head>
<title>javascript</title>
</head>
<body>
<p>点击确认查看日期</p>
<button onclick="myFunction()">确认</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML =Date();
}
</script>
</body> 这一类方法的核心就是在button的标签内加入onclick+函数名去触发函数实现功能。
2.鼠标触发或enter触发。
第一种方法的缺点其实是很明显的。比如我要对一批数据进行处理，有很多的输入框，难道我每个框后面都得加个确认键吗？这样对用户的输入时十分不合理的，所以在填写表单或者多输入框时用到鼠标或者enter键触发的效果会效率很多。
<!DOCTYPE html>
<html>
<head>
<title>javascript</title>
</head>
<body>
<p>请输入下列表框</p>
<label>表框一</label><input type="text" id="t1" onchange="myFunction()"/>
<p id="demo1"></p>
<script>
function myFunction() {
var x = document.getElementById("t1").value;
document.getElementById("demo1").innerHTML="表格一的内容是"+x;
}
</script>
</body> 核心是在输入框用onchange调用函数，填写完后鼠标点击任意地方或者按下enter函数就会调用，根据不同的处理出现不同的效果。
3.随时触发
这样的用法还是比较好的，生活中的实例可以去试试看网页的在线进制转换，那个就是不需要你按确认键也不需要你按enter，你随时输它随时转换。包括手机上的计算器也是，实时的计算输入的值。
<!DOCTYPE html>
<html>
<head>
<title>javascript</title>
</head>
<body>
<p>请输入下列表框</p>
<label>表框一</label><input type="text" id="t1" onKeyUp="myFunction()"/>
<p id="demo1"></p>
<script>
function myFunction() {
var x = document.getElementById("t1").value;
document.getElementById("demo1").innerHTML="表格一的内容是"+x;
}
</script>
</body> 上一篇： C#中sealed关键字的作用详解
下一篇： 让MYSQL有效地装载数据