分离绑定事件

使用分离方式绑定元素事件可以使用页面元素与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. Dockerfile优化——supervisor服务

    一.理解supervisor(supervisor服务不仅在容器中可用,在宿主机中也适用) 1.Dockerfile中的CMD可以指定启动容器后执行的第一个命令,但是当有多个服务进程需要启动的时候,就 ...

  2. jq的slideToggle效果

    slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态. 如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素. 例子:一个简单的下拉菜单效果----& ...

  3. Spring事务管理回滚问题

    Spring事务管理不能回滚问题 在前段时间学习SpringMVC的练习中,碰到声明式事务管理时,事务不能回滚的情况,通过查看博客和资料,解决了问题. 原因 导致Spring事务管理不能回滚的原因有两 ...

  4. ❤️❤️用最简单的方法在Webstorm中打开已存在项目 和 新建Vue项目 (亲测实用)❤️❤️

    ​ 目录 一:打开已存在项目时 二:新建一个vue项目 使用webstorm创建vue项目创建vue项目各个公司用的工具都不一样 最常见的有HBuilder X,WebStorm,Visual Stu ...

  5. 驱动IO模型-select

    新人学习,欢迎指正 部分select.c代码 应用层 select(maxfd+1,&rfds,NULL,NULL,NULL); -------------------(系统调用)------ ...

  6. Docker入门系列之一：什么是Docker？

    原文作者:Jeff Hale 原文地址:https://towardsdatascience.com/learn-enough-docker-to-be-useful-b7ba70caeb4b 翻译: ...

  7. 在PHP中灵活使用foreach+list处理多维数组

    先抛出问题,有时候我们接收到的参数是多维数组,我们需要将他们转成普通的数组,比如: $arr = [ [1, 2, [3, 4]], [5, 6, [7, 8]], ]; 我们需要的结果是元素1变成1 ...

  8. css3 横屏

    @media screen and (orientation: portrait) { html{ width : 100vmin; height : 100vmax; } body{ width : ...

  9. jmeter 元件详细介绍

    一.基本介绍 可以进行功能测试.性能测试.自动化测试. 二.配置元件介绍 线程组:threads 虚拟用户数,设置Jmeter按照什么场景运行,是一系列线程的集合,每一个线程都代表一个正在使用应用程序 ...

  10. three.js 添加html内容、文本

    需求: 1.在场景内添加html元素并动态更新 2.html内容需跟随场景变化 方案: 新加方案:https://www.zhihu.com/question/49929467/answer/1186 ...