分离绑定事件

使用分离方式绑定元素事件可以使用页面元素与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. Python之requests模块-request api

    requests所有功能都能通过"requests/api.py"中的方法访问.它们分别是: requests.request(method, url, **kwargs) req ...

  2. ELK数据迁移,ES快照备份迁移

    通过curl命令或者kibana快照备份,恢复的方式进行数据迁移 环境介绍 之前创建的ELK 因为VPC环境的问题,需要对ELK从新部署,但是还需要保留现有的数据,于是便有了这篇文档. 10.0.20 ...

  3. C# ASP.NET RAZOR 链接SQLSERVER

    @using System.Data.SqlClient; @using System.Data;//必须引用 <html> <body> <h1>Learn Sq ...

  4. 浅析mybatis中${}和#{}取值区别

    mybatis作为一个轻量级的ORM框架,应用广泛,其上手使用也比较简单:一个成熟的框架,必然有精巧的设计,值得学习. 在使用mybatis框架时,在sql语句中获取传入的参数有如下两种方式: ${p ...

  5. 基本ServletWEB项目

    项目搭建 项目链接https://gitee.com/zhangjzm/smbms.git 前置知识,Servlet JSP 结构图 搭建maven web项目 1.搭建一个maven web项目 2 ...

  6. Linux的基础指令（二）

    目录:   一.列表显示目录内容-ls    二.设置别名-alias      三.统计目录及文件空间占用情况-du       四.创建新目录 -mkdir          五.创建空文件-to ...

  7. git实战-linux定时监控github更新状态（二）

    系列文章 git介绍-常用操作(一)✓ git实战-linux定时监控github更新状态(二)✓ 本文主要内容 如何查看github的本地仓库和远程仓库的同步情况 linux服务器定时监控githu ...

  8. 记录不存在则插入，存在则更新 → MySQL 的实现方式有哪些？

    开心一刻 今天我爸.我.我女儿一起吃饭,我们每人一个鸡腿 女儿问道:爸爸,你吃鸡腿吗 我以为她要把她的鸡腿给我吃,倍感欣慰地说道:我不吃,宝贝 女儿一把抓起我的鸡腿放进了她爷爷的碗里,说道:不吃给爷爷 ...

  9. html 表单input disabled属性提交后台无法获得数据

    在input上加入disabled属性后, 点击提交会遗漏该值, 有两个办法: 一 可以考虑readonly属性,一样的不可修改操作,但是可以提交 二 在提交时 js 代码操作去除input上的dis ...

  10. Appium和Selenium的区别和联系

    https://www.cnblogs.com/lv-lxz/p/11118862.html https://blog.csdn.net/weixin_42139375/article/details ...