关于js事件的一些注意点

最新推荐文章于 2022-03-17 00:27:23 发布

yunzhongxicao

最新推荐文章于 2022-03-17 00:27:23 发布

阅读量120

点赞数

分类专栏： Web前端学习

本文链接：https://blog.csdn.net/yunzhongxicao/article/details/104336102

版权

Web前端学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>IFE ECMAScript</title>
</head>
<body>
<input id="first-number" type="number" value="0" placeholder="第一个数字">
<input id="second-number" type="number" value="0" placeholder="第二个数字">
<button id="add-btn" >加</button>
<button id="minus-btn" >减</button>
<button id="times-btn" >乘</button>
<button id="divide-btn" >除</button>
<p id="result">运算结果</p>
<script>
    var num1 = document.getElementById('first-number');
    var num2 = document.getElementById('second-number');

    function add() {
        document.getElementById('result').innerHTML = Number(num1.value)+Number(num2.value);
    }

    function min() {
        document.getElementById('result').innerHTML =Number (num1.value)- Number(num2.value);
    }

    function cheng() {
        document.getElementById('result').innerHTML = Number(num1.value)* Number(num2.value);
    }

    function chu() {
        document.getElementById('result').innerHTML = Number(num1.value)/ Number(num2.value);
    }

    document.getElementById("add-btn").onclick = add;
    document.getElementById("minus-btn").onclick = min;
    document.getElementById("times-btn"). onclick = cheng;
    document.getElementById("divide-btn").onclick = chu;


</script>
</body>

这是一个很简单的代码，但是我调了很久，也有一开始学业务不熟的原因。
注意点：
1、获取input框的输入这个操作是时时更新的，也就是说input框元素对应的值都是当前最新值，也就不需要每次点击时再进行一次获取操作，直接在最开始定义一个变量是input框元素，后面每个函数引用此元素的值的都是最新值。

更新：
在这里插入图片描述
一般定义的时候定义这个元素本身，而不去定义元素的value，以此为例，如果一开始直接定义

var dec_number = document.getElementById("dec-number").value

那么dec_number的值一直会是初始值，因为编译是从上到小编译，后面引用的时候没有再去查找表单内容的操作；
如果定义这个元素，后面每次点击按钮，都会调用这个函数，而函数参数是这个元素的value，这样就有了获取表单内容的操作，也就保证了每次的参数都是表单的最新值；

2、如果直接在HTML文件里面添加事件，应该是这样：

<button id="add-btn" onclick="add()">加</button>
<button id="minus-btn" onclick="min()">减</button>
<button id="times-btn" onclick="cheng()">乘</button>
<button id="divide-btn" onclick="chu()">除</button>

onclick后面的函数要用括号，相当是是进行一次操作；
如果是在script标签里面添加事件，应该是这样：

document.getElementById("add-btn").onclick = add;
    document.getElementById("minus-btn").onclick = min;
    document.getElementById("times-btn"). onclick = cheng;
    document.getElementById("divide-btn").onclick = chu;