分离绑定事件

使用分离方式绑定元素事件可以使用页面元素与JavaScript代码完全分离,有利于代码分工和维护,是目前开发主流,分为两步:

1.获取需要绑定事件的元素

　　语法:根据id属性值取元素节点

var btn = document.getElementById("");

2.在元素节点上动态添加事件

　　语法:使用点语法绑定事件名称

btn.onlick = function(){};

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <button id="btn" onclick="console.log('hello world')">

        click me

    </button>

    <script>

        // 通过id查找页面元素

        var btn = document.getElementById("btn");

        // 使用对象.属性方式添加事件

        console.log(btn.id);

        btn.onclick = function () {

        // 按钮被点击后执行的功能

        console.log('hello world');

        }

    </script>

</body>

</html>

案例:验证一个输入值是否是数字

使用语句输入方法获取一个输入值

　　检测输入值是否为数字

　　如果是一个数字,则在控制台显示"数字",否则显示"非数字"。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>案例</title>

</head>

<body>

    <button id='btn'>开始检测</button>

    <script>

        // var target = prompt('请输入一个值');

        //检测输入的值是否为数字

        // console.log(typeof target);

        // isNaN(target);判断target转数字的结果

        // 如果转换成功 返回false 如果转换失败返回true

        // var res = isNaN(target);

        // console.log(res)

        // isNaN(target)?con.console.log('非数字'):console.log('数字');

        // 点击按钮接收用户输入 判断结果是否是数字

        var btn = document.getElementById(btn);

        btn.onclick = function(){

            var target = prompt('请输入一个值');

            isNaN(target)?con.console.log('非数字'):console.log('数字');

        }

    </script>

</body>

</html>

JavaScript04的更多相关文章

  1. The Linux Process Principle，NameSpace, PID、TID、PGID、PPID、SID、TID、TTY

    目录 . 引言 . Linux进程 . Linux命名空间 . Linux进程的相关标识 . 进程标识编程示例 . 进程标志在Linux内核中的存储和表现形式 . 后记 0. 引言 在进行Linux主 ...

随机推荐

  1. blender Text on Curve Text on Sphere

    Text on Curve Shift + A 添加一个 BezierCurve Shift + A 添加一个 Text,Tab 编辑,再次 Tab 退回 Object Mode 选中 Text,Ad ...

  2. [考试总结]noip模拟43

    这个题目出的还是很偷懒.... 第一题...第二题...第三题...四.... 好吧... 这几次考得都有些问题,似乎可能是有些疲惫,脑袋也是转不太动,考完总觉得自己是能力的问题,但是改一分钟之后会发 ...

  3. throw关键字

    1.基础用法 2.方法中加合法校验,告知方法的调用者 数组越界判断 3.一切皆为对象,创建的是运行期对象,则可以不处理(throws/try catch),直接交给JVM处理(打印并终止程序) 4.O ...

  4. Jsoup快速查询

    一.selector选择器 二.Xpath查询

  5. 模拟BS服务器

    一.模拟BS服务器分析 二.BS模拟服务器代码实现 图片都是单独请求,后台单独线程,这边是通过构造方法传入的Runable接口的实现类匿名对象创建线程: 创建本地输入流读取到网络输出流传过来的信息再放 ...

  6. 第24篇-虚拟机对象操作指令之getfield

    getfield指令表示获取指定类的实例域,并将其值压入栈顶.其格式如下: getstatic indexbyte1 indexbyte2 无符号数indexbyte1和indexbyte2构建为(i ...

  7. sed 找出含有某个字符串的行 注释掉

    1.源文件例子 [root@node1 ~]# cat /etc/fstab # # /etc/fstab # Created by anaconda on Mon Mar 1 18:32:15 20 ...

  8. 羽夏看Win系统内核——环境搭建

    写在前面   此系列是本人一个字一个字码出来的,包括示例和实验截图.由于系统内核的复杂性,故可能有错误或者不全面的地方,如有错误,欢迎批评指正,本教程将会长期更新. 如有好的建议,欢迎反馈.码字不易, ...

  9. Roslyn（CSharpScript）.Net脚本编译引擎使用过程内存增涨与稳定的方式

    目       录 1.      引用程序集... 1 2.      内存增涨的情况... 2 3.      内存稳定的情况... 4 1.   引用程序集 Roslyn 是微软公司开源的 .N ...

  10. 手把手教你调试SpringBoot启动 IoC容器初始化源码，spring如何解决循环依赖

    授人以鱼不如授人以渔,首先声明这篇文章并没有过多的总结和结论,主要内容是教大家如何一步一步自己手动debug调试源码,然后总结spring如何解决的循环依赖,最后,操作很简单,有手就行. 本次调试 是 ...