一、事件处理程序

a.     DOM0级事件处理程序,被认为是元素的方法。

var btn=document.getElementById('myBtn');
btn.onclick=function(){
alert(this.id); //'myBtn'
};

在事件处理程序中,通过this访问元素的任何属性和方法。

b.    DOM2级事件处理程序

DOM2级事件定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener( )和removeEventListener( )。

所有节点都包含这两个方法,都接受3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。如果这个布尔值为true,表示在捕获阶段调用事件处理程序;如果这个布尔值为false,表示在冒泡阶段调用事件处理程序。

obj.addEventListener('click',function(){
console.log('捕获模式');
},true);
obj.addEventListener('click',function(){
  console.log('冒泡模式');
},false);

使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序,并按照添加顺序触发。

通过addEventListener( )添加的事件处理程序只能使用removeEventListener()来移除,移除时传入的参数与添加处理程序时使用的参数相同。因此,通过addEventListener( )添加的匿名函数将无法删除。

var btn=document.getElementById('myBtn');
btn.addEventListener('click',function(){
alert(this.id);
},false);
//此时removeEventLister方法无效,因为function是匿名函数,与addEventListener中的不同。
btn.removeEventListener('click',function(){
alert(this.id);
},false);

正确方式:

var btn=document.getElementById('myBtn');
var handle =function(){
alert(this.id);
};
btn.addEventListener('click',handle,false);
//此时removeEventListener有效
btn.removeEventListener('click',handle,false);  

IE9,Firefox,Safari,Chrome和Opera支持DOM2级事件处理程序。

c.     IE事件处理程序

IE实现了与DOM中类似的两个方法:attachEvent( )和detachEvent()。

这两个方法相同的两个参数:事件处理程序名称与事件处理程序函数。IE8级之前版本只支持事件冒泡,所以通过attachEvent( )添加的时间处理程序都会被添加到冒泡阶段。

var btn=document.getElementById('myBtn');
var handle =function(){
alert(this.id);
};
btn.attachEvent('onclick',handle);

注意:在通过detachEvent( )来移除使用attachEvent()添加的事件时,条件是必须提供相同的参数,与DOM方法一样,添加的匿名函数也不能被移除。

在IE中使用attachEvent()与使用DOM0级方法的主要区别在于事件处理程序的作用域。

DOM0级方法中,事件处理程序会在其所属元素的作用域内运行,在使用attachEvent() 方法时,事件处理程序会在全局作用域中运行,因此,this等于window。

二、 IE与Firefox的事件机制区别

IE8及以前版本

Firefox即IE9+

事件处理方法

attachEvent( )和detachEvent( )

addEventListener( )和removeEventListener()

接受参数

两个:事件处理程序名称和事件处理程序函数

三个:事件处理程序名称,事件处理程序函数,布尔值

支持事件类型

仅支持事件冒泡

支持事件冒泡和事件捕获

第一个参数

需在事件前添加on,例如onclick

不需在事件前添加on,例如click

为一个元素添加多个事件处理程序执行顺序

按照与添加顺序相反的顺序执行,即后添加,先执行

按照添加顺序执行,即先添加,先执行

移除事件,参数设置

detachEvent( )中的参数需与attachEvent( )传入的参数一致,即两个参数

removeEventListener( )中的参数addEventListener( )传入的参数一致,即要三个参数

三、跨浏览器的事件处理程序

var EventUtil = {  
  // 添加事件
addHandler:function(element,type,handle){
if (element.addEventListener) {
element.addEventListener(type,handle,false);
}else if(element.attachEvent){ //IE
element.attachEvent("on"+type,handle);
}else{
element["on"+type]=handle;
},
  //删除事件
removeHandle:function(element,type,handle) {
if (element.removeEventListener) {
element.removeEventListener(type,handle,false);
}else if (element.detachEvent) {
element.detachEvent("on"+type,handle);
    }else{
element["on"+type]=null;
}
}
}
};
var btn=document.getElementById('myBtn');
var handle = function(){
  alert("Cliked");
  };
EventUtil.addHandler(btn,"click",handle);
EventUtil.removeHandle(btn,"click",handle);

js事件处理机制的更多相关文章

  1. Cocos2d-JS事件处理机制

    在很多图形用户技术中,事件处理机制一般都有三个重要的角色:事件.事件源和事件处理者.事件源是事件发生的场所,通常就是各个视图或控件,事件处理者是接收事件并对其进行处理的一段程序.事件处理机制中三个角色 ...

  2. 从浏览器多进程到JS单线程,JS运行机制的一次系统梳理

    前言 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会及时修正. ----------超长文+多图预警,需要花费不少时间.---------- 如果看完本文后,还对进程线程傻傻分不清,不清楚浏 ...

  3. 从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理

    前言 来源:https://dailc.github.io/2018/01/21/js_singlethread_eventloop.html 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会 ...

  4. Atitit. Java script 多重多重catch语句的实现and Javascript js 异常机制

    Atitit. Java script 多重多重catch语句的实现and Javascript js 异常机制 1. 语法错误(ERROR)和运行期错误(Exception) 1 2. 错误类型判断 ...

  5. js执行机制

    js是单线程的,为什么可以执行异步操作呢? 这归结与浏览器(js的宿主环境)通过某种方式使得js具备了异步的属性. 区分进程和线程: 进程:正在运行中的应用程序.每个进程都自己独立的内存空间.例如:打 ...

  6. Cocos2d-x之事件处理机制

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. 事件处理机制分为单点触屏,多点触屏,加速度事件,键盘事件和鼠标事件.在现在的智能手机中,触屏的应用比较的广泛,尤其是多点触屏事件的技术,使 ...

  7. Nginx基础知识学习(安装/进程模型/事件处理机制/详细配置/定时切割日志)

    一.Linux下Nginx的安装 1.去官网 http://nginx.org/download/下载对应的Nginx安装包,推荐使用稳定版本. 2.上传Nginx到Linux服务器. 3.安装依赖环 ...

  8. java 事件处理机制:按下上下左右键控制小球的运动

    /** * 加深对事件处理机制的理解 * 通过上下左右键来控制一个小球的位置 */package com.test3;import java.awt.*;import javax.swing.*;im ...

  9. Android事件处理机制

    包括监听和回调两种机制. 1. 基于监听的事件处理: 事件监听包含三类对象,事件源,事件,事件监听器.Android的事件处理机制是一种委派式(Delegation)事件处理方式:普通组件(事件源)将 ...

随机推荐

  1. boost 编译,windows平台

    下载Boost及生成bjam.exe文件 到Google网站搜索下载boost_1.52版本库,下载完成后,解压到X:下,这个地址自己随便定义.在解压的文件中搜索build.bat文件,把它所在的目录 ...

  2. hdu3065病毒侵袭持续中

    链接 上一篇的姊妹篇 没啥好说的 套模板 #include <iostream> #include<cstdio> #include<cstring> #inclu ...

  3. linux下查看某软件是否已安装, ubuntu安装deb包

    1.rpm包安装的,可以用rpm -qa看到,如果要查找某软件包是否安装,用 rpm -qa | grep “软件或者包的名字”. [root@hexuweb102 ~] rpm -qa | grep ...

  4. mysql数据库编码问题

    http://www.cnblogs.com/sunzn/archive/2013/03/14/2960248.html 修改/etc/my.cnf 添加: [mysql] default-chara ...

  5. jquery获取(设置)节点的属性与属性值

    1. attr(属性名)        //获取属性的值(取得第一个匹配元素的属性值.通过这个方法可以方便地从第一个匹配元素中获取一个属性的值.如果元素没有相应属性,则返回 undefined ) 2 ...

  6. 【python】selenium+python自动化测试环境搭建

    参考资料: http://www.cnblogs.com/fnng/archive/2013/05/29/3106515.html http://www.easonhan.info/python/20 ...

  7. PHP 二维码解码 (读取二维码)

    #zbar wget http://ncu.dl.sourceforge.net/project/zbar/zbar/0.10/zbar-0.10.tar.bz2 yum install gtk2 g ...

  8. 测试秒杀新版本3.5 stieserver cms

    EXP: 直接访问UserCenter/login.aspx 用户名处输入: 123′insert into bairong_Administrator([UserName],[Password],[ ...

  9. js面向对象选项卡

    window.onload=function() //面向对象 { var tab=new tabSwitch("div1"); var tab=new tabSwitch(&qu ...

  10. CodeForces #367 div2 D Trie

    题目链接:Vasiliy's Multiset 题意:这里有一个set容器,有三种操作,+ num, - num, ? num,分别代表往容器里加上num,或者拿走num,或着从容器里找一个数temp ...