`
wyf
  • 浏览: 435588 次
  • 性别: Icon_minigender_1
  • 来自: 唐山
社区版块
存档分类
最新评论

兼容所有浏览器事件注册

    博客分类:
  • JS
 
阅读更多
//EventUtil 的用法如下所示。
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;
 }
 }
}; 
//使用
var btn = document.getElementById("myBtn");
var handler = function(){
 alert("Clicked");
};
EventUtil.addHandler(btn, "click", handler);
//这里省略了其他代码
EventUtil.removeHandler(btn, "click", handler); 

 EventUtil增强

var EventUtil = {

 addHandler: function(element, type, handler){
 //省略的代码
 },
 getEvent: function(event){
 return event ? event : window.event;
 },
 getTarget: function(event){
 return event.target || event.srcElement;
 },

 preventDefault: function(event){
 if (event.preventDefault){
 event.preventDefault();
 } else {
 event.returnValue = false;
 }
 },

 removeHandler: function(element, type, handler){
 //省略的代码
 },
 stopPropagation: function(event){ 
if (event.stopPropagation){
 event.stopPropagation();
 } else {
 event.cancelBubble = true;
 }
 }
};

 Demo

var list = document.getElementById("myLinks");
EventUtil.addHandler(list, "click", function(event){
 event = EventUtil.getEvent(event);
 var target = EventUtil.getTarget(event);
 switch(target.id){
 case "doSomething":
 document.title = "I changed the document's title";
 break;
 case "goSomewhere":
 location.href = "http://www.wrox.com";
 break;
 case "sayHi":
 alert("hi");
 break;
 }
});

 

分享到:
评论

相关推荐

    JS兼容所有浏览器的DOMContentLoaded事件

    主要介绍了JS兼容所有浏览器的DOMContentLoaded事件的相关资料,标准浏览器中,使用DOMContentLoaded事件即可实现我们的要求,注册事件处理函数也极为简单,感兴趣的朋友一起学习吧

    javascript打造跨浏览器事件处理机制[Blue-Dream出品]

    在讨论如何使用JavaScript来创建一个跨浏览器的事件处理机制时,我们首先需要了解不同浏览器之间在事件处理方面的差异性,以及为了兼容这些差异,开发者们采取了哪些策略。以下是从给出的文件内容中提取出来的相关...

    vue-print-nb 兼容低版本浏览器

    然后,通过 `Vue.use(Print)` 这一行代码,将插件注册到Vue实例中,使得所有Vue组件都可以使用它的功能。 在实际应用中,`vue-print-nb` 提供了简单的API来触发打印操作。例如,可以在组件中调用 `this.$print()` ...

    拖拽兼容浏览器的容器js

    "拖拽兼容浏览器的容器js"是一个专注于实现跨浏览器拖放功能的JavaScript库。这个库的核心目标是确保在各种主流浏览器上,包括Chrome、Firefox、Safari、Edge和Internet Explorer等,都能实现一致的拖放体验。 在...

    二次封装WebUpLoader兼容一切浏览器

    4. 注册事件处理:监听上传相关的事件,如文件选择、上传进度、上传成功或失败等,然后添加相应的回调函数。 5. 自定义接口:根据项目需求,封装一些简单的API供其他模块调用,例如启动上传、暂停上传、清除已选文件...

    事件模型在各浏览器中存在差异

    在实际开发中,通常需要使用条件语句或库(如jQuery)来处理这些兼容性问题,确保代码在所有主流浏览器中都能正常运行。 事件对象在不同浏览器中的实现也存在差异。在DOM 2 Events中,Event接口提供了事件的相关...

    Firefox浏览器兼容JS脚本供参考

    确保在处理表单提交事件的函数中同时包含这两行代码,以覆盖所有浏览器。 3. **获取事件源** IE中,事件源是`event.srcElement`,而在Firefox中是`event.target`。编写兼容的代码时,需要根据浏览器类型选择适当的...

    MyIe绿色浏览器,免安装注册

    综上所述,MyIe绿色浏览器以其独特的便携性、无需注册的特性以及基于IE内核的兼容性,为用户提供了一个简单、快速且高效的上网工具。其丰富的辅助文件和资源使其在功能性和个性化方面具备一定的竞争力。用户只需简单...

    .net和 vb WebBrowser 浏览器兼容问题

    1. **检查注册表**:确保所有与WebBrowser控件相关的注册表项已正确注册。这可能涉及到.NET Framework的注册,以及COM组件(如MSHTML)的注册。 2. **更新或修复.NET Framework**:确认系统上安装的.NET版本与项目...

    前端学习笔记,做一个简单的网站-请自定义一个注册事件的兼容函数,要求兼容三种注册事件方法,学习代码

    本文将深入探讨如何编写一个兼容不同浏览器的注册事件函数,以满足跨浏览器的前端应用需求。我们将主要关注三种常见的事件注册方法:`addEventListener`、`attachEvent` 和直接在元素上设置 `on*` 属性。 首先,`...

    5款自定义登录表单样式,用户体验良好,外观优美,兼容主流浏览器

    本文将深入探讨5款设计精良、用户体验优秀且兼容主流浏览器的自定义登录表单样式,旨在提升网站或应用的吸引力和易用性。 一、表单设计原则 1. 清晰布局:一个优秀的登录表单应具备清晰的结构,让用户一眼就能识别...

    基于jQuery的网站左侧抽屉式分享浮动导航代码,可分享至微信微博等主流社交网站,可返回页面顶部,兼容主流浏览器.rar

    这篇文章将详细讲解如何使用jQuery实现一个功能丰富的网站左侧抽屉式分享浮动导航,该导航能够将内容分享到微信、微博等主流社交平台,并且具备返回页面顶部的功能,同时确保兼容主流浏览器。 首先,jQuery是一个轻...

    黑莓8830浏览器_黑莓4.5浏览器_opare浏览器6.5_最新浏览器

    2. 兼容性:不同的浏览器可能对某些网页的展示有不同的支持,尤其是那些使用复杂JavaScript或特定插件的网页。 3. 安全性:确保浏览器及时更新,以获得最新的安全补丁,防止潜在的网络安全威胁。 4. 用户体验:根据...

    浏览器调用VLC插件

    "浏览器调用VLC插件" 浏览器调用VLC插件是指在HTML5技术的支持下,在...浏览器调用VLC插件需要注册VLC插件、嵌入VLC插件代码、解决浏览器兼容性问题等多个步骤。只有正确地实现这些步骤,才能正确地播放多媒体文件。

    Metro风格带微信二维码在线客服代码,支持换色,兼容主流浏览器

    同时,为了兼容主流浏览器,如Chrome、Firefox、Safari和Edge,代码可能使用了跨浏览器的编程技术和polyfills,确保在不同浏览器环境下都能正常运行。 此外,考虑到换色功能,系统可能包含一套CSS样式管理机制,如...

    browserevent:WebdriverIO项目的插件可侦听客户端浏览器事件

    要注册事件,请调用addEventListener命令。 如果事件被调用,它将返回浏览器捕获的几乎完整的事件对象。 只有Window属性将被删除,以避免循环引用。 HTMLElement类型的所有对象都将被其xPath替换。 这将帮助您使用...

    Nodejs和浏览器的最小事件库

    总的来说,“Node.js和浏览器的最小事件库”是一个专注于轻量级、高效事件处理的工具,它在简化开发流程的同时,兼顾了性能和兼容性,为开发者提供了在Node.js和浏览器环境下进行事件编程的一个简洁选择。

    CSDN剪切板,跨浏览器复制

    开发者在使用这个工具时,可能需要了解相关的浏览器兼容性问题,以及如何正确处理这些兼容性问题,以确保在所有目标浏览器上都能正常工作。 总结来说,CSDN剪切板是一个解决跨浏览器文本复制问题的工具,特别适合...

    Java-Swing嵌入浏览器(本地浏览器和webkit浏览器-火狐内核)

    5. **事件处理**:可以注册监听器来响应浏览器的导航事件、加载状态变化和其他用户交互事件。 6. **控制和交互**:`Browser`对象提供了多种方法,如`execute()`用于执行JavaScript代码,或者`getHTML()`获取当前...

Global site tag (gtag.js) - Google Analytics