分离绑定事件

使用分离方式绑定元素事件可以使用页面元素与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>

 

作者：暄总-tester