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>


Js事件详解(1)事件类型及几种添加事件处理程序的方法

js中的事件早期的事件流的两种解决方案:1.IE:事件冒泡流 即事件开始时由最具体的元素(DOM中层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)–自下向上。所有现代的浏...
  • birdflyto206
  • birdflyto206
  • 2016年07月29日 15:22
  • 963

javascript事件——事件处理程序

//兼容各个浏览器的事件处理器,EventUtill var EventUtill={ addHandler: function(element,type,handler){ if(elem...
  • lhh_12345
  • lhh_12345
  • 2016年12月06日 22:59
  • 68

JavaScript 通用函数整理——添加/删除事件处理程序

参考《JavaScript 高级程序设计(第3版)》 《JavaScript DOM 编程艺术(第2版)》 实现平稳退化和渐进增强,就必须分离结构层、表示层、行为层。 定义跨浏览器的 Even...
  • cy012124
  • cy012124
  • 2014年03月25日 17:54
  • 827

JavaScript的事件处理程序

HTML中的事件处理程序对于支持事件的HTML标签,可以直接在标签中定义。click而且如果在onclick函数中加入console.log(this),可以看出输出了整个标签本身。故在HTML事件处...
  • jlu16
  • jlu16
  • 2017年10月25日 09:24
  • 56

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

既然产生了事件,我们就要去处理它,据我了解Javascript事件处理程序主要有3种方式: 1、HTML事件处理程序 即我们直接在HTML代码中添加事件处理程序,如下面这段代码:      ...
  • thqy39
  • thqy39
  • 2017年06月20日 20:01
  • 158

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

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

js学习笔记:事件——事件流、事件处理程序、事件对象

Javascript与HTML之间的交互是通过事件实现的。 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。 可以使用侦听器来预定事件,以便事件发生时执行相应代码。事件流事件流描述的是从页面...
  • crystal6918
  • crystal6918
  • 2016年10月25日 11:31
  • 2785

使用欢迎使用事件处理程序向导的问题

我添加了一个dialog资源,在这个资源上访了一个button资源, 点右键添加事件处理程序,发现发现消息类型框是空的,应该怎么解决,很奇观。 另外,加了这个类以后,我这个mfc的系统最初生成的a...
  • zhujiu7386
  • zhujiu7386
  • 2017年01月03日 04:35
  • 331

JavaScript事件处理程序 学习笔记

我一直认为Javascript的特点就是在和用户交互的过程中可以进行一些操作,那么事件作为用户交互的主要部分就显得特别重要,今天先学习了JS事件处理程序的相关内容。 首先,要明白Javascrip...
  • jtbeibei
  • jtbeibei
  • 2016年01月04日 19:09
  • 156

javascript通用事件处理程序

源代码是javascript step by step 上面的一本书;
  • awenit
  • awenit
  • 2014年04月13日 10:37
  • 560
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript 事件处理程序的指派方式
举报原因:
原因补充:

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