分离绑定事件

使用分离方式绑定元素事件可以使用页面元素与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. webservice学习总结（一）-- WebService相关概念介绍

    一.WebService是什么? 基于Web的服务:服务器端整出一些资源让客户端应用访问(获取数据) 一个跨语言.跨平台的规范(抽象) 多个跨平台.跨语言的应用间通信整合的方案(实际) 二.为什么要用 ...

  2. Intel® QAT 加速卡之IPSec示例

    Intel QAT 加速卡之IPSec示例 文章目录 Intel QAT 加速卡之IPSec示例 1. QAT处理IPSec入站报文 2. QAT处理IPSec出站报文 3. 组织架构 4. 示例源码 ...

  3. python获取邮件信息

    在项目的Terminal中注册模块pypiwin32 python -m pip install pypiwin32 import win32com.client outlook = win32com ...

  4. C# List集合类常用操作：四、删除

    Clear() 从 List<T> 中移除所有元素. List<Employees> employees = new List<Employees>(); empl ...

  5. axios与vue-resource

    在Vue项目中前后端交互时,早期Vue使用Vue-resource实现异步请求.从Vue2.0之后就不再对vue-resource进行更新,Vue官方推荐使用axios. vue-resource V ...

  6. PHP中的MySQLi扩展学习（二）mysqli类的一些少见的属性方法

    虽说是少见的一些属性方法,但是可能还是有不少同学在日常的开发中使用过,这里只是学习了可能相对来说我们用得比较少的一些 mysqli 的属性或方法.就当是扩展一下自己的知识体系. 切换用户 首先就是切换 ...

  7. axios的简单的使用

    Axios 是什么? Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中. 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中).在服务端 ...

  8. jmeter加密解密（加密篇）

    最近刚好在弄jmeter加密解密,可以分享下.(有一段时间没写了,有点不知道从何写起,这篇写的有点乱o(╥﹏╥)o) 需求是:接口中的请求体的部分参数需要先加密再请求,返回的结果中部分字段需解密. 1 ...

  9. Nginx禁止ip方式访问80、443端口

    在nginx.conf配置文件中 include /etc/nginx/conf.d/*.conf; 之前加入以下内容 server { listen 80 default; listen 443 d ...

  10. JDK原生反序列化利用链7u21

    前言 JDK 7u21以前只粗略的扫过一眼,一看使用了AnnotationInvocationHandler,就以为还是和 CC1 一样差不多的利用方式,但最近仔细看了下利用链发现事情并不简单- 7u ...