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

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

事件处理程序：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. 2015西雅图微软总部MVP峰会

    2015 西雅图微软总部MVP峰会记录   2015 西雅图微软总部MVP峰会记录 今年决定参加微软MVP全球峰会,在出发之前本人就已经写这篇博客,希望将本次会议原汁原味奉献给大家 因为这次是本人第一 ...

  2. 基于nodejs 的微信 JS-SDK 简单应用

    2015 是 Hybrid App 崛起之年 ,Web App 和 Native App 各有其强大之处,也有着致命的缺点,人们一边追求native流畅的用户体验,一边同时期望产品能够快速的迭代更新, ...

  3. MySQL多实例配置(两)

    MySQL操作和维护一个集中的数据库的.它可以由一个单一的执行MySQL在数据库服务器,部署多MySQL示例.这个功能是由mysqld_multi实现.mysqld_multimysqld的服务进程. ...

  4. HTML与XHTML差额

    实际上.XHTML 与 HTML 4.01 标准没有太多的不同. 它们最基本的不同.举例说明例如以下: 1.XHTML 元素必须被正确地嵌套. 错误:<p><span>this ...

  5. ASP.NET查询页面设置form的action属性只弹出一个页面，并且每次将页面设置到最前

    原文:ASP.NET查询页面设置form的action属性只弹出一个页面,并且每次将页面设置到最前 背景 当数据量大.查询条件复杂,多样多的时候,我们可能需要单独做一个查询界面,当用户选择设置了相关的 ...

  6. 解决一bug的流程复盘

    听同事说有一个功能不好使了,当时有事,过了一段时间来看看这个bug 解决问题时,看的是老的日志,根据老日志看来看去没有发现问题,觉得很困惑 然后手动执行了一下,发现问题没有重现.与另一个团队的同事沟通 ...

  7. Android.9图片评论(一个)

    什么是.9图片 至于什么是.9图片这里就简单提一下,即图片后缀名前有.9的图片,如pic.9.png.pic1.9.jgp,诸如此类的图片就称为.9图片. .9图片的作用 ①.9图片的作用是在图片拉伸 ...

  8. TP-Link WR842N VPN错误619 不能建立到远程计算机的连接

    一直在用Tenacy这个VPN,不限时间不限流量的,可是近期发现链接VPN总是失败.在网上查了一下,发现居然是路由器的问题!回忆一下果然是路由器出事儿了,换这个842N之前,一直是能够链接VPN的,所 ...

  9. 安装Docker

    安装Docker 1. 增加Repository配置文件 cat >/etc/yum.repos.d/docker.repo <<-EOF [dockerrepo]name=Dock ...

  10. HDU 2082-找单词(母函数)

    找单词 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submis ...