`
fuhao_987
  • 浏览: 63924 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

js事件

阅读更多
事件:
DOM事件:firefox, opera, safari 和 chrome
专有事件:ie

DOM事件流:
document -> html -> body (捕获阶段)-> div(目标,事件发生) ->body -> html ->document(冒泡阶段)
包括HTML事件处理程序,DOM0级事件处理程序,DOM2级事件处理程序
DOM2级事件处理程序,两个方法addEventListener(事件名,事件处理程序函数,布尔值)和removeEventListener()
布尔值的参数:true->在捕获阶段调用事件处理程序;false->在冒泡阶段调用事件处理程序
例如:
addEventListener("click",function(){alert(this.id)},false);this->元素的作用域

IE事件:
两个方法attachEvent(事件处理程序名称,事件处理程序函数)和detachEvent()
例如:attachEvent("onclick",function(){alert(this === window)});//true,事件处理程序在全局作用域
-------------------------------------------------------------
跨浏览器的事件处理:
 var EventUtil = {
		addHandler: function(element, type, handler){
			if(element.addEventListener){
				element.addEventListener(type,handler,false);//dom2级
			}else if(element.attachEvent){
				element.attachEvent("on" + type,handler);//ie
			}else{
				element["on" + type] = handler;
			}
		},
		removerHandler: 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;
		},
		getTarget: 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;
			}
		},//取消事件的进一步冒泡
		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;
			}
		},//取得相关元素的信息,只针对mouseover和mouseout
		getButton: 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;
				}
			}
		}//获得点击鼠标的情况
	};
分享到:
评论

相关推荐

    使用JavaScript事件综合查询,js事件大全

    JavaScript事件是浏览器或Node.js环境中发生的特定行为,如用户点击按钮、页面加载完成或输入框获得焦点等。事件驱动编程是JavaScript的核心特性之一,通过监听和处理这些事件,我们可以创建响应式的用户体验。 二...

    EventDispatcher,js事件派发器,javascript事件派发器

    在标题提到的"EventDispatcher, js事件派发器, javascript事件派发器"中,我们可以理解这是一个JavaScript实现的事件派发器,可能是作者的原创工作。用户可以通过GitHub上的问题跟踪系统(Issue)报告任何发现的错误...

    事件集合js事件集合js事件集合

    JavaScript(简称JS)...总的来说,JavaScript事件集合是构建动态和交互式网页的核心工具。通过深入理解和熟练应用事件监听、事件处理、事件冒泡、事件捕获等概念,开发者能够创建出更加丰富、响应迅速的Web应用程序。

    JavaScript程序设计——事件处理实验报告.docx

    实验报告详细介绍了JavaScript事件处理的相关知识,这在Web开发中是非常关键的一部分,因为事件是用户与网页交互的主要方式。以下是对各个知识点的详细说明: 1. **JavaScript事件基本概念**: - **事件**:是用户...

    JavaScript事件机制详细研究

    JavaScript 事件机制详细研究 JavaScript 事件机制是指浏览器中发生的各种事件,例如点击、鼠标悬停、键盘输入等,JavaScript 通过捕捉这些事件来执行相应的操作。本文将详细介绍 JavaScript 事件机制的实现方式和...

    js事件触发大全

    JS事件触发大全是指在 JavaScript 中各种事件的触发机制,这些事件可以在不同的元素上触发,例如按钮、链接、文本框、图片等。这些事件可以被 JavaScript 代码捕捉和处理,以便执行特定的操作。 事件类型 1. 鼠标...

    js 事件大全带简要注释

    Js事件大全 1.一般事件... 2 2.页面相关事件... 2 3.表单相关事件... 3 4.滚动字幕事件... 3 5.编辑事件... 3 6.数据绑定... 4

    javascript事件思维导图

    全面,直观javascript的事件

    JS针对浏览器窗口关闭事件的监听方法集锦

    在JavaScript中,监听浏览器窗口关闭事件对于实现特定的用户交互或数据保存功能至关重要。下面将详细介绍几种常用的浏览器关闭事件监听方法。 1. 方式一:适用于IE浏览器,仅在关闭时提示 ```javascript window....

    如何给javascript js事件传递参数.zip_jsp js

    如何给javascript js事件传递参数.zip

    10-JS事件基础.pptx

    在这个"10-JS事件基础"的教程中,我们将深入理解JavaScript中的事件处理机制,包括事件对象、事件冒泡、DOM事件流以及鼠标和键盘事件。 首先,让我们了解一下什么是事件对象。在JavaScript中,每当发生一个事件(如...

    javascript 事件

    JavaScript事件是Web开发中不可或缺的一部分,它允许用户与网页进行交互并响应用户的操作。...在阅读`event.js`这个文件和相关的博客文章后,你将能够深入理解JavaScript事件系统,并将其应用到自己的项目中。

    js 事件code 对应表

    JavaScript事件code对应表是JavaScript编程中非常重要的一个概念,它涉及到浏览器如何处理用户与网页的交互。在网页中,无论是点击按钮、滚动页面还是按下键盘上的键,都会触发各种事件。事件code就是用来识别这些...

    js右键菜单主要讲的JS事件流 一定要收藏哦

    通过自定义右键菜单,我们可以提升网页的用户体验,同时这也是一个很好的实践JavaScript事件处理和DOM操作的机会。记得在实际应用中考虑兼容性问题,确保你的代码能在不同的浏览器和设备上正常工作。

    JavaScript事件学习小结(五)js中事件类型之鼠标事件

    JavaScript事件学习小结(五)js中事件类型之鼠标事件 //www.jb51.net/article/86259.htm JavaScript事件学习小结(一)事件流 //www.jb51.net/article/86261.htm javaScript事件学习小结(四)event的公共成员...

    jem.js:Javascript 事件管理器

    jem.js(Javascript 事件管理器) 这是一个 Javascipt 库,可帮助我们编写事件驱动的 Javascript 代码。 没有依赖项,没有 jQuery,没有其他库。 这与 DOM 无关。 jem.js 用于您的自定义事件。 欢迎任何形式的...

    eventdispatcher.js, 自定义对象的JavaScript事件.zip

    eventdispatcher.js, 自定义对象的JavaScript事件 eventdispatcher.js 自定义对象的JavaScript事件用法[removed][removed][removed]

    JS事件OPTION事件触发

    JAVASCRIPT 实现OPTION的事件触发

    js事件监听机制(事件捕获)总结

    JavaScript事件监听机制是前端开发中不可或缺的一部分,它用于处理页面元素的各种交互,如点击、鼠标移动等。在本文中,我们将深入探讨事件监听,特别是事件捕获这一概念,以及如何在不同的浏览器环境中实现兼容。 ...

    svg加snap.svg.js能做出饼状图,柱状图,折线图,svg事件和js事件的结合,svg坐标

    SVG事件和JavaScript事件的结合使得交互式图形成为可能。例如,你可以为SVG元素添加点击事件监听器,当用户点击某个图形时触发特定的JavaScript函数。这可以用于显示详细信息、导航或执行其他操作。SVG事件包括`...

Global site tag (gtag.js) - Google Analytics