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

原创 2012年03月24日 22:27:11

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

       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>


相关文章推荐

JavaScript事件处理程序的3种方式

文章来源:http://www.mahaixiang.cn/js/694.html 最近这段时间因为每天要修改网站,为网站做特效,所以看了很多的js接触事件,自己只会使用一小部分,有时用的时候也比...

javascript事件处理程序

事件处理程序有两种方式: 1.html时间处理:如 这种方式把js代码写在html里面 2.js封装处理如: function showmessage() { alert("33"); }...

Javascript之跨浏览器的事件处理程序

这是一篇关于原生JS跨浏览器的事件处理程序,看看你会不会?

说说 JavaScript 的事件处理程序

事件指的是使用者或者浏览器自身执行的某种动作(比如点击事件)。响应这些事件的函数就叫做事件处理程序(或者叫事件监听器)。事件处理程序的名字以“on”为前缀,比如 click 事件的事件处理程序就是 o...

javascript通用事件处理程序

源代码是javascript step by step 上面的一本书;
  • awenit
  • awenit
  • 2014年04月13日 10:37
  • 533

JavaScript Event学习第三章:早期的事件处理程序

被第二代浏览器所支持。 这些古老的浏览器只支持一种注册事件处理程序的方法,这个方法是Netscape发 明的。因为Netscape先发制人,所以如果微软也想做支持JavaScript事件的...

JavaScript 事件处理程序

事件就是用户或者浏览器自身执行的某种动作。比如click、mouse等,都是事件的名字。而响应某个事件的函数就叫做事件处理程序或者事件监听器。事件处理程序的名字一般是以“on”开头,比如click事件...

javascript中对各种事件处理程序的个人总结

这些天对在js的整理学习中,发现了一个我以前不知道的js事件处理方式,相信很多同学在起初学习web开发的时候,可能会直接将onclick之类的属性直接赋值放到html标签内,这样会使页面代码显得复杂混...

JavaScript事件处理程序传递参数

给事件处理程序传递参数不仅是自定义事件中存在的问题,也是系统内部对象的事件机制中存在的问题,因为事件机制仅传递一个函数的名称,不带有任何参数的信息,所以无法传递参数进去。例如: //定义类class...
  • joulang
  • joulang
  • 2012年01月31日 07:10
  • 732

JS事件处理程序的3中方式

事件(Event)是用户和浏览器交互时,产生的现象。 1、事件冒泡 事件冒泡即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的节点...
  • xin9910
  • xin9910
  • 2017年07月07日 11:15
  • 129
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript 事件处理程序的指派方式
举报原因:
原因补充:

(最多只允许输入30个字)