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

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

事件处理程序：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. 【转】Jython简单入门

    1. 用Jython调用Java类库 第一步.创建Java类 写一个简单的Java类,用Point来示例: import org.python.core.*; public class Point e ...

  2. 【iOS】Swift扩展extension和协议protocol

    加上几个关节前Playground摘要码进入github在,凝视写了非常多,主要是为了方便自己的未来可以Fanfankan. Swift语法的主要部分几乎相同的. 当然也有通用的.运算符重载.ARC. ...

  3. 使用RESTClient插件数据模拟(GET,POST)提交

    1:在Firefox下载RESTClient插件安装 2:安装界面后, 3:点击设置头文件:(设请求地址有头部文件) 4:设置界面,当然有非常多选择.依据你的须要.一般在输入的时候有智能提示,我这里以 ...

  4. Cocos2d:使用 CCCamera 做滚动效果 （Four Ways of Scrolling with Cocos2D）

    原版的:http://www.koboldtouch.com/display/IDCAR/Four+Ways+of+Scrolling+with+Cocos2D There are two class ...

  5. T-SQL性能调整——信息收集

    原文:T-SQL性能调整--信息收集 IO信息(自服务器启动开始) --Database IO analysis WITH IOFORDATABASE AS ( SELECT DB_NAME(VFS. ...

  6. 3.1、Eclipse

    (原版的:http://www.libgdx.cn/topic/22/3-1-eclipse) 生成项目之后,如今我们来将项目导入到Eclipse中. 在将项目导入到Eclipse之前,确定你已经配置 ...

  7. [Elasticsearch] 部分匹配 (一) - 前缀查询

    部分匹配(Partial Matching) 敏锐的读者可能已经发现到眼下为止,介绍的查询都是在整个词条层面进行操作的. 匹配的最小单元必须是一个词条.你仅仅能找到存在于倒排索引(Inverted I ...

  8. Java并发专题 带返回结果的批量任务执行 CompletionService ExecutorService.invokeAll（转）

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/27250059 一般情况下,我们使用Runnable作为基本的任务表示形式,但是R ...

  9. 一张地图告诉你，只JavaScript不够！

    这将是JavaScript语法,你真的会一JavaScript嘛.看看这个图片!超好用JavaScript一本书的摘录游.熊儿.快去学习! 版权声明:本文博客原创文章.博客,未经同意,不得转载.

  10. ABP展现层——动态生成WebApi

    ABP展现层——动态生成WebApi 点这里进入ABP系列文章总目录 ABP(现代ASP.NET样板开发框架)系列之20.ABP展现层——动态生成WebApi ABP是“ASP.NET Boilerp ...