JS事件绑定深入
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事件绑定深入的更多相关文章
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
- js事件绑定细节说明
javascript绑定事件: 经常用jQuery去写,时间长了对原生态的js事件绑定的知识会慢慢淡化或者遗忘了,必须翻出来再次总结,今天再次把js原生态事件的处理做个总结. 从最初开始,谁刚接触ja ...
- js事件绑定的几种方式与on()、bind()的区别
版权声明:本文为博主原创文章,未经博主允许不得转载 一直不是很理解几种js事件绑定之间的区别与联系,今天百度了一下,在此做一总结: 1.如果只是简单的绑定一个事件,可以直接写在行内,点击执行一个函数, ...
- js课程 5-13 js事件绑定和鼠标事件注意事项有哪些
js课程 5-13 js事件绑定和鼠标事件注意事项有哪些 一.总结 一句话总结:js代码的灵魂就是改变标签的属性和样式,就这两种. 1.js触发改的东西是哪两样? 属性和样式 2.js如何让页面用标 ...
- js事件绑定及深入
学习要点: 1.传统事件绑定的问题2.W3C事件处理函数3.IE事件处理函数4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现 ...
- js 事件绑定
事件绑定的方式 1. DOM 元素行内绑定 <div onclick="alert(1)"></div> 2. js on+eventType do ...
- js事件绑定函数
js中事件绑定方法大致有三种: 1.在DOM元素中绑定 <input onclick="alert('在DOM中绑定')" type="button" v ...
- js事件绑定的几种方式
在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数 一. 在DOM元素中直接绑定 这里的DOM元素,可以理解为HTM ...
- js事件绑定/监听
事件绑定/监听的方法 1.直接绑定 顾名思义,直接在DOM元素上绑定onclick.onmouseover.onmouseout.onmousedown.onmouseup.ondblclick.on ...
- 原生js事件绑定
一.JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresiz ...
随机推荐
- WebGIS中通过行列号来换算出多种瓦片的URL 之离线地图(转载)
WebGIS中通过行列号来换算出多种瓦片的URL 之离线地图 1.前言 在前面我花了两个篇幅来讲解行列号的获取,也解释了为什么要获取行列号.在这一章,我将把常见的几种请求瓦片时的URL样式罗列出来,并 ...
- deviceOne -- js的本地搜索
// 搜索 function search_by_PY(pinyin) { // 置空 var after_search_listData = []; // 清空数据 do_listData.remo ...
- oralce
1.对数据库SQL2005.ORACLE熟悉吗? SQL2005是微软公司的数据库产品.是一个RDBMS数据库,一般应用在一些中型数据库的应用,不能跨平台. ORACLE是ORACLE公司的数 ...
- 兼容ie6及以上的表格行滑过时背景色切换的效果
;(function(window){ var tb = document.getElementById('tablelist'); function trfocus(){//为了兼容IE ...
- C++第四天学习
回顾: 1.初始化表 2.this指针 3.拷贝构造 Test(const Test& rt) { //1.分配新空间 //2.给新空间赋值 } 4.static成员 类::函数(): 类型 ...
- 解决windows 10 9926 中vmware安装的虚拟机无法桥接上网的问题
从windows 10 出来之后就安装了使用,但一直有一个问题直到9926也没有解决,那就是vmware下的虚拟机无法桥接上网,但NAT方式正常.发现有一种办法可以实现桥接方式上网.但这种方式下本机与 ...
- js与AMD模块加载
目的: 了解AMD规范与CMD规范,写一个模块加载器雏形. 基本概念: AMD是异步模块定义规范,而CMD是通用模块定义规范.其他的还有CommonJS Modules规范. 对于具体的规范,可以参考 ...
- Android 创建Library Project(库项目)与引用操作
由于在开发过程,为了实现未曾了解的某种效果与特定功能,而求助于网上优秀的开源项目,在使用过程中发现引用开源的Library Project(库项目),的确可以解决很多问题,而且也给出了一种思路,好的软 ...
- log4j.appender.stdout.layout.ConversionPattern
http://501565246-qq-com.iteye.com/blog/1991881 http://wenku.baidu.com/link?url=e4Z9v9CY_gwRxHrggzHXx ...
- sass纯新手(一)
说是教程还真是有点不敢当,只是将自己今天上手sass的流程给记录下来,给一些和我一样的小白菜一点参考而已,照着走一遍应该就会对sass有基本的认识了,也请大神们不吝赐教. 很久之前同事做了一个关于sa ...