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

最新推荐文章于 2020-02-05 21:20:41 发布

luoxl81

最新推荐文章于 2020-02-05 21:20:41 发布

阅读量947

点赞数

文章标签： javascript function input button 浏览器 ie

本文链接：https://blog.csdn.net/luoxl81/article/details/7391187

版权

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

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.οnclick=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>

luoxl81

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 事件处理程序的指派方式

在浏览器中,事件处理方式有三种: 1.在IE中,事件冒泡.事件是从事件发生的目标最内部开始触发,向上触发到最外部; 2.在Navigator4.0中,事件捕获.与冒泡刚好相反,他是从事件的最外层对象到最里层的对象; 3.在DOM中,同时支持事件捕获和事件冒泡.但是事件捕获先发生; 事件处理程序的指派方式有三种,分别是:
复制链接

扫一扫