js跨浏览器事件对象、事件处理程序
项目中有时候会不用jquery这么好用的框架,需要自己封装一些事件对象和事件处理程序,像封装AJAX那样;
这里面考虑最多的还是浏览器的兼容问题,原生js封装如下:
var EventUtil={
//节点、事件名、事件处理函数
addHanler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);//这里一个参数为false意为在事件冒泡阶段调用事件处理程序,true为事件捕获阶段调用
}
else if(element.attachEvent)
{
element.attachEvent("on"+type,handler);//IE8及以下只支持事件冒泡
}
else{
element["on"+type]=handler;//DOM0级对每个事件只支持一个事件处理程序
}
}
RemoveHanler: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;//移除
}
}
//返回对event对象的引用
getEvent:function(event){
return event?event:window.event;
}
//返回事件目标
getTarget:function(event){
return event.target||envet.srcElement;
}
//取消事件默认行为
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}
else{
event.returnVlaue=false;
}
}
//阻止事件流
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}
else{
event.cancleBubble=true;
}
}
}
js跨浏览器事件对象、事件处理程序的更多相关文章
- 跨浏览器的javascript事件的封装
一,跨浏览器的事件处理程序 1,DOM0级处理事件 将一个函数赋值给一个事件处理程序属性. 事件流:冒泡阶段. 使用: 为元素增加事件: var btn = document.getElementBy ...
- JS跨浏览器的事件处理
1. 事件流 事件:用户或浏览器自身执行的某种动作.如click(点击事件).mouse***(鼠标事件). 事件流:页面中接收事件的顺序,也可理解为事件在页面中传播的顺序. DOM事件流包括三个阶段 ...
- store.js 跨浏览器的localStorage
store.js 跨浏览器的localStorage 我们总是想要储存一些数据在浏览器端,却对复杂的兼容性头疼,store.js很好的解决了这些问题. store.js ☍ 使用它相当简单: // 储 ...
- JS事件流、DOM事件流、IE事件处理、跨浏览器事件处理、事件对象与类型
事件的移除 removeEventListener() 第二个参数需要指定要移除的事件句柄,不能是匿名函数,因为无法识别 想要移除成功,那么三个参数必须跟addEventListener中的三个完全一 ...
- js 跨浏览器实现事件
我们知道不同的浏览器实现事件是不同的,就比如说我们常见的有三种方法: 1,dom0处理事件的方法,以前的js处理事件都是这样写的. (function () { var p=document.getE ...
- JavaScript 事件 事件流 事件对象 事件处理程序 回调函数 error和try...catch和throw
参考资料: 慕课网 DOM事件探秘 js事件对象 处理 事件驱动: JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个时间,该时间会驱动某些函数 ...
- JavaScript Event 事件 事件流 事件对象 事件处理程序 回调函数 error和try...catch和throw
参考资料: 慕课网 DOM事件探秘 js事件对象 处理 事件驱动: JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个事件,该事件会驱动某些函数 ...
- ZeroClipboard / jquery.zclip.min.js跨浏览器复制插件使用中遇到的问题解决
之前写过一个淘宝优惠券连接PC端转手机端连接的小工具,当时写到将转换好的url复制到剪切板这块时解决了IE和火狐,就是没办法搞定Chrome,知道可以通过flash搞定,但是觉得太麻烦没有仔细研究. ...
- js跨浏览器的事件处理函数
/* 跨浏览器的事件处理函数 */ var EventUtil = { addHandler : function(element,type,handler){ if(element.addEvent ...
随机推荐
- C++运行字符编码于MSVC和GCC之间的区别
详细请参考这篇博文 http://blog.csdn.net/dbzhang800/article/details/7540905 运行字符编码就是指,当你源代码写下const char* p = & ...
- ♫【CSS】命名颜色
color: aqua; 每个浏览器都支持一套它能识别且能正确渲染的命名颜色.这些颜色包括: aqua 浅绿色 #00ffffblack 黑色 #000000blue 蓝色 #0000fffuchsi ...
- 【Android 复习】:Android之ViewFlipper(二)
通过手势移动屏幕 上面是通过屏幕上的按钮来在屏幕间切换的,这看起来多少有点不符合Android的风格,如果要是能通过手势的左右滑动来实现屏幕的切换就比较优雅了. 通过android.view.Gest ...
- DevExpress右键菜单使用 zt
添加BarManager和popupMenu组建: 设置popupMenu组件的Manager属性: 右键点击popupMenu主键,点击Customize选项添加菜单: 然后便可添加到鼠标事件中 ...
- JavaScript---网络编程(1)-介绍、变量、运算符与语句
JavaScript也是一种编程语言.并不是Java的分支哦. 可以直接在浏览器中运行的编程语言. JavaScript 的历史故事: 1.JavaScript语言与名称的由来(Netscape,Su ...
- 2D游戏编程2--windows高级编程
windows应用程序布局 编译流程 响应菜单事件消息 菜单消息处理实例: LRESULT CALLBACK WindowProc(HWND hwnd, UINT msg, WPARAM wpar ...
- [LeetCode] 86. Partition List 解题思路
Given a linked list and a value x, partition it such that all nodes less than x come before nodes gr ...
- 关于一个WCF调用的服务端和客户端的配置信息集合
客户端的配置我知道. 但是: httpTransport maxReceivedMessageSize="2147483647" <dataContractSerialize ...
- 三种排序算法python源码——冒泡排序、插入排序、选择排序
最近在学习python,用python实现几个简单的排序算法,一方面巩固一下数据结构的知识,另一方面加深一下python的简单语法. 冒泡排序算法的思路是对任意两个相邻的数据进行比较,每次将最小和最大 ...
- Android之PreferenceActivity 详解
看到很多书中都没有对PreferenceActivity做介绍,而我正好又在项目中用到,所以就把自己的使用的在这总结一下,也方便日后查找. PerferenceActivity是什么,看下面的截图: ...