事件:
1.今天的事件
2.事件流
2.1冒泡型事件
引用
<html onclick="alert('响应了HTML元素的事件')">
<head>
<title>测试事件冒泡</title>
<script>
window.onload=function ()
{
document.onclick=function (){alert('响应了DOCUMENT的事件');}
};
</script>
</head>
<body onclick="alert('响应了body元素的事件')">
<div onclick="alert('响应了DIV元素的事件')">Click Me</div>
</body>
</html>
IE5.5按以下顺序冒泡:<div>--><body>--><document>
IE6.0按以下顺序冒泡:<div>--><body>--><html>--><document>
Mozilla及更高版本:<div>--><body>--><html>--><document>--><window>(非DOM标准的一部分)
2.2捕获型事件流
IE4.0采用冒泡型事件。相应Netscape Navigator4.0采用捕获型事件。
2.3DOM事件流
冒泡事件+捕获事件,捕获过程先发生,冒泡其次发生。
与ID不同,DOM标准中文本节点也触发事件。
3事件处理函数监听函数
3.1.分配事件的两种方式
方式1、<div onclick="alert('I was clicked')"></div>
方式2、
oDiv=document.getElementById('div1');
oDiv.onclick=function(){
alert('I was clicked');
};
3.2为一个事件分配多个事件处理函数
一、IE:
attachEvent()、detachEvent()
[Object].attachEvent("name_of_event_handler",fnHandler);
[Object].detachEvent("name_of_event_handler",fnHandler);
例如:
var fnClick=funtion (){
alert("Clicked");
}
var oDiv=document.getElementById("div");
//add the event handler
oDiv.attachEvent("onclick",fnClick);
//do some other stuff here
//remove the event handler
oDiv.detachEvent("onclick",fnClick);
事件附值方法与调用attachEvent方法:
附值法后面的会覆盖以前的,并且总是先被执行.添加顺序就像一个栈,附植的总是 被置于栈顶,其它的以栈顺序依次加入。
二、DOM标准
addEventListener()、removeEventListener()
//三个参数表示:事件名、要分配的函数、捕获阶段(true)还是冒泡阶段(false)
[Object].addEventListener("name_of_event",fnHandler,bCapture);
[Object].removeEventListener("name_of_event",fnHandler,bCapture);
说明:一、使用直接附值,后一个附值会清除前面的附值:
oDiv.onclick=fnClick;
oDiv.onclick=fnDifferentClick;//前面的附值将会无效
二、直接给属性附值,将会被添加到事件的冒泡阶段
如:oDiv.onclick=fnClick;
等价于:oDiv.addEventListener("onclick",fnClick,false);
三、删除事件函数时需要指定阶段,如果指定错误,则将不会删除,同时也不会出错
4 .事件对象
事件对象包含如下信息:
引起事件的对象:
事件发生时鼠标的信息:
事件发生时键盘的信息:
事件对象只在事件发生时被创建,且只有事件处理函数可以访问,当所有事件处理函数执行完毕后,事件对象就被销毁。
4.1、定义
访问事件对象的方式:
IE采用如下方式访问:
oDiv.onclick=function(){
var oEvent=window.event;
}
oDiv.onclick=function(){
var oEvent=arguments[0];
}
4.2事件对象的属性与方法:
分享到:
相关推荐
JavaScript事件是浏览器或Node.js环境中发生的特定行为,如用户点击按钮、页面加载完成或输入框获得焦点等。事件驱动编程是JavaScript的核心特性之一,通过监听和处理这些事件,我们可以创建响应式的用户体验。 二...
在标题提到的"EventDispatcher, js事件派发器, javascript事件派发器"中,我们可以理解这是一个JavaScript实现的事件派发器,可能是作者的原创工作。用户可以通过GitHub上的问题跟踪系统(Issue)报告任何发现的错误...
JavaScript(简称JS)...总的来说,JavaScript事件集合是构建动态和交互式网页的核心工具。通过深入理解和熟练应用事件监听、事件处理、事件冒泡、事件捕获等概念,开发者能够创建出更加丰富、响应迅速的Web应用程序。
实验报告详细介绍了JavaScript事件处理的相关知识,这在Web开发中是非常关键的一部分,因为事件是用户与网页交互的主要方式。以下是对各个知识点的详细说明: 1. **JavaScript事件基本概念**: - **事件**:是用户...
JavaScript 事件机制详细研究 JavaScript 事件机制是指浏览器中发生的各种事件,例如点击、鼠标悬停、键盘输入等,JavaScript 通过捕捉这些事件来执行相应的操作。本文将详细介绍 JavaScript 事件机制的实现方式和...
JS事件触发大全是指在 JavaScript 中各种事件的触发机制,这些事件可以在不同的元素上触发,例如按钮、链接、文本框、图片等。这些事件可以被 JavaScript 代码捕捉和处理,以便执行特定的操作。 事件类型 1. 鼠标...
Js事件大全 1.一般事件... 2 2.页面相关事件... 2 3.表单相关事件... 3 4.滚动字幕事件... 3 5.编辑事件... 3 6.数据绑定... 4
全面,直观javascript的事件
在JavaScript中,监听浏览器窗口关闭事件对于实现特定的用户交互或数据保存功能至关重要。下面将详细介绍几种常用的浏览器关闭事件监听方法。 1. 方式一:适用于IE浏览器,仅在关闭时提示 ```javascript window....
如何给javascript js事件传递参数.zip
在这个"10-JS事件基础"的教程中,我们将深入理解JavaScript中的事件处理机制,包括事件对象、事件冒泡、DOM事件流以及鼠标和键盘事件。 首先,让我们了解一下什么是事件对象。在JavaScript中,每当发生一个事件(如...
JavaScript事件是Web开发中不可或缺的一部分,它允许用户与网页进行交互并响应用户的操作。...在阅读`event.js`这个文件和相关的博客文章后,你将能够深入理解JavaScript事件系统,并将其应用到自己的项目中。
JavaScript事件code对应表是JavaScript编程中非常重要的一个概念,它涉及到浏览器如何处理用户与网页的交互。在网页中,无论是点击按钮、滚动页面还是按下键盘上的键,都会触发各种事件。事件code就是用来识别这些...
通过自定义右键菜单,我们可以提升网页的用户体验,同时这也是一个很好的实践JavaScript事件处理和DOM操作的机会。记得在实际应用中考虑兼容性问题,确保你的代码能在不同的浏览器和设备上正常工作。
JavaScript事件学习小结(五)js中事件类型之鼠标事件 //www.jb51.net/article/86259.htm JavaScript事件学习小结(一)事件流 //www.jb51.net/article/86261.htm javaScript事件学习小结(四)event的公共成员...
jem.js(Javascript 事件管理器) 这是一个 Javascipt 库,可帮助我们编写事件驱动的 Javascript 代码。 没有依赖项,没有 jQuery,没有其他库。 这与 DOM 无关。 jem.js 用于您的自定义事件。 欢迎任何形式的...
eventdispatcher.js, 自定义对象的JavaScript事件 eventdispatcher.js 自定义对象的JavaScript事件用法[removed][removed][removed]
JAVASCRIPT 实现OPTION的事件触发
JavaScript事件监听机制是前端开发中不可或缺的一部分,它用于处理页面元素的各种交互,如点击、鼠标移动等。在本文中,我们将深入探讨事件监听,特别是事件捕获这一概念,以及如何在不同的浏览器环境中实现兼容。 ...
SVG事件和JavaScript事件的结合使得交互式图形成为可能。例如,你可以为SVG元素添加点击事件监听器,当用户点击某个图形时触发特定的JavaScript函数。这可以用于显示详细信息、导航或执行其他操作。SVG事件包括`...