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

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

事件处理程序：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. UIButton 文字图片排列

    UIButton缺省值是:图画-文字水平,所以我们并不需要调整. 1.写作-图画 水平显示,以前的文本,图片后再次 [btn setTitleEdgeInsets:UIEdgeInsetsMake(0 ...

  2. sdut 上机练习8面向对象编程（对象的数组）

    上机练习8面向对象编程(对象的数组) Time Limit: 1000MS Memory limit: 65536K 题目描写叙述 利用类对象数组完毕N个学生数据(学号是字符串类型.成绩是整型)的输入 ...

  3. java离request获取当前从访问完成url至

    request.getHeader("REFERER") 得到的完整路径到原始访问路径,其他参数 版权声明:本文博主原创文章.博客,未经同意不得转载.

  4. bzoj 2437 [Noi2011]兔子和鸡蛋 [二分图匹配]

    叙述性说明 这些日子.兔子和蛋像一个新的棋盘游戏. 这场比赛是在 n 行 m 在船上进行列. 前,棋盘上有一 个格子是空的,其他的格子中都放置了一枚棋子,棋子或者是黑色,或者是白色. 每一局游戏总是兔 ...

  5. 一个好用的web甘特图

      前些天一直在弄web甘特图,发现网上很多web甘特图框架,但大部分是收费的.偶尔发现了向日葵甘特图 感觉不错,特此写下来一方面当做记录,另一方面也为寻找web甘特图的同学们少走一些弯路,双赢嘛~ ...

  6. （大数据工程师学习路径）第一步 Linux 基础入门----环境变量与文件查找

    环境变量与文件查找 本节介绍环境变量的作用与用法,及几种搜索文件的方法.学会这些技巧高效地使用 Linux. 一.环境变量 1.变量 要解释环境变量,得先明白变量是什么,准确的说应该是 Shell 变 ...

  7. 文件I/O之-打开文件在内核中的表示

    在unix系统中,一切皆文件.系统把文件夹.字符设备.块设备.套接字都当做文件来对待.对于文件的操作,使用I/O函数,这里所说的I/O函数是指系统调用.大多数文件的I/O要用到这5个函数:open.r ...

  8. Android 最热的高速发展框架XUtils

    近期搜了一些框架供刚開始学习的人学习,比較了一下XUtils是眼下git上比較活跃 功能比較完好的一个框架,是基于afinal开发的,比afinal稳定性提高了不少.以下是介绍: 鉴于大家的热情,我又 ...

  9. 集成 NHibernate

    ABP 基础设施层——集成 NHibernate 本文翻译自ABP的官方教程<NHibernate Integration>,地址为:http://aspnetboilerplate.co ...

  10. XML DTD详解（转）

    前情提要与本文内容介绍 前面的两篇XML相关博文: 第一篇是介绍格式正规的XML: 格式正规的XML:语法 属性 实体 处理指令 样式单 CDATA节 第二篇介绍DTD,引入有效的XML的概念(符合语 ...