JavaScript监听浏览器刷新或是关闭事件

JavaScript监听浏览器刷新或是关闭事件
JavaScript监听浏览器刷新或是关闭事件

JS监听关闭浏览器事件

关键字: js监听关闭浏览器事件

Onunload与Onbeforeunload

Onunload,onbeforeunload都是在刷新或关闭时调用,可以在

Java代码

这段代码在FF和IE上都能正确执行.再点击关闭按钮时首先触发obbeforeunload事件,点击否定时不执行onload事件.

这段代码在FF和IE上都能正确执行.再点击关闭按钮时首先触发obbeforeunload事件,点击否定时不执行onload事件.Java代码

通常应用在注销session等等登陆信息等方面....

通常应用在注销session等等登陆信息等方面....Java代码

这里一并推荐一个ActionScript3的好教程: https://www.360docs.net/doc/c510191093.html,/talks/as3workshop/

这里一并推荐一个ActionScript3的好教程: https://www.360docs.net/doc/c510191093.html,/talks/as3workshop/写道

运用onunload事件判断浏览器是刷新还是关闭窗口

写道

function CloseOpen(event) {

if(event.clientX<=0 && event.clientY<0) {

alert("关闭");

}

else

{

alert("刷新或离开");

}

}

Java代码

window.onbeforeunload = function() //author: meizz

{

var n = window.event.screenX - window.screenLeft;

var b = n > document.documentElement.scrollWidth-20;

if(b && window.event.clientY < 0 || window.event.altKey)

{

alert("是关闭而非刷新");

window.event.returnValue = ""; //这里可以放置你想做的操作代码}

}

[网站制作,找田响没错!]

或者使用全屏打开页面[网站制作,找田响没错!]

[网站制作,找田响没错!]

注:在body标签里加上onbeforeunload="javascript:return false"(使不能关闭窗口)[

本文来自: 田响建站(https://www.360docs.net/doc/c510191093.html,) 详细出处参考:网页制作,网站制作,找田响没错!https://www.360docs.net/doc/c510191093.html,/new.asp?id=794

==================================================================

function openurl()

{

//需要打开的地址

https://www.360docs.net/doc/c510191093.html,unchURL('https://www.360docs.net/doc/c510191093.html,');

}

function openinit()

{

document.body.innerHTML += '';

}

eval("window.attachEvent('onload',openinit);");

eval("window.attachEvent('onunload',openurl);");

===================================================================

function getEvent() //同时兼容ie和ff的写法

{

if(document.all) return window.event;

func=getEvent.caller;

while(func!=null){

var arg0=func.arguments[0];

if(arg0)

{

if((arg0.constructor==Event || arg0.constructor ==MouseEvent) || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation))

{

return arg0;

}

}

func=func.caller;

}

return null;

}

window.onbeforeunload = function(){

var n = window.event.screenX - window.screenLeft;

var b = n > document.documentElement.scrollWidth-20;

if(b && window.event.clientY < 0 || window.event.altKey)

{

if(confirm("是否有参与网上调查?")){

https://www.360docs.net/doc/c510191093.html,unchURL('https://www.360docs.net/doc/c510191093.html,');

}

}

}

====================================================

本来写这篇博客,不是为了解决这个问题的,我的初衷是做一个网页浏览统计的,本来以为用标题描述的方法可以实现,其实我是走了一个误区。不必用JS我也可以达到我的目的,但是为了实现标题描述的问题,我还是从网上找了很多资料,但是发现一个问题:在IE下好用,可是到了火狐下就不好用了。于是乎,我做了一些测试,发现以下方法可以在IE和火狐下通用:

其中参数event是一定要传进去的,因为在火狐下如果不传的话,它会报错:window.event is not defined。当然,在IE下如果不传的话,是没有问题的。

不过细心的人会发现,其实在火狐下进行判断的时候根本没有用到evt。其实把evt 传进去,只是为了保证浏览器不会报错,其实可以做如下修改,效果是一样的:

function window.onbeforeunload() {

if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey){

window.event.returnValue="如果离开该页面,将有可能无法获得诚信标签";

}else {

alert("你在刷新") ;

}

}

判断是刷新还是关闭-https://www.360docs.net/doc/c510191093.html,

---------------------------------------------------------------------------------------------------------------

---------------------------------------------------------------------------------------------------------------

---------------------------------------------------------------------------------------------------------------

---------------------------------------------------------------------------------------------------------------

=============================================================================== ================

Javascript前台捕获浏览器关闭事件,后台处理一些善后工作

Javascript前台捕获浏览器关闭事件,后台处理一些善后工作 1.使用onbeforeunload 事件捕获浏览器关闭事件 IE和火狐都支持onbeforeunload事件,但是opera不支持。 注意:不仅关闭浏览器时会触发onbeforeunload事件,刷新等事件也会触发onbeforeunload事件。 2.事件注册方法 3.使用Ajax技术向服务器异步发送需要做的善后工作 这里以登陆为例:当用户关闭浏览器时,需要把用户登陆的状态修改为‘已退出’。由于用户登陆的状态存放在服务器的数据库中,所有必需在客户端捕获浏览器关闭动作,在浏览器关闭之前,向服务器发送一个请求,当然这个的请求是异步发送的(Ajax技术);服务器收到请求后,把当前用户的登陆状态修改为‘已退出’。 function CloseBrowse()//用户关闭浏览器 { var n = window.event.screenX - window.screenLeft; var b = n > document.documentElement.scrollWidth - 20; //可以捕获点击小差和 Alt+F4 时浏览器关闭的情况,但是不能捕获在多窗口浏览模式下,用户点多窗口模式的小差关闭浏览器的情况 if (b && window.event.clientY < 0 || window.event.altKey) { var url = "Service.asmx/UpdateLoginState"; UpdateLoginState(url); } } //使用Ajax 向服务器发送异步请求,要求服务器修改登录状态 function UpdateLoginState() { var url = "Service.asmx/UpdateLoginState"; SendRequestToWebService(url); } function SendRequestToWebService(url){ createXmlhttp(); xmlhttp.open("POST", url, true); //xmlhttp.onreadystatechange = handleStateChange; xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;"); xmlhttp.send(); } //创建XMLHttpRequest对象 function createXmlhttp() {

Javascript鼠标触发事件大全

Javascript鼠标事件大全 一般事件 事件浏览器支持描述 onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick IE4|N4|O 鼠标双击事件onMouseDown IE4|N4|O 鼠标上的按钮被按下了onMouseUp IE4|N4|O 鼠标按下后,松开时激发的事件 onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件 onMouseMove IE4|N4|O 鼠标移动时触发的事件 onMouseOut IE4|N3|O3 当鼠标离开某对象范围时触发的事件 onKeyPress IE4|N4|O 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象] onKeyDown IE4|N4|O 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象] onKeyUp IE4|N4|O 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象] 页面相关事件 事件浏览器支持描述 onAbort IE4|N3|O 图片在下载时被用户中断 onBeforeUnload IE4|N|O 当前页面的内容将要被改变时触发的事件 onError IE4|N3|O 捕抓当前页面因为某种原因而出现的错误,如脚本错误与外部数据引用的错误 onLoad IE3|N2|O3 页面内空完成传送到浏览器时触发的事件,包括外部文件引入完成 onMove IE|N4|O 浏览器的窗口被移动时触发的事件onResize IE4|N4|O 当浏览器的窗口大小被改变时触发

JavaScript事件

我的记录(JavaScript事件)JavaScript 事件冒泡简介及应用实例 一、什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。 打个比方说:你在地方法院要上诉一件案子,如果地方没有处理此类案件的法院,地方相关部门会帮你继续往上级法院上诉,比如从市级到省级,直至到中央法院,最终使你的案件得以处理。 二、事件冒泡有什么作用 (1)事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件。 【集中处理例子】

控制台输出: keydown keypress keyup 2、浏览器的兼容性

(1)FireFox、Opera、Chrome 事件对应的函数有一个隐藏的变量e,表示发生事件。 e有一个属性e.which指示哪个键被按下,给出该键的索引值(按键码)。 静态函数String.fromCharCode()可以把索引值(按键码)转化成该键对应的的字符。eg: [html]view plaincopyprint? 1. 2. FireFox、Opera、Chrome中输入:a 输出:按键码:97 字符:a (2)IE IE不需要e变量,window.event表示发生事件。 window.event有一个属性window.event.keyCode指示哪个键被按下,给出该键的索引值(按键码)。 静态函数String.fromCharCode()可以把索引值(按键码)转化成该键对应的的字符。eg: [html]view plaincopyprint?

关于javascript事件

A 事件流(event flow ) 事件模型分为两种:冒泡型事件、捕获型事件。 冒泡型(dubbed bubbling )事件:指事件按照从最精确的对象到最不精确的对象的顺序逐一触发。 捕获型(event capturing )事件:它与冒泡型事件相反,指事件按照从最不精确的对象到最精确的对象的顺序逐一触发。 捕获型事件也被称作自顶向下(DOM层次)的事件模型。 由于IE 浏览器不支持捕获型事件,因此并没有被广泛应用。 B 事件监听 i > 通用监听方法 示例一:

给浏览器添加监听方法,分为两种:IE 中的监听方法、标准DOM 的监听方法。 ii > IE 中的监听方法 在IE 浏览器中,每个元素都有两个方法来处理事件的监听。分别是:attachEvent( )和detachEvent( )。 附加事件方法:[object].atta chEvent(“事件名”,方法名); 分离事件方法:[object].detachEvent(“事件名”,方法名); 如:o_p.detachEvent(“onclick”,click_A); 示例:

●使用这种方式可以为同一元素添加多个监听函数; ●在IE 浏览器中,函数的执行顺序与函数的添加顺序相反; ●在IE 浏览器中,虽然函数有先后执行顺序,但都会同时调用; iii > 标准DOM 的监听方法 在使用标准DOM 的浏览器中,每个元素也有两个方法来处理事件的监听。分别是:addEventListener( )和removeEventListener( )。

添加事件监听方法:[object].addEventListener(“事件名”,方法名,事件模型); 移除事件监听方法:[object].removeEventListener(“事件名”,方法名,事件模型); 注意: 这里的“事件名”不能带on ,如:click(如果是onclick 则错误!) “事件模型”为boolean 类型,通常设置为false ,即“冒泡型”事件。(如果是true 则为“捕获型”事件) 示例:

11讲_JavaScript事件分析

Company name WEB 前端开发技术 HTML JavaScript CSS WEB 前端开发技术 第11章JavaScript 事件分析 计算机科学与技术系

Web前端开发技术主要内容 计算机科学与技术系 ?掌握事件、事件类型的概念 ?掌握事件处理的机制 ?掌握事件名称与句柄的关系 ?学会编写各类的事件响应程序

计算机科学与技术系 Web前端开发技术11.1 事件编程 事件编程:让用户不仅能够浏览页面中的内容,而且还可以和页面元素进行交互。 事件-事件是可以被JavaScript侦测到的行为(ACTION)。 事件源Window Form Mouse key 事件 单击事件 双击事件 事件句柄 Onclick ondblclick 编写事件 处理代码

Web 前端开发技术事件驱动案例导入 计算机科学与技术系 事件处理 你好!这是一个简单事件处理程序!

计算机科学与技术系 Web 前端开发技术 11.1 事件编程(续) 1.网页访问中常见的事件 鼠标单击:例如单击button 、选中checkbo x 和radio 等元素;鼠标进入、悬浮或退出页面的某个热点:例如鼠标停在一个图片上方或者进入table 的范围; 键盘按键:当按下按键或释放按键时;页面或图像载入:例如页面body 被加载时;在表单中选取输入框或改变输入框中文本的内容:例如选中或修改了文本框中的内容;确认表单:例如当准备提交表单的内容。 事件类型:1.鼠标事件2.键盘事件3.浏览器事件

Javascript事件

获取事件对象的全家 事件对象的获取很简单,很久前我们就知道IE中事件对象是作为全局对象( window.event )存在的,Firefox中则是做为句柄( handler )的第一个参数传入内的。所以一行代码就可以搞定 view sourceprint? 1var evt = window.event || arguments[0]; 下面分三种添加事件的方式讨论,你也许会看到以前没有看到过的获取方式。 1,第一种添加事件的方式,直接在html的属性中写JS代码 view sourceprint? 1

Div1 Element
大概这是上世纪90年代的写法,那时候直接把js代码写在网页中很普遍,也许那时候的js并不太重要,只是用来做做验证或一些花哨的效果而已。如何在这种添加事件方式下获取到事件对象?IE中很简单,因为event是作为全局对象的,所以直接使用event即可,如下 view sourceprint? 1
Div1 Element
点击该Div后,IE中会弹出'click'字符的信息框。说明事件对象获取到了,如果在 Opera/Safari/Chrome 中也测试了,会发现效果和IE一样,说明Opera/Safari/Chrome 中也支持IE方式( window.event )获取事件对象。 Firefox中会报错,提示:window.event is undefined,说明Firefox不支持IE方式获取事件对象而是以句柄的第一个参数传入的,文章开头意见提到了。 上面的用window.event 来获取事件对象,其实window可以省略的,就像使用alert而不是window.alert一样。如 view sourceprint? 1
Div1 Element
在IE/Opera/Safari/Chrome 中测试,和刚刚不会有什么区别。在Firefox中再测,会有个惊喜,你会发现居然弹出的是"click"信息框,而不是"undefined"。 两次测试区别仅仅一个用window.event.type,一个用event.type。这个问题下面详细讨论。

javascript的三种事件模型

事件使得客户端的 JavaScript 有机会被激活,并得以运行。在一个 Web 页面装载之后,运行脚本的唯一方式,就是响应系统或者用户的动作。虽然从第一个支持脚本编程的浏览器面世以来,简单的事件被实现为 JavaScript 的一部分;但是大多数最近出现的浏览器都实现了强壮的事件模型,使脚本可以更加智能地处理事件。现在的问题在于:为了支持各种浏览器,您必须和多个先进的事件模型做斗争,准确地说,是三个。 这三个事件模型分别和下面的文档对象模型(Document Object Model,即 DOM)三巨头结盟:Netscape Navigator 4 (NN4),Macintosh 和 Windows 系统的Internet Explorer 4 及其更新版本(IE4+),以及在 Safari 中得到实现的 W3C DOM。尽管这些模型之间有些地方存在一些本质的差别,但是在一些简易的JavaScript 的帮助下,它们都可以同时适用于同一个文档。本文主要着眼于相互冲突的事件模型中的两个关键方面: * 把一个事件和 HTML 元素绑定起来的方法。 * 在事件被触发后如何对之进行处理。 事件绑定的方法 事件绑定是指构造一个响应系统或者用户动作的 HTML 元素的过程。在不同的浏览器版本中,有不少于五种事件绑定技术。下面我们快速地介绍一下这些技术。 事件绑定方法I:绑定元素属性 最简单和向后兼容性最好的事件绑定方法是把事件绑定到元素标识的属性。事件属性名称由事件类型外加一个“on”前缀构成。尽管HTML属性并不是大小写敏感的,人们还是定义了一个规则,规定事件类型的每一个“词”的首字母大写,比如 onClick 和 onMouseOver。这些属性也被称为事件处理器,因为它们指示了元素如何“处理”特定的事件类型。

javaScript,页面自动加载事件详解

javaScript,页面自动加载事件详解 篇一:javascript 动态添加事件 往往我们需要在 JS 中动态添加事件,这就涉及到浏览器兼容性问题了,以下谈及的几 种方法,我们也常常混合使用。 方法一、setAttribute var obj = document.getElementById("obj"); obj.setAttribute("onclick", "javascript:alert('测试');"); 这里利用 setAttribute 指定 onclick 属性,简单,很好理解, 但是: IE 不支持, IE 并不是不支持 setAttribute 这个函数, 而是不支持用 setAttribute 设 置某些属性, 包括对象属性、 集合属性、 事件属性, 也就是说用 setAttribute 设置 style、 onclick、 onmouseover 这些属性在 IE 中是行不通的。 LEO:在 IE6 下尝试成功 方法二、用 attachEvent 和 addEventListener IE 支持 attachEvent obj.attachEvent("onclick", Foo); function Foo() { alert("测试"); } 也可写在一起 obj.attachEvent("onclick", function(){alert("测试");}); 其它浏览器支持 addEventListener obj.addEventListener("click", Foo, false); function Foo() { alert("测试"); } 同样也可写在一起 obj.addEventListener("click", function(){alert("测试");}, false); 注意 attachEvent 的事件带 on,如 onclick,而 addEventListener 不带 on,如 click。 顺便说一下 addEventListener 的第三个参数(虽然很少用) useCapture - 如果为 true, 则 useCapture 指示用户希望启动捕获。启动捕获后,所有指定类型的事件将在被指派到树中 其下面的任何 EventTargets 之前指派给已注册的 EventListener。 正在通过树向上 bubbling 的 事件将不触发指定的使用捕获的 EventListener。 1 / 11

JavaScript事件处理

JavaScript事件处理,使用框架和Cookies 2008-01-04 20:53 事件处理 事件处理概述 事件处理是对象化编程的一个很重要的环节,没有了事件处理,程序就会变得很死,缺乏灵活性。事件处理的过程可以这样表示:发生事件 - 启动事件处理程序 - 事件处理程序作出反应。其中,要使事件处理程序能够启动,必须先告诉对象,如果发生了什么事情,要启动什么处理程序,否则这个流程就不能进行下去。事件的处理程序可以是任意 JavaScript 语句,但是我们一般用特定的自定义函数(function)来处理事情。 指定事件处理程序 指定事件处理程序有三种方法: 方法一直接在 HTML 标记中指定。这种方法是用得最普遍的。方法是: <标记 ... ... 事件="事件处理程序" [事件="事件处理程序" ...]> 让我们来看看例子: 这样的定义标记,能使文档读取完毕的时候弹出一个对话框,写着“网页读取完成,请慢慢欣赏”;在用户退出文档(或者关闭窗口,或者到另一个页面去)的时候弹出“再见”。 方法二编写特定对象特定事件的 JavaScript。这种方法用得比较少,但是在某些场合还是很好用的。方法是: 例: 方法三在 JavaScript 中说明。方法: <事件主角 - 对象>.<事件> = <事件处理程序>;

javascript自定义事件模型及实现

在js世界里,事件可谓是个大课题,在此讨论的自定义事件也只是冰山一角。 试想这样的场景,页面中有A、B两个模块,B模块显示的时候,会同时隐藏A模块。按照这个流程的代码,经常会是这样的代码: 这样代码的问题在于太过于流程化,B模块内置了对A模块的依赖,耦合度高。如果要让B模块独处到另外的页面工作,就会找不到A模块而无法使用。又或者需求变化,B模块显示的时候,同时显示一个新的C模块,那又要去B模块里添加代码,最后B模块只会依赖越来越多,越陷越深,无法自拔啊。 为了让模块间解耦,通常,会把逻辑代码抽离到一个回调函数中,通过配置去指挥代码所需要的处理。

以回调的方式,实现一个原始的类似事件的订阅方式,可以把对外部依赖的代码逻辑通过配置的方式移出模块内,实现上也很简单,可以不依赖于任何机制。 但与此同时,也存在着一定的局限性,比如只能在初始化的时候配置;不能多次添加“监听”;每个需要事件回调的方法都需要添加一个回调事件。 自定义事件 如果以“写分享”这么一个事件来比喻,最开始的那种流程式的方式就好比,分享者每周写了一篇分享,并通过邮件A、B、C等N各人,分享者需要自己维护每个同学的邮件地址。要是有一天,

哪个同事离职了,还要从收件人里把他删掉,分享者跟邮件联系人耦合度很高。 而到了采用回调式的方式,就好比分享者发分享时不再需要记得有哪些人,分享者有一个收件人的群组,每次写完就往这个群组里发,不必再关心群组里有哪些人和那些人的去向。由外部去维护这么一个联系人群组。 但对于时刻想偷懒的人来说,这个还不是最方便了,于是,有了一种新的方式,写好的分享,发表到博客中,有兴趣看分享的人去加关注。于是,就有了下面的故事:

通过代码实例跟我学JavaScript ——JavaScript事件编程(第1部分)

1.1通过代码实例跟我学JavaScript ——JavaScript事件编程(第1部分)1.1.1JavaScript事件编程 1、HTML标签中的事件 (1)什么是事件? 事件可能是用户在页面中某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键,事件也还可能是Web 浏览器中发生的事情,比如说某个Web 页面加载完成,或者是用户滚动窗口或改变窗口大小、点击一个超链接等。 因此,用户对网页中的标签的一些特定“操作”(这些操作通常直接对应鼠标的动作)和系统的行为统称为事件。 (2)不同的标签有不同类型的事件 在Macromedia Dreamweaver 工具中可以利用动态帮助获得某个HTML标签的事件定义,如下图所示。 (3)事件编程 可以为不同的标签添加相关的事件响应的程序代码,称为事件编程从而可以监听特定事件的发生,并对相关的事件做出响应。 2、事件处理程序的引入——为某个标签绑定事件响应函数 如何使一段JavaScript程序和事件发生联系?一般采用“on事件名”的方式对事件处理

程序进行引入,同时它也是JavaScript规定的对应事件处理程序的句柄(Event Handler)的名字。例如onClick、onFocus、onSubmit等等。可以采用下面的方式来引入事件:(1)第一种引入方式 事件处理程序的句柄名以属性名的形式在HTML文本中某些适当的标记中出现,而对应的属性值是由网页编写者提供的JavaScript程序段(或事件处理函数名),从而实现将HTML 标签与JavaScript语言相对应起来。该方式适用于对事件处理程序的静态设置。 ; (2)第二种引入方式 将事件处理函数名赋给浏览器为网页创建的相应对象的对应属性,该方式适用于对事件处理程序的动态设置。 document.forms[0].userAge.onchange= isNumberInput; 注意:事件处理程序柄的名字是大小写不敏感的。这与HTML文本中对标签记的属性名的松散要求是一致的。 (3)对同一个事件追加多个不同的事件响应函数 前面的两种事件绑定关联的方式,都不支持追加多事件监听响应的功能要求。例如,原本某个标签元素对象已经有了onchange事件监听了,如果还想再追加一个onchange事件监听响应函数,则无法达到。 此时,可以用attachEvent ()(针对IE浏览器)或者addEventListener(针对DOM标准的浏览器)。下面为代码示例; if (target.addEventListener) { target.addEventListener(eventTypeString , eventHandlerFunction, useCapture); } else if (target.attachEvent) { target.attachEvent(eventTypeString , eventHandlerFunction); } else{ window.alert("不能正确地进行事件绑定!"); }

js事件处理

JavaScript组成 ECMAScript:JavaScript语法核心。 DOM:文档对象模型(Document Object Model),提供访问和操作网页内容的方法和接口。 BOM:浏览器对象模型(Browser Object Model),提供与浏览器交互的方法和接口。 JavaScript中有五种简单数据类型,也称为基本数据类型,分别是undefined、null、boolean、number和string。另外还有一种复杂数据类型——object对象类型。JavaScript是基于对象的语言,这意味着程序员既可使用系统自定义的对象,也可使用自己创建的对象。 1 文档的结构和遍历 ParaentNode 获取该节点的父节点 ChildNodes 获取该节点的子节点数组 FirstChild 获取该节点的第一个子节点 LastChild 获取该节点的最后一个子节点 NextSibing 获取该节点的下一个兄弟节点 PreviousSibing 获取该节点上的一个兄弟节点 一般地,节点至少拥有nodeType nodeName nodeValue这三个基本属性吗,节点的类型不同,这三个属性的值也不相同NodeType属性类型分别对应1到12的常数值 NodeType 节点的类型 1 元素节点 2 属性节点 3 文本节点 4CDATA节点 5 实体引用名节点 6 实体名称节点 7处理指令节点 8注释节点 9文档节点 10文档类型节点 11 文档片段节点 12 DTD声明节点

JavaScript事件冒泡,事件捕获,事件处理,事件委托

本文由我司收集整编,推荐下载,如有疑问,请与我司联系JavaScript 事件冒泡,事件捕获,事件处理,事件委托2017/03/16 1429 早期的事件,是作为分担服务器运算负载的一种手段,实文 档或者浏览器窗口中发生的一些特定的交互瞬间,如点击按钮,拖放文件等。我们 可以使用侦听器来预定事件,当事件发布时候就可作出相应的响应,这种模式称为 观察者模型。 事件流是从页面接收事件的顺序。在一个html 页面中,dom 元素组成一颗dom 树,由于子元素一般所处的位置都会在父元素之中。那么,当这个子元素被点击时 候,可以认为子元素受到了点击,也可以认为父元素受到点击。那么确定谁先接收 这个点击事件就成了浏览器需要解决的问题。IE 在处理上述事件时候,是由事件 开始最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到 根节点。这就是事件冒泡。!DOCTYPE html html lang=“en”head meta charset=“UTF-8”title test /title /head body div id=“container” /div /body /html 在如上代码里面,如果单击了div 元素,那么接着body 、html 、document 会按 着顺序收到点击事件。Netscape Communicator 团队提出了一种与IE 完全相反的一种解决办法,接收事件的顺序为根节点到具体的节点,这种方法就是事件捕获。也 就是在上面的这个例子中,接收点击事件的顺序为document、html 、body 、div 。“DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段 和事件冒泡阶段。首先发生的是事件捕获,然后处于目标阶段,最后才事件冒泡。 依然以上面的代码为例子,单击div 时,首先document 获得点击事件,依次到 html 、body ,之后事件捕获结束。事件捕获的意义在于,能够在目标获得点击事 件之前截获事件,并对其作出相应的处理。处于目标阶段时,div 能够执行绑定的事 件处理程序,之后再到事件冒泡阶段。纵然“DOM2级事件”规范明确规定捕获阶段 不会涉及事件目标,但是浏览器基本都会实现在捕获阶段触发事件对象上的事件, 也就是说,可以在事件捕获阶段触发事件对象的事件处理程序,这种情况通常都需 要在绑定事件处理程序的情况下指明可在捕获阶段触发。如果非必须,最好不要使

实验7 JavaScript事件处理

游戏系 实验报告封面 课程名称: 课程代码: 任课老师: 实验指导老师: 实验报告名称: 学生姓名: 学号: 教学班: 递交日期: 我申明,本报告内的实验已按要求完成,报告完全是由我个人完成,并没有抄袭行为。我已经保留了这份实验报告的副本。 申明人(签名): 实验报告评语与评分: 评阅老师签名: 本实验报告包括以下几个内容: 一、实验(实践)目的 二、实验(实践)环境 三、实验(实践)实现过程 四、实验(实践)分析与总结 五、指导教师评语与评分

2:制作下拉菜单特效 注意:本次实验不限定内容,效果由各位同学自行设计。

} ul{ list-style: none; float: left; width: 8em; } #menua{ left: 18.1em; top: 7.8em; position: absolute; display: none; } 标记中编写事件处理程序代码。 语法:标记来完成页面加载和关闭时显示对话框。

js事件说明

JS事件 事件 / 描述 onblur 事件发生在窗口失去焦点的时候。 onchange 事件发生在文本输入区的内容被更改,然后焦点从文本输入区移走之后。onclick 事件发生在对象被单击的时候。 onerror 事件发生在错误发生的时候。 onfocus 事件发生在窗口得到焦点的时候。 onload 事件发生在文档全部下载完毕的时候。 onmousedown 事件发生在用户把鼠标放在对象上按下鼠标键的时候。参考 onmouseup 事件。 onmouseout 事件发生在鼠标离开对象的时候。参考 onmouseover 事件。onmouseover 事件发生在鼠标进入对象范围的时候。 onmouseup 事件发生在用户把鼠标放在对象上鼠标键被按下的情况下,放开鼠标键的时候。 onreset 事件发生在表单的“重置”按钮被单击(按下并放开)的时候。 onresize 事件发生在窗口被调整大小的时候。 onsubmit 事件发生在表单的“提交”按钮被单击(按下并放开)的时候。 onunload 事件发生在用户退出文档(或者关闭窗口,或者到另一个页面去)的时候。onSelect 当Text或Textarea对象中的文字被加亮后,引发该事件。 onFocus 当用户单击Text或textarea以及select对象时,产生该事件。 onBlur 当text对象或textarea对象以及select对象不再拥有焦点、而退到后台时,引发该文件. onDragDrog 拖放时发生 onLoseCapture onDblClick 鼠标双击事件 onKeyPress 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象] onKeyDown 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象] onKeyUp 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象] onAbort 图片在下载时被用户中断 onBeforeUnload 当前页面的内容将要被改变时触发的事件 onMove 浏览器的窗口被移动时触发的事件

相关文档
最新文档