JS基础-事件绑定

最新推荐文章于 2023-10-15 15:21:59 发布

linqunbin

最新推荐文章于 2023-10-15 15:21:59 发布

阅读量303

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/linqunbin/article/details/90732027

版权

JavaScript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload = function(){
            /*
            点击按钮后,弹出一些内容
            */
            var btn01 = document.getElementById('btn01');
            /*
            使用 对象.事件 = 函数  的形式绑定相应函数
                它只能同时为一个元素的一个事件绑定一个响应函数.
                不能绑定多个,如果绑定多个,则后面会覆盖前面的.
            */
            // btn01.onclick = function(){
            //     alert(1);
            // }
            // btn01.onclick = function () {
            //     alert(2);
            // }

            /*
                addEventListener()
                -通过这种方法也可以为元素绑定响应函数
                -参数
                    1 事件的字符串,不要on
                    2 回调函数,当事件触发时该函数会调用
                    3 是否在捕获阶段触发事件,需要一个布尔值,一般都传false
                使用addEventListener()可以同时为一个元素的相同事件,同时绑定多个响应函数.
                    这样当事件被触发时,响应函数将会按照函数绑定的顺序执行.
                这个方法不支持IE8及以下的方法
            */
            btn01.addEventListener('click',function(){
                alert(1);
            },false)

            btn01.addEventListener('click', function () {
                alert(2);
            }, false)

            /*
            attachEvent()
            -在IE8中可以使用attachEvent()来绑定事件(其它游览器不支持.)
                -参数
                    1 事件的字符串,要on
                    2 回调函数,当事件触发时该函数会调用 
            这个方法也可以为一个事件绑定多个响应函数,不同的是它是后绑定先执行,执行顺序与addEventListener()相反
            */
            btn01.attachEvent('onclick', function(){
                alert(1);
            })
        }
    </script>
</head>
<body>
    <button id="btn01">点我一下</button>
</body>
</html>

linqunbin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS基础-事件绑定

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
复制链接

扫一扫

专栏目录