js事件处理机制
一、事件处理程序
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事件处理机制的更多相关文章
- Cocos2d-JS事件处理机制
在很多图形用户技术中,事件处理机制一般都有三个重要的角色:事件.事件源和事件处理者.事件源是事件发生的场所,通常就是各个视图或控件,事件处理者是接收事件并对其进行处理的一段程序.事件处理机制中三个角色 ...
- 从浏览器多进程到JS单线程,JS运行机制的一次系统梳理
前言 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会及时修正. ----------超长文+多图预警,需要花费不少时间.---------- 如果看完本文后,还对进程线程傻傻分不清,不清楚浏 ...
- 从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理
前言 来源:https://dailc.github.io/2018/01/21/js_singlethread_eventloop.html 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会 ...
- Atitit. Java script 多重多重catch语句的实现and Javascript js 异常机制
Atitit. Java script 多重多重catch语句的实现and Javascript js 异常机制 1. 语法错误(ERROR)和运行期错误(Exception) 1 2. 错误类型判断 ...
- js执行机制
js是单线程的,为什么可以执行异步操作呢? 这归结与浏览器(js的宿主环境)通过某种方式使得js具备了异步的属性. 区分进程和线程: 进程:正在运行中的应用程序.每个进程都自己独立的内存空间.例如:打 ...
- Cocos2d-x之事件处理机制
| 版权声明:本文为博主原创文章,未经博主允许不得转载. 事件处理机制分为单点触屏,多点触屏,加速度事件,键盘事件和鼠标事件.在现在的智能手机中,触屏的应用比较的广泛,尤其是多点触屏事件的技术,使 ...
- Nginx基础知识学习(安装/进程模型/事件处理机制/详细配置/定时切割日志)
一.Linux下Nginx的安装 1.去官网 http://nginx.org/download/下载对应的Nginx安装包,推荐使用稳定版本. 2.上传Nginx到Linux服务器. 3.安装依赖环 ...
- java 事件处理机制:按下上下左右键控制小球的运动
/** * 加深对事件处理机制的理解 * 通过上下左右键来控制一个小球的位置 */package com.test3;import java.awt.*;import javax.swing.*;im ...
- Android事件处理机制
包括监听和回调两种机制. 1. 基于监听的事件处理: 事件监听包含三类对象,事件源,事件,事件监听器.Android的事件处理机制是一种委派式(Delegation)事件处理方式:普通组件(事件源)将 ...
随机推荐
- boost 编译,windows平台
下载Boost及生成bjam.exe文件 到Google网站搜索下载boost_1.52版本库,下载完成后,解压到X:下,这个地址自己随便定义.在解压的文件中搜索build.bat文件,把它所在的目录 ...
- hdu3065病毒侵袭持续中
链接 上一篇的姊妹篇 没啥好说的 套模板 #include <iostream> #include<cstdio> #include<cstring> #inclu ...
- linux下查看某软件是否已安装, ubuntu安装deb包
1.rpm包安装的,可以用rpm -qa看到,如果要查找某软件包是否安装,用 rpm -qa | grep “软件或者包的名字”. [root@hexuweb102 ~] rpm -qa | grep ...
- mysql数据库编码问题
http://www.cnblogs.com/sunzn/archive/2013/03/14/2960248.html 修改/etc/my.cnf 添加: [mysql] default-chara ...
- jquery获取(设置)节点的属性与属性值
1. attr(属性名) //获取属性的值(取得第一个匹配元素的属性值.通过这个方法可以方便地从第一个匹配元素中获取一个属性的值.如果元素没有相应属性,则返回 undefined ) 2 ...
- 【python】selenium+python自动化测试环境搭建
参考资料: http://www.cnblogs.com/fnng/archive/2013/05/29/3106515.html http://www.easonhan.info/python/20 ...
- PHP 二维码解码 (读取二维码)
#zbar wget http://ncu.dl.sourceforge.net/project/zbar/zbar/0.10/zbar-0.10.tar.bz2 yum install gtk2 g ...
- 测试秒杀新版本3.5 stieserver cms
EXP: 直接访问UserCenter/login.aspx 用户名处输入: 123′insert into bairong_Administrator([UserName],[Password],[ ...
- js面向对象选项卡
window.onload=function() //面向对象 { var tab=new tabSwitch("div1"); var tab=new tabSwitch(&qu ...
- CodeForces #367 div2 D Trie
题目链接:Vasiliy's Multiset 题意:这里有一个set容器,有三种操作,+ num, - num, ? num,分别代表往容器里加上num,或者拿走num,或着从容器里找一个数temp ...