一、事件处理程序

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. Ubuntu+Win7双系统grub的修复问题

    最近,在grub引导的Ubuntu+Win7双系统上作业,用的是Ubuntu14.04.2.进行系统更新,更新到一般卡住了,恰好此时在进行grub相关文件的更新,我把机器重启后进入了grub resc ...

  2. python_way ,day25 CMDB_models (数据库设计)

    from django.db import models from django.contrib.auth.models import User # Create your models here. ...

  3. 《BI那点儿事》数据流转换——审核

    审核转换允许对数据流添加审核审核数据,以往使用HIPPA和Sarbanes-Oxley (SOX)时,必须跟踪谁在什么时插入数据,审核转换可以实现这种功能.例如要跟踪那一个task向表里插入数据,可以 ...

  4. 使用easyui时 进入一个新页面 前要经过一个页面混乱的时候 才到正常的页面去

    var width = $(window).width(); var height = $(window).height(); var html = "<div id='loading ...

  5. Security » Authentication » Identity介绍

    Introduction to Identity¶ By Pranav Rastogi, Rick Anderson, Tom Dykstra, Jon Galloway and Erik Reita ...

  6. lr各种问题以及解决办法

    LR 脚本为空的解决方法: 1.去掉ie设置中的第三方支持取消掉 2.在系统属性-高级-性能-数据执行保护中,添加loadrunner安装目录中的vugen.exe文件 遇到flight界面为空的解决 ...

  7. Centos 关闭后台进程 .sh 等

    命令后加 & 符号可以让其在后台运行 如: node app.js & 想要关闭分两步: ps aux | grep app.js 查看app.js  所运行的进程号 kill 进程号 ...

  8. angularjs简述

    1.MVC设计模式 MVC 是一种使用 MVC(Model View Controller 模型-视图-控制器)设计创建 Web 应用程序的模式 Model(模型)表示应用程序核心(比如数据库记录列表 ...

  9. mysql索引的使用[下]

    接着上篇,我们继续来探究索引.这次我们主要来探究关于联合索引的使用和联合.多表查询的规范. 继续看一下数据: mysql> select * from student order by ID d ...

  10. win7(64)位下WinDbg64调试VMware10下的win7(32位)

    win7(64)位下WinDbg64调试VMware10下的win7(32位) 一 Windbg32位还是64位的选择 参考文档<Windbg 32位版本和64位版本的选择> http:/ ...