javascript中的事件的绑定1

最新推荐文章于 2023-02-16 12:48:12 发布

★Sir

最新推荐文章于 2023-02-16 12:48:12 发布

阅读量257

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Ljs_cn/article/details/52812220

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            #btn{width: 100px;height: 40px;}            
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var oBtn=document.getElementById('btn');

                // 想要下面的鼠标点击事件都实现，但这种写法，不能实现 a和b 都弹出。 
                oBtn.onclick=function(){
                    alert('a');
                };
                oBtn.onclick=function(){
                    alert('b');
                };
            };
        </script>       
    </head>
    <body>
        <input type="button" name="btn" id="btn" value="点击" />
    </body>
</html>

要实现 a 和 b 都能被弹出（同时还有考虑浏览器兼容性问题），以下的代码可实现，但下面两种方式，每个都只能是针对一种类型的浏览器，即 IE浏览器和非IE（谷歌、火狐）

1、对 I E 浏览器起作用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            #btn{width: 100px;height: 40px;}            
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var oBtn=document.getElementById('btn');

                //要把 a和b 都被弹出， 用到事件的绑定
                //attachEvent() 只针对IE 有效   

                oBtn.attachEvent('onclick',function(){
                    alert('a');
                });

                oBtn.attachEvent('onclick',function(){
                    alert('b');
                });
            };
        </script>       
    </head>
    <body>
        <input type="button" name="btn" id="btn" value="点击" />
    </body>
</html>

2、对非 IE 浏览器起作用。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            #btn{width: 100px;height: 40px;}            
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var oBtn=document.getElementById('btn');
                 //要把 a和b 都被弹出， 用到事件的绑定
                //addEventListener() 只针对非IE 有效

                oBtn.addEventListener('click',function(){
                    alert('a');
                },false);

                oBtn.addEventListener('click',function(){
                    alert('b');
                },false);
            };
        </script>       
    </head>
    <body>
        <input type="button" name="btn" id="btn" value="点击" />
    </body>
</html>