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;

  }

  }

时间: 2024-10-29 19:10:28

javaScript事件机制兼容【整理】的相关文章

【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)--转

前言 javascript事件基础 事件捕获/冒泡 事件对象 事件模拟 移动端响应速度 PC与移动端鼠标事件差异 touch与click响应速度问题 结论 zepto事件机制 注册/注销事件 zepto模拟tap事件 tap事件的问题一览 点透问题 fastclick思想提升点击响应 实现原理 鬼点击 ios与android鼠标事件差异 事件捕获解决鬼点击 结语 前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜

[解惑]JavaScript事件机制

[解惑]JavaScript事件机制 初学 JS 的童鞋经常会有诸多疑问,我在很多 QQ 群也混了好几年了,耳濡目染也也收获了不少,以后会总结下问题的结论,顺便说说相关知识的扩展~ 如果贸然回答还会冒泡,这不太好的,稍微严谨点考虑 0级 DOM 事件模型的话,这个答案是否定的.但是在 2级 DOM 事件模型中,答案是肯定的,这个问题值得探讨记录下. 本文地址:http://www.cnblogs.com/hustskyking/p/problem-javascript-event.html 一.

JavaScript事件机制

<script type="text/javascript" src="http://runjs.cn/gist/2zmltkfa/all"></script> [前端培养-作业01]javascript事件机制 1.javascript事件模型 2.e.target与e.currentTarget是干什么的? 3.preventDefault与stopPropagation是干什么的 4.什么是dispatchEvent? 5.说一说事件代

Javascript事件机制兼容性解决方案

原文:Javascript事件机制兼容性解决方案 本文的解决方案可以用于Javascript native对象和宿主对象(dom元素),通过以下的方式来绑定和触发事件: 或者 var input = document.getElementsByTagName('input')[0]; var form = document.getElementsByTagName('form')[0]; Evt.on(input, 'click', function(evt){ console.log('inp

6月第4周--javascript 事件机制

本周任务,对javascript事件机制进行思考 提供以下 几个博文 论点: 1.javascript事件模型 2.e.target与e.currentTarget是干什么的? 3.preventDefault与stopPropagation是干什么的 4.什么是dispatchEvent? 5.说一说事件代理的实现,并封装一个方法 6.事件代理的问题<li><span></span></li>如果同时给span与li绑定事件该如何组装冒泡??? 7.tap

javascript事件机制了解与深入

一.事件的捕获与冒泡 “DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段.处于目标阶段和事件冒泡阶段.下面这个图能够很形象的解释(理解捕获和冒泡必不可少的图) 按照图我们编写了代码去验证下, <div id="parent"> <div id="child"> child </div> </div> <script type="text/javascript"> var p = d

记一次途家面试中问到的JavaScript事件机制:Event Loop

前几天去途家面试,问到了事件机制,以及异步队列的问题.很遗憾,当时答错了.回来之后查了下资料,看到阮一峰老师博客的分析,感觉讲的非常浅显易懂,就分享过来了. 一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. JavaScript的单线程,与它的用途有关.作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线程,

JavaScript 事件机制

事件流是一个事件沿着特定数据结构传播的过程.冒泡和捕获是事件流在DOM中两种不同的传播方法. 事件流有三个阶段: 事件捕获阶段 处于目标阶段 事件冒泡阶段 什么是捕获和冒泡 假设有节点如下: <div id="div1"> <div id="div2"></div> </div> <script> let div1 = document.getElementById('div1'); let div2 =

javascript事件的类型整理

mouseenter:只能进入目标元素才会触发: mouseleave:只能离开目标元素才会触发: mouseover:进入目标元素或者其子元素的时候触发: mouseout:离开目标元素或者其子元素的时候触发: 图片的预加载使用load: keydown:按下,键码,按任意键触发: 支持属性event.keyCode; keypress:按下字符键触发,ASCII码,支持属性event.charCode; haschange事件:一定给window添加,显示url连接后面的值发生变化:even