【添加事件机制】  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事件机制兼容【整理】的更多相关文章

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

    前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...

  2. 重温javascript事件机制

    以前用过一段时间的jquery感觉太方便,太强大了,各种动画效果,dom事件.创建节点.遍历.控件及UI库,应有尽有:开发文档也很多,网上讨论的问题更是甚多,种种迹象表明jquery是一个出色的jav ...

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

    本文的解决方案可以用于Javascript native对象和宿主对象(dom元素),通过以下的方式来绑定和触发事件: 或者 var input = document.getElementsByTag ...

  4. 【探讨】javascript事件机制底层实现原理

    前言 又到了扯淡时间了,我最近在思考javascript事件机制底层的实现,但是暂时没有勇气去看chrome源码,所以今天我来猜测一把 我们今天来猜一猜,探讨探讨,javascript底层事件机制是如 ...

  5. JavaScript事件机制——细思极恐

    JavaScript事件机制,也有让人深思的东西.在一开始未深入了解,我头脑里有几个问题发出: 1. 自下而上(冒泡)事件怎么写,自上而下(捕获)又是怎么写? 2. 捕获型和冒泡型同时设置,谁生效? ...

  6. [解惑]JavaScript事件机制

    群里童鞋问到关于事件传播的一个问题:“事件捕获的时候,阻止冒泡,事件到达目标之后,还会冒泡吗?”. 初学 JS 的童鞋经常会有诸多疑问,我在很多 QQ 群也混了好几年了,耳濡目染也也收获了不少,以后会 ...

  7. 总结JavaScript事件机制

    JavaScript事件模型 在各种浏览器中存在三种事件模型: 原始事件模型 , DOM2事件模型 , IE事件模型. 其中原始的事件模型被所有浏览器所支持,而DOM2中所定义的事件模型目前被除了IE ...

  8. JavaScript——事件机制

    事件是将JavaScript脚本与网页联系在一起的主要方式,是JavaScript中最重要的主题之一,深入理解事件的工作机制以及它们对性能的影响至关重要.本文将详细介绍JavaScript的事件机制, ...

  9. javascript事件机制

    ① javascript绑定事件的方式 http://blog.iderzheng.com/dom-javascript-event-binding-comparison/ ② javascript事 ...

随机推荐

  1. 一行代码设置UITableView分割线的长度

    使用UITableView时会发现分割线的长度是这样的: 而QQ里面分割线左端到昵称的下面就截止了: 只需行代码就可以搞定: self.tableView.separatorInset = UIEdg ...

  2. SQL 经典练习

    SQL 基础练习 CREATE TABLE STUDENT(SNO VARCHAR(3) NOT NULL, SNAME VARCHAR(4) NOT NULL,SSEX VARCHAR(2) NOT ...

  3. hdu1272并查集入门

    小希的迷宫 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  4. C++智能指针初学小结

    本篇随笔仅作为个人学习<C++ Primer>智能指针一节后的部分小结,抄书严重,伴随个人理解.主要介绍shared_ptr.make_shared.weak_ptr的用法和联系. C++ ...

  5. [翻译] C++ STL容器参考手册 (总册)

    1. 写在最前面 这将是博主的第一篇技术博客,思考再三决定从翻译开始.这将是一个系列的博客,由不同的章节组成,章节之间由超链接联系,开发过程将使用增量式开发,每次完成一个章节.本篇是本系列的总册,提供 ...

  6. js中数组的检测方法

    在js中可以使用Object.prototype.toString.call()的来检测一个对象是否为一个数组 //检测数组 var a = [1, 2]; console.log(typeof a) ...

  7. js兼容性 - 动态删除script标签后 ,定义的函数是否执行

    hello.js function hello(){ alert('hello'); } hello.html <!DOCTYPE html> <html lang="en ...

  8. Erlang中的图形化检测工具(4)

    这儿例举出若干个用于检视运行时系统的图形化工具,这些工具可以很好地帮助我们增进对系统的理解.借助这些工具,我们可以很好地以图形化方式观察进程.应用和监督层级. (1) Appmon.Appmon 是用 ...

  9. 第一次碰到try-except(core python programming 2nd Edition 3.6)

    # coding: utf-8 # 使用Windows系统,首行'#!/usr/bin/env Pyton'无用,全部改为'# coding: utf-8' 'readtextfile.py -- r ...

  10. akoj-1140-英雄联盟阵营

    英雄联盟阵营 Time Limit:1000MS  Memory Limit:65536KTotal Submit:54 Accepted:16 Description 符文之地——瓦罗兰,作为最大的 ...