分离绑定事件

使用分离方式绑定元素事件可以使用页面元素与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学习总结（四）--基于CXF的服务端开发

    本节将实践目前最流行的第二种web service 发布和调试框架  CXF Apache CXF 是一个开放源代码框架,提供了用于方便地构建和开发 Web 服务的可靠基础架构.它允许创建高性能和可扩 ...

  2. PyCharm——滚动鼠标调整字体大小

  3. 110_SSM框架

    目录 需求分析->功能设计->数据库设计 环境要求 环境 要求 数据库环境 基本环境搭建 创建maven项目 pom.xml添加依赖,添加资源导出 idea连接数据库 提交项目到Git 创 ...

  4. 微信小程序开发正常，真机预览模式错误

    原因是开发时设置了不检查域名是否合法,去后台设置上就可以了

  5. JavaScript中的async/await详解

    1.前言 ​ async函数,也就是我们常说的async/await,是在ES2017(ES8)引入的新特性,主要目的是为了简化使用基于Promise的API时所需的语法.async和await关键字 ...

  6. 剑指 Offer 60. n个骰子的点数

    剑指 Offer 60. n个骰子的点数 把n个骰子扔在地上,所有骰子朝上一面的点数之和为s.输入n,打印出s的所有可能的值出现的概率. 你需要用一个浮点数数组返回答案,其中第 i 个元素代表这 n ...

  7. c++ 打包函数教程

    c++当要重复运行一些代码时可以打包一个函数 当没有返回值时用void打包函数: #include <iostream> #include <stdio.h> using na ...

  8. nginx proxy_next_upstream 与openresty balancer.set_more_tries的使用

    背景 我们这边网关服务使用的 kong,前段时间上线一个服务,这个服务它报错了,产生了502的错误码,追查这个报错的时候发现了网关服务的两个可疑的地方,第一个疑点是我们在Kong上配置的 Retrie ...

  9. PHP的那些魔术方法（二）

    上文中介绍了非常常用并且也是面试时的热门魔术方法,而这篇文章中的所介绍的或许并不是那么常用,但绝对是加分项.当你能准确地说出这些方法及作用的时候,相信对方更能对你刮目相看. __sleep()与__w ...

  10. Linux系列（3） - ls

    作用 ls:查询目录中内容 格式 ls [选项] [文件或目录] 选项 描述 -a 显示所有文件,包括隐藏文件.隐藏文件是.开头的 -l 显示详细信息:ls -l简写为ll,使用频率很高 -d 查看目 ...