首页 / JAVASCRIPT / JS中事件响应

JS中事件响应

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JS中事件响应，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2106字，纯文字阅读大概需要4分钟。

内容图文

本篇文章中的内容是关于js的时间响应，现在在这里分享给大家，有需要的朋友也可以参考一线本篇文章的内容

这里归类下几种常用的时间响应，用法都很简单而且效果很好。

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>

使用方法的核心是oneKeyUp+方法名。除了这个还有关键字onkeypress，oneKeyDown等。个人认为oneKeyUp比较实用。

相关推荐：

JS实现OCX控件的事件响应示例_javascript技巧

整理Javascript事件响应学习笔记_javascript技巧

以上就是JS中事件响应的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的JS中事件响应全部内容，希望文章能够帮你解决JS中事件响应所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/292838.html

来源：【匿名】