关闭

JavaScript 事件处理程序的指派方式

标签: javascriptfunctioninputbutton浏览器ie
600人阅读 评论(0) 收藏 举报

       在浏览器中,事件处理方式有三种:

       1.在IE中,事件冒泡.事件是从事件发生的目标最内部开始触发,向上触发到最外部;

       2.在Navigator4.0中,事件捕获.与冒泡刚好相反,他是从事件的最外层对象到最里层的对象;

       3.在DOM中,同时支持事件捕获和事件冒泡.但是事件捕获先发生;

        事件处理程序的指派方式有三种,分别是:

       1.传统的事件处理程序指派方式.代码如下(body部分):

<body>
    <input type="button" id="btnclick" value="点击" />
    
    <script type="text/javascript">
        var btn=document.getElementById("btnclick");
       function hhh(){
            alert("传统的事件处理程序指派方式,,,你点击了我");
        }

 btn.onclick=hhh;
    </script>

</body>
2.现代事件处理程序的指派方法主要又分为IE浏览器和DOM提供的浏览器;具体如下:


<body>
    <input type="text" id="text1" value="textname"/>;
    <input type="button" id="btn1" value="addclick" />
    <input type="button" id="btn2" value="deleclick" />
    <script type="">
        function click1(){
            alert("input");
        }    
        function click2(){
            alert("body");
        }
        function click3(){
            alert("html");
        }
        function deleclick(){//在IE中删除事件处理程序的方法
            document.getElementById("btn1").detachEvent("onclick",click3);
        }
        
        function removeclick(){//在DOM中删除事件处理程序的方法
            document.body.removerEventListener("click",click3,false);
        }
        if(document.attachEvent){//在   IE中
            document.getElementById("btn1").attachEvent("onclick",click1);
            document.getElementById("btn1").attachEvent("onclick",click2);
            document.getElementById("btn1").attachEvent("onclick",click3);
            //点击btn1时,得到的结果为:html->body->input

   //点击btn2后,在点击btn1,得到色结果为:  body->input

          document.getElementById("btn2").attachEvent("onclick",deleclick);
        }
        else if(document.addEventListener){//在DOM中
            
            document.getElementById("btn1").addEventListener("click",click1,false);//获取body元素的第一个子元素后添加事件处理程序的指派方式
            document.body.addEventListener("click",click2,false);//获取body元素本身后添加事件处理程序的指派方式
            document.documentElement.addEventListener("click",click3,false);//获取html元素本身后添加事件处理程序的指派方式
            //当为false时,表明是冒泡, 即点击btn1时,得到的结果为:input->body->html

           //当为true时,表明是捕获, 即点击btn1时,得到的结果为:html->body->input
            document.getElementById("btn2").addEventListener("click",removeclick,false);
        }
    </script>
</body>
</html>


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:58751次
    • 积分:986
    • 等级:
    • 排名:千里之外
    • 原创:42篇
    • 转载:1篇
    • 译文:0篇
    • 评论:3条
    最新评论