JavaScript注册事件

最新推荐文章于 2024-05-15 22:16:44 发布

禾子逸

最新推荐文章于 2024-05-15 22:16:44 发布

阅读量302

点赞数

分类专栏： JavaScript 文章标签： javascript js

本文链接：https://blog.csdn.net/qq_43093129/article/details/115908414

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1. 两种注册事件的方式

第一种方式：在标签中使用事件句柄，在事件句柄后编写js代码，事件句柄对应的事件发生之后，“注册”在事件句柄当中的代码被监听器调用。注意，这种方式代码顺序有要求！

    <!--注册事件的第一种方式：在标签中使用事件句柄-->
    <script>
        /*sayHello()函数在页面打开的时候并不会执行，只是当页面打开的过程中完成对事件的绑定，
        * 完成对事件的注册，以后只有当该事件发生之后sayHello()函数才会执行，此函数称为回调函数（callback function）
        * 回调函数特点：监听器负责调用函数，程序员不负责。事件发生后监听器会调用此回调函数*/
        function sayHello() {
            console.log('hello')
        }
    </script>
    <input type="text" onclick="sayHello()">

第二种方式：利用获取节点id的方式来绑定事件

<body>
<!--这段代码input标签必须在script标签之前，不然mbt为undefined，程序报错-->
<input type="button" value="触发绑定事件" id="mbt">
<script>
    sum = function () {
        console.log("执行了sum函数");
    };
    /*根据id获取节点对象*/
    var newbt = document.getElementById("mbt");
    newbt.onclick = sum;
</script>
</body>

如果希望以上代码中，input标签在script之后还能正常运行，可以考虑使用onload方式

<body onload="pageOnload()">
<script>
    function pageOnload() {
        /*页面加载完成之后才会执行下面的代码，此时mbt这个id已经加载完成了*/
        sum = function () {
            console.log("执行了sum函数");
        };
        /*根据id获取节点对象*/
        var newbt = document.getElementById("mbt");
        newbt.onclick = sum;
    }
</script>
<input type="button" value="触发绑定事件" id="mbt">
</body>

以上的代码onload仍是第一种绑定方式，可以继续优化：

<!--优化onload绑定事件-->
<body>
<script>
    function pageOnload() {
        console.log("页面加载后执行此函数");
    }
    /*页面打开的时候，会执行下面的代码，作用：将回调函数pageOnload注册到load事件中*/
    /*页面加载完毕后，会发现load事件从而执行绑定的对应函数【回调函数】*/
    window.onload = pageOnload;
</script>
</body>

综上，建议使用onload绑定事件，以避免第一种方式可能出现的代码顺序问题，下面是标准格式：

<!--优化onload绑定事件-->
<!--优化onload绑定事件-->
<body>
<script>
    /* 匿名函数形式 */
    window.onload = function (ev) {
        /* 给按钮1绑定鼠标单击事件属性 */
        var button1 = document.getElementById("button1");
        button1.onclick = function (ev2) {
            console.log("button1");
        };

        /* 给按钮2绑定鼠标单击事件属性 */
        var button2 = document.getElementById("button2");
        button2.onclick = function (ev2) {
            console.log("button2");
        };

        /* 上面的代码也可以简写成下面的形式 */
        /*
        document.getElementById("button1").onclick = function () {  };
        document.getElementById("button2").onclick = function (ev2) {  };
        */
    }
</script>
<input type="button" value="按钮1" id="button1">
<input type="button" value="按钮2" id="button2">
</body>

2. 根据id获取节点访问属性

document：代表整个HTML文档，是DOM的顶级对象
window：代表整个浏览器窗口，是BOM的顶级对象
getElementById：根据id获取节点属性，如 var elem = document.getElementById("节点id"); 获取此节点对象后，可以引用该节点（即标签）的任何属性【通过 . 的方式】。如 elem.type = "text";

3. 案例：捕捉回车键【捕捉键值】

监听器调用回调函数时会传过来一个事件对象，可以在function中使用该对象
keyCode是键盘事件对象的属性，根据该属性可以获取输入的键值、
键盘回车键是13，ESC键是27

<!--捕捉回车键-->
<body>
<script>
    /* 使用onload解决代码顺序问题 */
    window.onload = function (ev) { 
        /* 使用keydown捕捉键盘按下事件 */
        document.getElementById("load").onkeydown = function (ev2) { 
            if (ev2.keyCode == 13)
                console.log("捕捉到回车键，登陆中");
            else if (ev2.keyCode == 27)
                console.log("捕捉到ESC键，退出中");
        }
    }
</script>
<input type="text" value="" id="load">
</body>

禾子逸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript注册事件

1. 两种注册事件的方式第一种方式：在标签中使用事件句柄，在事件句柄后编写js代码，事件句柄对应的事件发生之后，“注册”在事件句柄当中的代码被监听器调用。注意，这种方式代码顺序有要求！  <script> /*sayHello()函数在页面打开的时候并不会执行，只是当页面打开的过程中完成对事件的绑定， * 完成对事件的注册，以后只有当该事件发生之后sayHello()函数才会
复制链接

扫一扫