• 技术文章 >web前端 >js教程

    JS中事件响应

    不言不言2018-04-04 13:39:21原创791
    本篇文章中的内容是关于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中事件响应的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:javascript 响应 事件
    上一篇:怎么实现不刷新的Ajax分页 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 一文探究Angular中的服务端渲染(SSR)• react怎么实现列表排序• 深入浅析Node中的进程和线程• 一文聊聊Node包管理发展的五个阶段• 带你了解Angular组件间进行通信的几种方法
    1/1

    PHP中文网