分离绑定事件

使用分离方式绑定元素事件可以使用页面元素与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. Excel 快速跳转到工作表

    新建 vba 模块 Sub GotoSheet() tname = InputBox("input table name") If StrPtr(tname) = 0 Then E ...

  2. python类、继承

    Python 是一种面向对象的编程语言.Python 中的几乎所有东西都是对象,拥有属性和方法.类(Class)类似对象构造函数,或者是用于创建对象的"蓝图". 一.python ...

  3. Docker - 解决 docker push 上传镜像报：denied: requested access to the resource is denied 的问题

    问题背景 在 Linux 已登录自己的 Docker hub 账号 上传本地镜像但是报错了 docker push tomcat 解决方案 docker tag tomcat poloyy/tomca ...

  4. HCNP Routing&Switching之IS-IS报文结构和类型

    前文我们了解了IS-IS动态路由协议基础相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15249328.html:今天我们来聊一聊IS-IS动态路由协 ...

  5. 反射应用和获取Class对象的三种方式

    一.写一个"框架",可以创建任何对象运行任何方法 1.配置文件 2.使用类加载器ClassLoader,Properties集合是可以和IO流结合使用完成读取和写入数据的集合,方法 ...

  6. 网络层协议、ARP攻击

    一.IP数据包格式 二.ICMP协议介绍 PING命令 三.ARP协议介绍 四.ARP攻击原理 一.IP数据包格式 网络层的功能 定义了基于IP协议的逻辑地址 连接不同的媒介类型 选择数据通过网络的最 ...

  7. 网络游戏逆向分析-6-使用背包物品call

    网络游戏逆向分析-6-使用背包物品call 首先,大家在处理网络游戏的时候,一定得利用好发包函数,因为他就是整个网络游戏的关键. 处理办法: 这里还是直接给发包打断点来处理. 就像我们之前处理喊话函数 ...

  8. Linux下运行bash脚本显示“: /usr/bin/env: "bash\r": 没有那个文件或目录

    用 ./ 运行bash脚本文件出现 报错信息 /usr/bin/env: "bash\r": 没有那个文件或目录 错误原因:这主要是因为bash后面多了\r这个字符的原因.在lin ...

  9. Linux系列（33）- rpm命令管理之RPM包校验提取（5）

    校验 格式 rpm -V 已安装的包名 选项: - -V:校验指定RPM包中的文件(verify) 例子 rpm -V httpd 后, 无任何提示, 代表该文件没有被做任何修改 # 判断本地的apa ...

  10. Django边学边记—视图

    一. url (一)配置 在项目/settings.py中通过ROOT_URLCONF指定url配置 ROOT_URLCONF = 'XXXX.urls' 打开 项目/urls.py 配置 (二)语法 ...