javaScript事件机制兼容【整理】
【添加事件机制】 addEventListener 和 attachEvent
[W3C]
addEventListener('click' , function(){alert('Hello World')} ,false ) //W3C规范添加事件(IE8及以上不兼容); 第一个参数为事件类型 ,第二个为事件程序 ,第三个 false为事件冒泡,true为事件捕获
[IE]
attachEvent('onclick',function(){alert('Hello World')}) //IE添加事件; 第一个参数为事件类型(需要加on) ; 第二个为事件程序 ; 因为IE只支持事件冒泡,所以只有两个参数
[跨浏览器兼容]
function insertEvent(obj,Event,fun){
if(obj.addEvenListener){
addEventLitener(Event,fun,false)
}else if(obj.attach){
attachEvent('on'+Event,fun)
}
}
------------------------------------------------------------------------------------------
【删除事件机制】 removeEventListener detachEvent
[W3C] removeEventListener
removeEventListener() //利用addEventListener新增的事件只能通过removeEventListener来删除;
[注意] //以下这种删除事件方式是错误的,因为事件程序必须不能是一个匿名函数
addEventListener('click' , function(){alert('Hello World')} ,false )
removeEventListener('click',function(){alert('Hello World')},false)
[解决]
addEventListener('click' , box ,false );
removeEventListener('click',box,false) ;
function box(){
alert('Hello World');
}
[跨浏览器兼容]
function deleteEvent(obj,Event,fun){
if(obj.removeEventListener){
removeEventListener(Event,fun,false);
}else if(obj.detachEvent){
detachEvent('on'+Event,fun)
}
}
-------------------------------------------------------------------------------------------------
【阻止特定事件的默认行为】
[preventDefault 和returnValue]
[W3C] preventDefault
[IE] reutrnValue
[跨浏览器兼容]
function(event){
event=event || window.event;
if(event.preventDefault){
event.preventDefault()
}else{
event.returnValue=false;
}
}
---------------------------------------------------------------------------------------------------
【获取目标对象】
[target 和 srcElement]
function(event){
event=event || window.event;
if(event.target){
return event.target;
}else if(event.srcElement){
return event.srcElement;
}
}
javaScript事件机制兼容【整理】的更多相关文章
- 【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)
前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...
- 重温javascript事件机制
以前用过一段时间的jquery感觉太方便,太强大了,各种动画效果,dom事件.创建节点.遍历.控件及UI库,应有尽有:开发文档也很多,网上讨论的问题更是甚多,种种迹象表明jquery是一个出色的jav ...
- Javascript事件机制兼容性解决方案
本文的解决方案可以用于Javascript native对象和宿主对象(dom元素),通过以下的方式来绑定和触发事件: 或者 var input = document.getElementsByTag ...
- 【探讨】javascript事件机制底层实现原理
前言 又到了扯淡时间了,我最近在思考javascript事件机制底层的实现,但是暂时没有勇气去看chrome源码,所以今天我来猜测一把 我们今天来猜一猜,探讨探讨,javascript底层事件机制是如 ...
- JavaScript事件机制——细思极恐
JavaScript事件机制,也有让人深思的东西.在一开始未深入了解,我头脑里有几个问题发出: 1. 自下而上(冒泡)事件怎么写,自上而下(捕获)又是怎么写? 2. 捕获型和冒泡型同时设置,谁生效? ...
- [解惑]JavaScript事件机制
群里童鞋问到关于事件传播的一个问题:“事件捕获的时候,阻止冒泡,事件到达目标之后,还会冒泡吗?”. 初学 JS 的童鞋经常会有诸多疑问,我在很多 QQ 群也混了好几年了,耳濡目染也也收获了不少,以后会 ...
- 总结JavaScript事件机制
JavaScript事件模型 在各种浏览器中存在三种事件模型: 原始事件模型 , DOM2事件模型 , IE事件模型. 其中原始的事件模型被所有浏览器所支持,而DOM2中所定义的事件模型目前被除了IE ...
- JavaScript——事件机制
事件是将JavaScript脚本与网页联系在一起的主要方式,是JavaScript中最重要的主题之一,深入理解事件的工作机制以及它们对性能的影响至关重要.本文将详细介绍JavaScript的事件机制, ...
- javascript事件机制
① javascript绑定事件的方式 http://blog.iderzheng.com/dom-javascript-event-binding-comparison/ ② javascript事 ...
随机推荐
- (原)10-folder交叉验证
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6069731.html 参考网址: https://github.com/cmusatyalab/ope ...
- 【0】Laravel 5.1 简介
1.简介 Laravel是一套简洁.优雅的PHP Web开发框架(PHP Web Framework).它可以让你从面条一样杂乱的代码中解脱出来:它可以帮你构建一个完美的网络APP,而且每行代码都可以 ...
- 条形码/二维码之开源利器ZXing图文介绍
全文目录: 基本介绍 二维码(比如:QRCode)的编码和解码演示 条形码(比如:EAN-13)的编码和解码演示 [一]. 基本介绍 : 1-1. ZXing是一个开源Java类库用于解析多种格式的条 ...
- 使用BufferedReader的时候出现的问题
今天在使用BufferedReader的时候,出现了一个奇怪的问题 有时候换行的时候,行首会少一个字符 开始的代码是这样写的 while( br.read()!=-1 ){ String str = ...
- ng-repeat 与ng-switch的简单应用
效果如下图所示: 使用表格显示用户信息,当点击某条用户信息时,在其下方展开一行进行展示. index.html <!DOCTYPE html> <html ng-app=" ...
- LeetCode_Valid Palindrome
Given a string, determine if it is a palindrome, considering only alphanumeric characters and ignori ...
- Ubuntu下配置NFS服务
Table of Contents 1.下载相关软件 2.建立共享目录 3.修改该配置文件 4.重启服务 5.测试服务器 6.测试客户端 测试系统:Ubuntu8.04 1.下载相关软件 使用如下命令 ...
- PowerShell_零基础自学课程_2_Powershell与Cmd以及Unix/Linux Shell
上篇文章我说道,windows为了改变用户对其console界面的诟病,于是就从windows vista开始,计划要改变这种局面,于是就有 了Powershell的出现. 1.兼容shell命令 ...
- Check iO:初学Python
The end of other For language training our Robots want to learn about suffixes. In this task, you ar ...
- Apache本地服务无法自启动问题解决
问题描述: Windows不能在本地计算机启动Apache2.有关更多信息,查阅系统事件日志.如果这是非Microsoft服务,请与服务厂商联系,并参考特定服务错误代码1. 解决方案: 1.检查Apa ...