javascript中的 事件的綁定1

<!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>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章