W3C很好地解决了覆盖问题、相同函数屏蔽的问题、this传递问题、添加额外方法不被覆盖等问题。

  但是IE8之前的版本并不支持,IE9已完全支持了。

  IE和W3C在事件绑定上存在很多差异,我们以冒泡和捕获为例来介绍。

  W3C支持冒泡和捕获方式,而IE不支持捕获。

  IE有自己的事件绑定机制,通过attachEvent和deleteEvent函数来实现。

  首先,介绍IE解决覆盖问题的办法。

window.attachEvent('onload',function(){
alert('Lee');
}); window.attachEvent('onload',function(){
alert('Mr.Lee');
}); window.attachEvent('onload',function(){
alert('Miss.Lee');
});

  输出Miss.Lee,Mr.Lee,Lee。看来,通过attachEvnet解决了覆盖问题,但输出顺序反了过了。

  其次,IE不能解决相同函数屏蔽问题,即无法屏蔽,在团队开发中相同函数要注意这个问题。

  接着,IE是否可以传递this呢?

window.attachEvent('onload',function(){
var box=document.getElementById('box');
box.attachEvent('onclick',function(){
alert(this);
});
});

  输出结果为object,其实为window对象,而不是box,看来IE不能传递this。

  为了解决这个问题,大家也许会想到用匿名函数call过去,但匿名函数可读性不强,不是很推荐。

  我们用事件函数来解决。若我们为box标签对象添加了事件,可以通过如下方法得到box。 

 var that =window.event.srcElement;

  最后,如何做W3C和IE事件切换器的全套兼容呢?

  详见http://edu.51cto.com/lesson/id-9553.html;

  重点:跨浏览器添加事件,移除事件,阻止事件等。

  

  

  

JS事件绑定深入的更多相关文章

  1. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  2. js事件绑定细节说明

    javascript绑定事件: 经常用jQuery去写,时间长了对原生态的js事件绑定的知识会慢慢淡化或者遗忘了,必须翻出来再次总结,今天再次把js原生态事件的处理做个总结. 从最初开始,谁刚接触ja ...

  3. js事件绑定的几种方式与on()、bind()的区别

    版权声明:本文为博主原创文章,未经博主允许不得转载 一直不是很理解几种js事件绑定之间的区别与联系,今天百度了一下,在此做一总结: 1.如果只是简单的绑定一个事件,可以直接写在行内,点击执行一个函数, ...

  4. js课程 5-13 js事件绑定和鼠标事件注意事项有哪些

    js课程 5-13  js事件绑定和鼠标事件注意事项有哪些 一.总结 一句话总结:js代码的灵魂就是改变标签的属性和样式,就这两种. 1.js触发改的东西是哪两样? 属性和样式 2.js如何让页面用标 ...

  5. js事件绑定及深入

    学习要点: 1.传统事件绑定的问题2.W3C事件处理函数3.IE事件处理函数4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现 ...

  6. js 事件绑定

    事件绑定的方式 1.  DOM  元素行内绑定 <div onclick="alert(1)"></div>   2. js on+eventType do ...

  7. js事件绑定函数

    js中事件绑定方法大致有三种: 1.在DOM元素中绑定 <input onclick="alert('在DOM中绑定')" type="button" v ...

  8. js事件绑定的几种方式

    在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数 一. 在DOM元素中直接绑定 这里的DOM元素,可以理解为HTM ...

  9. js事件绑定/监听

    事件绑定/监听的方法 1.直接绑定 顾名思义,直接在DOM元素上绑定onclick.onmouseover.onmouseout.onmousedown.onmouseup.ondblclick.on ...

  10. 原生js事件绑定

    一.JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresiz ...

随机推荐

  1. 计时器chronometer补充

    项目中要实现关于安卓控件chronometer这部分的功能需求: 1.计时器的功能对用户答题时间进行时间统计,用户答完该题,进入下一题,计时器接续上一题的结束时间继续计时: 2.用户可以跳出答题界面, ...

  2. 基于RBAC的权限设计模型

    个部件模型组成,这4个部件模型分别是基本模型RBAC0(Core RBAC).角色分级模型RBAC1(Hierarchal RBAC).角色限制模型RBAC2(Constraint RBAC)和统一模 ...

  3. 2782: [HNOI2006]最短母串

    2782: [HNOI2006]最短母串 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 3  Solved: 2[Submit][Status][Web ...

  4. 破解&屏蔽防止嵌入框架代码 top.location != self.location

    <script type="text/javascript"> if (top.location != self.location) top.location = se ...

  5. 兼容ie6及以上和firefox等标准浏览器的表格行滑过时背景色切换的效果

    一.js代码——"tablehover.js" /**      *②.表格单元行滑过时高亮样式动效组件封装      *oop形式封装交互动效类      *组件说明这个组件是为 ...

  6. ES6 - 变量的解构赋值学习笔记

    变量的解析赋值 数组的解析赋值 es6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这就称为解构. var a = 1; var b = 2; var c = 3; //在es6中允许写成 ...

  7. #图# #dijkstra# ----- OpenJudge 726:ROADS

    OpenJudge 726:ROADS 总时间限制: 1000ms内存限制: 65536kB 描述 N cities named with numbers 1 ... N are connected ...

  8. MySQL密码丢失,解决方法

    我的MySQ安装路径是:D:\Program Files\MySQL 1.所以先cmd下切入盘 输入-> D: 输入->cd "D:\Program Files\MySQL\My ...

  9. 你真的懂ajax吗?

    前言 总括: 本文讲解了ajax的历史,工作原理以及优缺点,对XMLHttpRequest对象进行了详细的讲解,并使用原生js实现了一个ajax对象以方便日常开始使用. damonare的ajax库: ...

  10. CODEFORCES 125E MST Company 巧用Kruskal算法

    题意:给定一个带权边无向图,求最小生成树,且满足第一个节点的度为固定的k 无解则输出-1 数据规模: 节点数n和限制k<=5000 边数m<=10^5 时限8sec 思路: 首先时限比较宽 ...