事件冒泡：即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）。

事件捕获：即不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。

事件处理程序：1.HTML处理程序

<body>

<div id="box">

    <input type="button"  value="按钮" id="btn" onclick="alert(123)"/>

</div>

</body>

javascript和html耦合在一起，改起来比较麻烦，不建议使用的：

function showMessage(){

    alert("hello word")

}

</script>

</head>

<body>

<div id="box">

    <input type="button"  value="按钮" id="btn" onclick="showMessage()"/>

</div>

2.dom0级事件处理程序

较传统的方式：把一个函数赋值给一个事件爱你的处理程序属性用的比较多的方法    简单     夸浏览器的优势

window.onload=function(){

    var btn2=document.getElementById('btn2');

    btn2.onclick=function(){

        alert('这个是dom0级添加的事件')

    }

// btn2.onclick=null;

}

<input type="button" value="按钮3" id="btn3"/>

3.dom2级事件处理程序

dom2级事件定义了两种方法：

用于处理指定和删除事件处理程序的操作

addEventListener()和removeEventListner()

接收三个参数：要处理的事件名，作为事件处理程序的函数和布尔值（false事件冒泡，true事件捕获）

window.onload=function(){

    var btn3=document.getElementById('btn3');

    btn3.addEventListener('click',showMessage,false);
　　btn3.addEventListener('click',function(){
        alert(this.value)
    },false);
　　btn3.removeEventListener('click',showMessage,false);

}

<input type="button" value="按钮3" id="btn3"/>

4.IE事件处理程序

attachEvent()添加事件

detachEvent()删除事件

接收相同的两个参数：事件处理程序的名称和事件处理程序的函数

不使用第三个参数的原因：IE8以及更早的浏览器版本只支持事件冒泡

window.onload=function(){

    var btn3=document.getElementById('btn3');

   btn3.attachEvent('onclick',showMessage)

}

<input type="button" value="按钮3" id="btn3"/>

5.跨浏览器的事件处理程序

function showMessage(e){

      alert(e.type);

  }

  var eventUtil={

          //添加句柄

          addHandler:function(element,type,handler){

              if(element.addEventListener){//dom二级

                  element.addEventListener(type,handler,false);

              }else if(element.attachEvent){//IE

                  element.attachEvent('on'+type,handler);

              }else{//dom0级

                  element['on'+type]=handler;//element.onclick===element['onclick'];

              }

          },

      //删除句柄

          removeHandler:function(element,type,handler){

              if(element.removeEventListener){//dom二级

                  element.removeEventListener(type,handler,false)

              }else if(element.detachEvent){//IE

                  element.detachEvent('on'+type,handler);

              }else{//dom0级

                  element['on'+type]=null;//element.onclick===element['onclick']

              }

          }

      }

<input type="button" value="按钮3" id="btn3"/>

<script>

  var btn3=document.getElementById('btn3');

  eventUtil.addHandler(btn3,'click',showMessage);

  //eventUtil.removeHandler(btn3,'click',showMessage);

</script>

dom01的更多相关文章

  1. 004 DOM01

    一:说明 1.Js的三个部分 ECMAScripts标准:JS的基本语法 DOM:文档对象模型,操作页面的元素的 BOM:浏览器对象模型,操作浏览器 2.术语 文档:一个页面就是一个文档 元素:页面中 ...

  2. JS基础语法之DOM01(找标签、改属性样式）

    DOM:暂时可以理解为找标签.改样式 1.BOM:   记住location这个就可以: location.href 获得当前页面的URL location.href = "URL" ...

  3. eCharts_基于eCharts开发的一个多图表页面

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. eCharts_数据过多底部滚动条实现数据展示

    效果图: 实现原理: 1.添加dataZoom属性 效果实现代码: <!DOCTYPE html> <html> <head> <meta charset=& ...

  5. 基于three.js实现特定Div容器的粒子特效封装

    本文基于three.js实现特定容器的粒子特效效果,支持用户传入特定的dom对象以及粒子颜色. 效果图 移入库 <script src="jquery-1.11.3.min.js&qu ...

  6. DOM解析xml学习笔记

    一.dom解析xml的优缺点 由于DOM的解析方式是将整个xml文件加载到内存中,转化为DOM树,因此程序可以访问DOM树的任何数据. 优点:灵活性强,速度快. 缺点:如果xml文件比较大比较复杂会占 ...

随机推荐

  1. 2014 ACM湖南匹配10会议省赛

    2014湖南游戏..... 1:牡丹江Regional有些球队没来的冲突 2:题目比較水 3:队友神勇发挥 最终在开局不利的情况下完毕了翻盘,拿到了第二名.....没有抓住机会顺势夺冠还是非常遗憾的. ...

  2. RecyclerView0基于使用

    (转载请注明出处:http://www.kennethyo.me/post/android/recyclerviewchu-ji-shi-yong) RecyclerView是Android在v7包中 ...

  3. 使用jprobe建设镜面层叠的原则和见解

    忽然想起的回忆,那是2007上周五在冬季,我看我的老湿调试Linux堆IP层,只看到他改变路由查找的逻辑,然后直接make install上的立竿见影的效果有点,我只知道,,这种逻辑必须再次更改编译内 ...

  4. SERVERCONFIG

    -- Create tablecreate table ERP_SERVERCONFIG( id NUMBER not null, servicename VARCHAR2(500), service ...

  5. gradle--java入门(转)

    7.3.3 项目之间的依赖性 您可以添加项目之间的依赖性在相同的构建,所以,例如,这个一个项目的JAR文件是用来编译另一个项目,在api构建文件我们将添加一个依赖JAR产生的共享项目.由于这种依赖性, ...

  6. C++学习笔记13-类继承

    1.  类模板的 static 成员[不同于C#中的static] 类模板能够像随意其它类一样声明static 成员.下面代码: template <class T> class Foo ...

  7. [6] 算法路 - 双向冒泡排序的Shaker

    Shaker序列 –算法 1. 气泡排序的双向进行,先让气泡排序由左向右进行.再来让气泡排序由右往左进行,如此完毕一次排序的动作 2. 使用left与right两个旗标来记录左右两端已排序的元素位置. ...

  8. Python标准库：内置函数format(value[, format_spec])

    的值的函数value按format_spec的格式来格式化,然而函数解释format_spec是依据value的类型来决定的.不同的类型有不同的格式化解释. 当參数format_spec为空时,本函数 ...

  9. ZOJ-3652-Maze(BFS)

    Celica is a brave person and believer of a God in the bright side. He always fights against the mons ...

  10. YUV422蓝色屏幕输出的调试援助

    YUV422蓝色屏幕输出的调试援助 YUV422有YUYV,YVYU,UYVY,VYUY四种,以下笔者就就以UYVY为例介绍一下数据构成.因为常常要跟视频输入打交道,所以YUV422这种常见的视频信号 ...