添加事件及Event对象的兼容写法
一、事件流
事件流描述的是从页面中接受事件的顺序。
IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流
1、事件冒泡
事件冒泡,即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上转播至最不具体的节点(文档)。
2、事件捕获
事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件。
二、事件处理程序
1、HTML事件处理程序
2、DOM0级事件处理程序
3、DOM2级事件处理程序
DOM2级事件定义了两个方法:用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener()。它们都接收三个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。
4、IE事件处理程序
attachEvent()添加事件
detachEvent()删除事件
这两个方法接收相同的两个参数:事件处理程序名称与事件处理函数
5、跨浏览器的事件处理程序
三、事件对象
事件对象event
1、DOM中的事件对象
(1)、type:获取事件类型
(2)、target:事件目标
(3)、stopPropagation() 阻止事件冒泡
(4)、preventDefault() 阻止事件的默认行为
2、IE中的事件对象
(1)、type:获取事件类型
(2)、srcElement:事件目标
(3)、cancelBubble=true阻止事件冒泡
(4)、returnValue=false阻止事件的默认行为
var eventUtil={
// 添加兼容句柄
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent('on'+type,handler);
}else{
element['on'+type]=handler;
}
},
// 删除兼容句柄
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent('on'+type,handler);
}else{
element['on'+type]=null;
}
},
// 获取兼容事件对象
getEvent:function(event){
return event?event:window.event;
},
// 获取兼容的事件类型
getType:function(event){
return event.type;
},
// 获取兼容事件源,既触发事件的元素(事件的目标节点)
getElement:function(event){
return event.target || event.srcElement;
},
// 取消兼容默认事件
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
// 防止兼容冒泡
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
}
添加事件及Event对象的兼容写法的更多相关文章
- dom事件与event对象总结
1 事件:就是文档或浏览器窗口中发生的一些特定的交互瞬间. tips:js和xhtml的交互是通过当用户或浏览器操作网页时发生的事件来处理的. 1.1 事件流:即事件的顺序. 事件 ...
- javascript事件与event对象的属性
javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...
- Javascript防冒泡事件与Event对象
防冒泡 防冒泡用到的就是event的属性和方法 function add2shop(e) { if (!e) var e = window.event; e.cancelBubble = true; ...
- 事件的event对象基本解释
事件流: 描述的是在页面中接受事件的顺序主要分为两种: 事件冒泡.事件捕获 事件event对象:1. type 获取事件类型2. target获取事件目标3. stopPropagation() 阻止 ...
- 关于ev||event事件对象的兼容写法
因为FireFox Chrome默认都是有一个值传进来的,所以这里是对IE和FireFox Chrome做了兼容. 例如:页面点击事件事件要使用document,获取鼠标位置 document.onc ...
- 创建异步对象XHR的兼容写法、get、post上传数据的方式
兼容ie7以下,创建异步对象的函数 function creatXHR(){ if(typeof XMLHttpRequest != "undefined"){ return ne ...
- event对象和事件冒泡
<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>无标 ...
- HTML5中新添加事件
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
- vue.js - 奇怪的 event 对象
好久都没有写点东西了, 前段时间工作搞得头大,真的就是一起加班到死了.废话不多说,写这篇文章是因为这次因为 event 对象闹了一个乌龙,以此总结一下. 一.event 对象 (一)事件的 event ...
随机推荐
- 如何对sharepoint图片库的文件夹的图片按照时间排序并分页显示
/// <summary> /// 获取图片库第一层文件夹--根据文件夹名称排序 /// </summary> /// <param name="siteUrl ...
- sharepoint2010问卷调查(3)-实现问卷的开始和结束时间(采用自定义字段类型)
接着上面的图片调查,sharepoint自带的问卷调查是没有开始和结束时间的.这个在项目过程不太实用.问卷一般有开始和结束时间的.因此需要自己 动手开发一个自定义字段类型字段.如下图: 开发添加栏目会 ...
- EXCEL经纬度转化
=LEFT(A1,FIND("°",A1)-1)+MID(A1,FIND("°",A1)+1,FIND(CHAR(39),A1)-1-FIND("°& ...
- Snort - manual 笔记(五)
1.9 Miscellaneous 1.9.1 Running Snort as a Daemon 如果你想让Snort作为守护程序运行,你可以在最后加上 -D 选项.清注意如果你想通过发送一个 SI ...
- Convert.ChangeType不能处理Nullable类型的解决办法
在做一个ORMapping功能的时候发现,Convert.ChangeType不能处理nullable类型,比如int?. 解决办法也很简单,贴出完整的代码(大部分代码来自网络),注意下面代码没经过完 ...
- 【读书笔记】iOS网络-异步请求与运行循环
异步请求需要运行循环.当数据传递到服务器或是被客户端接收时,运行循环用于实现事件与委托对象之间的通信.异步请求在发出时,会在当前线程的运行循环上操作,这个实现细节是很重要的,因为在GCD块中或者是通过 ...
- MonoDevelop编辑器中文乱码解决
说解决乱码分几步,总共分三部! 1. Tools -> Options 2. 3.点击Font->点击TextEditor会出现下边选框,选取喜欢风格并且不乱码即可.
- php中的cookie用法
cookie和session都可以暂时保存在多个页面中使用的变量,但是它们有本质的差别. cookie存放在客户端浏览器中,session保存在服务器上.它们之间的联系是session ID一般保存在 ...
- 10个关于Java异常的常见问题
这篇文章总结了十个经常被问到的JAVA异常问题: 1.检查型异常VS非检查型异常 简单的说,检查型异常是指需要在方法中自己捕获异常处理或者声明抛出异常由调用者去捕获处理: 非检查型异常指那些不能解决的 ...
- 配置mysql远程访问权限,大家可能掉过的那些坑~
1 作为互联网技术从业人 或者粗暴点说:作为一个程序猿.测试从业者 如果没掉过一些坑,都不好意思说自己混过技术圈 2 今天重点讲:mysql开启远程访问权限的那些坑- 对于mysql开启远程访 ...