JavaScript事件机制详解
来源:互联网 发布:php5.6 mysql不支持 编辑:程序博客网 时间:2024/05/20 22:30
一、事件处理程序
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){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);
- JavaScript事件机制详解
- Javascript中事件机制详解
- Javascript中事件机制详解
- javascript打造跨浏览器事件处理机制:详解
- javascript事件机制详解(涉及移动兼容)
- javascript事件监听机制
- Javascript事件处理机制
- javascript的事件机制
- JavaScript 事件机制理解
- JavaScript 事件冒泡机制
- javascript的事件机制
- Javascript事件冒泡机制
- JavaScript事件监听机制
- JavaScript事件处理机制
- JavaScript原生事件机制
- javascript事件机制研究
- javascript事件处理机制
- javascript 事件冒泡机制
- Mac 配置为https服务器
- php中ereg() ,preg_match() 有啥区别?
- Ehcache 整合Spring 使用页面、对象缓存
- 动态规划C++::杭电ACM1003
- HTTP协议中PUT和POST使用区别
- JavaScript事件机制详解
- Java制作证书的工具keytool用法总结
- BM算法详解
- 直方图中bins应如何理解及处理
- 图像金字塔
- 蓝牙4.0中的GAP Advertising简介
- SAP-HR三大结构
- cocos2dx+vs2012+lua开发环境配置+BabeLua
- 杭电ACM2041楼梯问题