IE8事件模型和DOM事件模型有何不同？如何处理DOM事件模型与IE8事件模型的兼容性？

1 事件模型不一样

　　　　DOM的浏览器兼容性问题：事件模型   3个阶段            01 外向内：捕获           02 目标触发            03内向外：冒泡

　　　　IE8: 2个阶段：   没有捕获阶段 ，只有两个阶段  。   目标触发  和 冒泡阶段

2事件绑定不一样　　

　　　　　　DOM: elem.addEventListener(“click”,function(){},false)      第三个参数capture: 是否在捕获阶段就提前触发

　　　　　　IE8:    elem.attachEvent(“onclick”,function(){})    事件名一定要 用on开头

3移除事件　　　

　　　　DOM: elem.removeEventListener(“click”,function(){},false)

　　　　 IE: elem.detachEvent(“onclick”,function(){})

4获取事件对象event的方法

　　　　DOM: elem.addEventListener(“click”,function(e){ e->event })

　　　   IE8: 不会自动传入事件对象e

　　　　 事件对象event始终保存在一个全局变量window.event中

　　　　 elem.attachEvent(“onclick”,function(){

　　　　　　　　var e=window.event

　　　　   })

兼容所有浏览器的做法:      e=e||window.event;

5获取目标元素

　　　　DOM: e.target

　　　　IE8: e.srcElement

兼容所有浏览器的写法:   var target=e.target||e.srcElement;

6阻止冒泡: 

　　　　DOM:　　 e.stopPropagation()

　　　　IE8: 　　    e.cancelBubble=true;     ---- kan sao babao

兼容所有浏览器的写法:

　　　　if(e.cancelBubble!==undefined){ //IE8

　　　　　　e.cancelBubble=true;

　　　　}else{ //DOM

　　　　　　e.stopPropagation()

　　　　　　}

7阻止默认行为

　　　　DOM: e.preventDefault();

　　　　IE8 :   return false;  或者  e.returnValue = false;

　　　　if(typeof e.preventDefault!=='function'){
　　　　　　　　 e.returnValue = false;
　　　　}else{
　　　　　　e.preventDefault()
　　　　}
<!DOCTYPE html>

<html lang="en">

<head>

      <meta charset="UTF-8">

      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <meta http-equiv="X-UA-Compatible" content="ie=edge">

      <title>Document</title>

</head>

<body>

      <button id="btn">点击</button>

<script>

 // 定义一个函数，可以支持所有浏览器中的处理函数绑定:

      function bindEvent(elem, eventName, handler){

          if(elem.addEventListener){//DOM

                  elem.addEventListener(eventName,handler)

                  alert('dom')

      }else{//IE8

          elem.attachEvent('on'+eventName,function(){

        //this->elem

          alert('ie')

        var e=window.event;

        e.target=e.srcElement;

        handler.call(this,e)

      })

      }

      }

      bindEvent(btn, 'click', function(e){

         this //当前事件冒泡到的父元素

         var target=e.target; //目标元素

      })

</script>

</body>

</html>

DOM IE 兼容性 I的更多相关文章

  1. 关于Win8对getElementsByTagName等dom方法兼容性的替代方法

    在对Twebbrowser进行dom编程时,引用MSHTML并使用其中的HTMLDocument; IHTMLElementCollection;IHTMLElement;能获得较好的代码提示 其中封 ...

  2. DOM的概念（1）

    什么是DOM? 通过 JavaScript,您可以重构整个HTML文档.您可以添加.移除.改变或重排页面上的项目.要改变页面的某个东西,JavaScript就需要对HTML文档中所有元素进行访问的入口 ...

  3. bom和dom总结

    BOM1.1    介绍    1.BOM是browser object model的缩写,简称浏览器对象模型    2.BOM提供了独立于内容而与浏览器窗口进行交互的对象    3.由于BOM主要用 ...

  4. Javascript.//DOM

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.Document Object Model的历史可以追溯至1990年代后期微 ...

  5. HTML DOM(一)：认识DOM

     分类: HTML/JavaScript/CSS(10)  版权声明:本文为博主原创文章,转载请注明出处http://blog.csdn.net/ghsau. 什么是DOM?       通过 Jav ...

  6. DOM （文档对象模型(Document Object Model)）

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象 ...

  7. DOM的的概述

    DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构.换句话说,这是表示和处理一个HTML或XML文档的常用方法.有 ...

  8. DOM的使用

    1. 修改: 3样: 1. 内容: 3个属性: 1. 获取或修改原始HTML片段: 元素.innerHTML 2. 获取或修改纯文本内容: 元素.textContent vs innerHTML 1. ...

  9. 从零开始学习jQuery (三) 管理jQuery包装集

    本系列文章导航 从零开始学习jQuery (三) 管理jQuery包装集 一.摘要 在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着 ...

随机推荐

  1. CF1009F Dominant Indices 长链剖分

    题目传送门 https://codeforces.com/contest/1009/problem/F 题解 长链剖分的板子吧. 令 \(dp[x][i]\) 表示 \(x\) 的子树中的深度为 \( ...

  2. LOJ6300 BZOJ5283 [CodePlus 2018 3 月赛]博弈论与概率统计

    一道好题!很久以前就想做了,咕到了现在,讲第二遍了才做. 首先我们观察到$p$是没有用的 因为赢的次数一定 那么每一种合法序列出现的概率均为$p^n*(1-p)^m$ 是均等的 我们可以不看它了 然后 ...

  3. django之mysql数据库的配置和orm交互

    一:django默认数据库的配置 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.sqlite3', 'NAME': os.path. ...

  4. 阿里云ECS无法通过SSL远程链接问题。

    自己配置的SSL,通过密码,公司的是通过密钥,结果也是一样, 环境:centos7.x 网络: 家里宽带 公司网络 省图书馆wifi 家里宽带,公司网络均可以链接上去, 但唯独省图书馆wifi链接失败 ...

  5. Dubbo学习-8-dubbo启动时检查

    启动时检查的作用如下: (1)Dubbo 缺省会在启动时检查依赖的服务是否可用,不可用时会抛出异常,阻止 Spring 初始化完成,以便上线时,能及早发现问题,默认 check="true& ...

  6. Docker Swarm学习教程【转载】

    Swarm介绍 Swarm是Docker公司在2014年12月初发布的一套较为简单的工具,用来管理Docker集群,它将一群Docker宿主机变成一个单一的,虚拟的主机.Swarm使用标准的Docke ...

  7. 暴力&打表

    _LH巨神好像不太会打表,这里来普及一下 还有暴力这么重要的东西网上讲的人竟然不多…… 一.打表 打表,就是针对一些输入数据比较小的题目的一种骗分技巧,当然有时候也可以在正解或暴力中起一定优化作用. ...

  8. php面试专题---mysql数据库分库分表

    php面试专题---mysql数据库分库分表 一.总结 一句话总结: 通过数据切分技术将一个大的MySQLServer切分成多个小的MySQLServer,既攻克了写入性能瓶颈问题,同一时候也再一次提 ...

  9. 124、TensorFlow替换函数

    # tf.device给你了很多可伸缩性在TensorFlow的计算图中选择放置你的单独的操作 # 在许多的情况下,有很多启发可以工作的很好 # 例如tf.train.replica_device_s ...

  10. jenkins自动化打包报错：gradle: 未找到命令

    shell脚本如下: cd /home/wangju/gitProject/Automation echo "************************开始清理环境********** ...