分离绑定事件

使用分离方式绑定元素事件可以使用页面元素与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. GoLang设计模式3 - 抽象工厂模式

    之前我们介绍了工厂设计模式,现在我们再看一下抽象工厂设计模式.抽象工程模式顾名思义就是对工厂模式的一层抽象,也是创建型模式的一种,通常用来创建一组存在相关性的对象. UML类图大致如下: 类图比较复杂 ...

  2. H5、C3基础知识笔记

    HTML5 本文内容参考于"HTML5|W3scool"教程 简介 是最新的 HTML 标准,拥有新的语义.图形以及多媒体元素 提供了新的 API 简化了 web 应用程序的搭建 ...

  3. Mybatis（三）——全局配置文件

    二.properties     三.settings 四.typeAilases 这里不做介绍.

  4. Identity简单授权

    详情访问官方文档 以下代码将访问权限限制为任何经过身份验证的用户,这里为控制器级 [Authorize] public class AccountController : Controller { p ...

  5. 迷你DVD

    public class DVD { private int ID;//id private String status;//状态 private String name;//名称 private S ...

  6. 使用zipKin构建NetCore分布式链路跟踪

    本文主要讲解使用ZipKin构建NetCore分布式链路跟踪 场景 因为最近公司业务量增加,而项目也需要增大部署数量,K8S中Pod基本都扩容了一倍,新增了若干物理机,部分物理机网络通信存在问题,导致 ...

  7. pip更新升级和删除包

    pip检测更新命令:pip list –outdated pip升级包命令:pip install --upgrade packagename pip卸载包命令:pip uninstall packa ...

  8. java.lang.SecurityException: MODE_WORLD_READABLE错误解决

    问题描述:运行Android项目有以下报错: 解决方法: 把 MODE_WORLD_READABLE 更换成 MODE_PRIVATE 即可,因为MODE_WORLD_READABLE 模式已经被废弃 ...

  9. 基于Tensorflow + Opencv 实现CNN自定义图像分类

    摘要:本篇文章主要通过Tensorflow+Opencv实现CNN自定义图像分类案例,它能解决我们现实论文或实践中的图像分类问题,并与机器学习的图像分类算法进行对比实验. 本文分享自华为云社区< ...

  10. Zookeeper分布式安装部署

    1. 解压安装 1.1 解压Zookeeper安装包到/opt/module/目录下 tar -zxvf /opt/software/apache-zookeeper-3.6.2-bin.tar.gz ...