js不用获取id属性, 直接可以用id名做事件绑定

最新推荐文章于 2024-04-29 21:35:15 发布

chengsiyuan1005

最新推荐文章于 2024-04-29 21:35:15 发布

阅读量1.4k

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_43665686/article/details/125793494

版权

以下用一个实际栗子说明问题:

// 定义两个输入框, 输入两个整数, 获取其最大公约数和最小公倍数

标签内代码:

 <body>
    <div class="root">
        <input type="text" id="one">
        <input type="text" id="two">
        <button id="btn"></button>
        <div id="put"></div>
    </div>
</body>

js代码:

// 不用id绑定 btn和put
btn.onclick = function () {
    var oneEL = document.getElementById('one').value;
    var twoEL = document.getElementById('two').value;
    var max = 0, min = 0;
    oneEL > twoEL ? max = oneEL : max = twoEL;
    oneEL < twoEL ? min = oneEL : min = twoEL;
    // divisor
    var divisor = 0;
    for (var i = 1; i <= min; i++) {
        if (oneEL % i == 0 && twoEL % i == 0) {
            divisor = i;
        }
    }
    // multiple
    var multiple = 0;
    for (var i = max; i <= oneEL * twoEL; i++) {
        if (i % oneEL == 0 && i % twoEL == 0) {
            multiple = i;
            break;
        }
    }
    put.innerHTML = ('最大公约数为: ' + divisor + '最小公倍数为: ' + multiple);
}

// 用id绑定 btn和put
// 绑定后btn--btnEL, put--putEL
var btnEL = document.getElementById('btn');
var putEL = document.getElementById('put');
btnEL.onclick = function () {
    var oneEL = document.getElementById('one').value;
    var twoEL = document.getElementById('two').value;
    var max = 0, min = 0;
    oneEL > twoEL ? max = oneEL : max = twoEL;
    oneEL < twoEL ? min = oneEL : min = twoEL;
    // divisor
    var divisor = 0;
    for (var i = 1; i <= min; i++) {
        if (oneEL % i == 0 && twoEL % i == 0) {
            divisor = i;
        }
    }
    // multiple
    var multiple = 0;
    for (var i = max; i <= oneEL * twoEL; i++) {
        if (i % oneEL == 0 && i % twoEL == 0) {
            multiple = i;
            break;
        }
    }
    putEL.innerHTML = ('最大公约数为: ' + divisor + '最小公倍数为: ' + multiple);
}

(二者得到结果相同)

其中, 不进行id绑定时, 进行了鼠标点击事件(onclick)和输入事件(innerHTML)时, 也同样可以执行成功!
二者得到结果相同, 由此可知, js获取id属性时, 可以不获取, 直接进行事件绑定!

深层原因:
为什么可以不获取?
HTML5规范文档规定: 若一个元素符合下面两条规则中的任一条,则window对象中必须要有与之对应的一个属性,属性值就是这个对象.

1.如果一个元素拥有ID属性,那么ID属性的属性值就会成为window对象的属性名.
2.如果一个元素拥有name属性,那么name属性的属性值就会成为window对象的属性名.但这个元素的标签名必须是: a, applet, area, embed, form, frame, frameset, iframe, img, object,其中的一个.
故满足此二者条件的id属性可以在不获取时直接进行使用.