分离绑定事件

使用分离方式绑定元素事件可以使用页面元素与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. vue 手写倒计时，样式需要自己调。（ 亲测可用，就是没有样式 ）

    先写一个 js 文件,这个文件是工具类文件,需要单独开一个js // 计算出时间戳的具体数据:比如将85400转化为 n天n时n分n秒 export function formateTimeStamp ...

  2. JQ动画

    /* //基本 show([s,[e],[fn]]) 显示元素 hide([s,[e],[fn]]) 隐藏元素 //滑动 slideDown([s],[e],[fn]) 向下滑动 slideUp([s ...

  3. 10分钟学会VS NuGet包私有化部署

    前言 我们之前实现了打包发布NuGet,但是发布后的引用是公有的,谁都可以访问,显然这种方式是不可取的. 命令版本:10分钟学会Visual Studio将自己创建的类库打包到NuGet进行引用(ne ...

  4. element-ui 弹出组件的遮罩层在弹出层dialog模态框的上面

     造成的原因: 因为dialog的组件外层div设置了 position:absolute: 属性所以导致遮罩层会在最上面. 解决方法: 在属性内加上这段代码 :append-to-body=&quo ...

  5. Linux的bg和fg和jobs和nohup命令简单介绍

    我们都知道,在 Windows 上面,我们要么让一个程序作为服务在后台一直运行,要么停止这个服务.而不能让程序在前台后台之间切换.而 Linux 提供了 fg 和 bg 命令,让我们轻松调度正在运行的 ...

  6. djang2.1教育平台02

    在次申明,之所以重做这个资料是因为原幕课教程漏洞太多,新手根本没有办法正常照些学习,我凭着老男孩python 课程基础,重做这个教程 ,更改版本为当前最新版本,为了方法以后的人学习,并不是照着原文照  ...

  7. windows环境下永久修改pip镜像源的方法

    在windows环境下修改pip镜像源的方法 (1)在windows文件管理器中,输入 %APPDATA% (2)会定位到一个新的目录下,在该目录下新建pip文件夹,然后到pip文件夹里面去新建个pi ...

  8. c++ 打包函数教程

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

  9. mysql事务干货详解

    说明: mysql是现在行业中流行的关系型数据库,它的核心是存储引擎.mysql的存储引擎有很多种我们可以通过命令查看如下 SHOW ENGINES 不同版本得到的数据不一样,我们今天说的事务是在 M ...

  10. 3gcms导航，实现当前栏目高亮的办法

    <volist name="menu" id="vo" offset="0" length='8' key='k'> <l ...