`
aasonwu
  • 浏览: 35227 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

跨浏览器添加javascript事件处理

 
阅读更多
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;
			}
		},
		getEvent:function(event){
			return event?event:window.event;
		},
		getTarget:function(event){
			return event.target||event.srcElement;
		},
		/**
		 * 获取事件相关元素
		 * @param event
		 * @returns
		 */
		getRelatedTarget:function(event){
			if(event.relatedTarget){
				return event.relatedTarget;
			}else if(event.toElement){
				return event.toElement;
			}else if(event.fromElement){
				return event.fromElement;
			}else {
				return null;
			}
		},
		/**
		 * 获取按下的鼠标键掩码
		 * @param event
		 * @returns
		 */
		getMouseButton:function(event){
			if(document.implementation.hasFeature("MouseEvents", "2.0")){
				return event.button;
			}else {
				switch (event.button) {
				case 0:
				case 1:
				case 3:
				case 5:
				case 7:
					return 0;
				case 2:
				case 6:
					return 2;
				case 4:
					return 1;
				}
			}
		},
		/**
		 * 获取鼠标滑轮属性
		 * @param event
		 * @returns
		 */
		getWheelDelta:function(event){
			if(event.wheelDelta){
				return (client.engine.opera&&client.engine.opera<9.5 ?
						-event.wheelDelta : event.wheelDelta);
			}else {
				return -event.detail * 40;
			}
		},
		/**
		 * 获取键盘掩码
		 * @param event
		 * @returns
		 */
		getCharCode:function(event){
			if(typeof event.charCode == "number"){
				return event.charCode;
			}else {
				return event.keyCode;
			}
		},
		/**
		 * 获取剪贴板数据
		 * @param event
		 * @returns
		 */
		getClipboardText:function(event){
			var clipboardData=(event.clipboardData || window.clipboardData);
			return clipboardData.getData("text");
		},
		/**
		 * 设置剪贴板数据
		 * @param event
		 * @param value
		 * @returns
		 */
		setClipboardText:function(event,value){
			if(event.clipboardData){
				return event.clipboardData.setData("text/plain",value);
			}else if(window.clipboardData){
				return window.clipboardData.setData("text",value);
			}
		},
		preventDefault:function(event){
			if(event.preventDefault){
				event.preventDefault();
			}else {
				event.returnValue=false;
			}
		},
		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;
			}
		},
		stopPropagation:function(event){
			if(event.stopPropagation){
				event.stopPropagation();
			}else {
				event.cancelBuble=true;
			}
		}
};


分享到:
评论

相关推荐

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

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

    javascript 跨浏览器的事件系统

    在探索跨浏览器的事件系统时,首先需要理解事件驱动编程的重要性以及JavaScript的事件模型。事件驱动编程是一种编程范式,在这种范式中,程序的流程由事件控制,例如用户与网页的交互动作、窗口行为、定时器到期等。...

    如何编写跨浏览器的javascript程序

    在JavaScript编程领域,编写跨浏览器代码是一项至关重要的技能。由于不同的浏览器对JavaScript的支持程度和实现方式存在差异,因此,为了确保程序在各种浏览器环境中都能正常运行,开发者需要掌握一些核心策略和技巧...

    跨浏览器解决方案

    4. **使用成熟的JavaScript库和框架**:jQuery、React、Vue等库和框架已经考虑了跨浏览器兼容性,使用它们可以减轻开发者的工作负担。 5. **自动化测试工具**:像BrowserStack、Sauce Labs这样的服务,允许开发者在...

    用于跨浏览器网页编程

    4. **使用框架和库**:许多流行的前端框架(如jQuery)已经内置了对跨浏览器兼容性的处理。 5. **测试**:在多个浏览器中进行充分的测试是确保跨浏览器兼容性的关键步骤之一。 #### 四、总结 跨浏览器编程是一项...

    详细解读JavaScript的跨浏览器事件处理

    在编写JavaScript代码时,经常会遇到需要处理跨浏览器兼容性问题,尤其是在事件处理方面。由于不同浏览器对于事件处理的支持存在差异,因此为了确保代码能够在所有浏览器中正常工作,需要采取一些特殊的措施。以下是...

    开发跨浏览器JavaScript时要注意的问题

    ### 开发跨浏览器JavaScript时要注意的问题 在进行Web开发时,跨浏览器兼容性问题一直是个让人头疼的话题。不同的浏览器对JavaScript的支持程度不一,尤其是在处理DOM元素时,开发者需要特别注意一些细节,确保代码...

    详解javascript跨浏览器事件处理程序

    跨浏览器事件处理是前端开发中的一个重要方面,它确保了在不同的浏览器环境下网页上的JavaScript事件能够正常运行。由于早期浏览器之间的实现差异较大,编写跨浏览器的事件处理代码变得复杂。在这篇文章中,我们将...

    跨浏览器打印网页数据

    综上所述,跨浏览器打印网页数据涉及的技术广泛,包括前端开发中的HTML、CSS和JavaScript,以及对不同浏览器特性的理解和兼容性处理。通过深入理解和熟练运用这些知识点,开发者可以创建出无论在哪种浏览器中都能...

    支持跨浏览器的日历控件(包含有时分秒与无时分秒两种)

    6. 兼容性处理:为了确保在所有目标浏览器上运行良好,需要进行跨浏览器测试并解决任何出现的问题。 7. 可访问性:考虑辅助技术(如屏幕阅读器)的兼容性,使有特殊需求的用户也能方便地使用日历控件。 8. 国际化...

    js跨浏览器是正对目前各浏览器标准不同

    使用`addEventListener`和`removeEventListener`来处理事件能更好地实现跨浏览器兼容。 5. **CSS前缀**: 浏览器厂商为了提前实现尚未标准化的CSS特性,会添加特定的前缀,如 `-webkit-`、`-moz-`、`-ms-` 和 `-o-...

    探究JavaScript中的五种事件处理程序方式

    // 第三个参数为布尔值,表示是否在捕获阶段处理事件 ``` 这种方法更强大,可以处理同一个事件的多个监听器,且控制事件处理顺序。 4. IE事件处理程序 Internet Explorer浏览器使用`attachEvent`和`detachEvent`...

    一个jQuery插件添加跨浏览器鼠标滚轮支持

    在这个场景中,我们关注的是一个名为"jQuery插件添加跨浏览器鼠标滚轮支持"的主题,它涉及到JavaScript和jQuery的特定功能——处理鼠标滚轮事件。 首先,我们要理解为什么需要这个插件。在不同的浏览器中,鼠标滚轮...

    纯JavaScript实现的兼容各浏览器的添加和移除事件封装

    通过这样的封装,开发者可以在不关心具体浏览器实现细节的情况下,方便地添加、移除事件监听器,并处理事件。这种跨浏览器的兼容性处理是JavaScript开发中的重要技巧,特别是在处理老版本浏览器时。同时,这也遵循了...

    JavaScript实现跨浏览器的添加及删除事件绑定函数实例

    不同的浏览器使用不同的方法来处理事件绑定,这给开发者带来了一些挑战。本文将详细讲解如何通过JavaScript实现跨浏览器的事件绑定和解绑函数,以便在各种浏览器中保持兼容性。 首先,让我们关注添加事件绑定的过程...

    js事件处理程序跨浏览器解决方案

    跨浏览器的JavaScript事件处理程序是前端开发中的一个重要知识点,主要解决不同浏览器在事件处理机制上的差异问题。以下是从给定文件内容中提取出的详细知识点: 1. 事件处理程序的基本概念:在JavaScript中,事件...

    ZeroClipboard跨浏览器复制到剪切板

    标题中的“ZeroClipboard跨浏览器复制到剪切板”是指一个JavaScript库,它的主要功能是允许用户在网页上通过点击按钮或者其他交互方式,实现文本内容复制到计算机的剪切板。这个功能在现代网页应用中非常常见,比如...

    javascript 跨浏览器开发经验总结(五) js 事件

    JavaScript跨浏览器开发中,事件处理是一个重要而复杂的主题,因为它涉及到不同浏览器之间的兼容性问题。在JavaScript中,事件是用户或浏览器对页面交互的响应,例如点击按钮、鼠标悬停等。本文主要讨论的是如何处理...

    编写跨浏览器的javascript代码必备[js多浏览器兼容写法]

    编写跨浏览器兼容的JavaScript代码是前端开发者必须掌握的技能,由于不同浏览器对JavaScript的解析和支持程度不一致,导致开发者在编写代码时必须考虑浏览器之间的差异性,以确保代码在不同的浏览器环境中都能正常...

Global site tag (gtag.js) - Google Analytics