js 浏览器事件介绍

浏览器事件
浏览器事件指载入文档直到该文档被关闭期间的浏览器事件，如浏览器载入文档事件onload、关闭该文档事件onunload、浏览器失去焦点事件onblur、获得焦点事件onfocus 等。

先考察如下的代码：


代码如下:

//源程序3.1
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html140/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Sample Page!</title>
<script type="text/javascript">
<!--
window.onload = function ()
{
var msg="\nwindow.load 事件 : \n\n";
msg+=" 浏览器载入了文档!";
alert(msg);
}
window.onfocus = function ()
{
var msg="\nwindow.onfocus 事件 : \n\n";
msg+=" 浏览器取得了焦点!";
alert(msg);
}
window.onblur = function ()
{
var msg="\nwindow.onblur 事件 : \n\n";
msg+=" 浏览器失去了焦点!";
alert(msg);
}
window.onscroll = function ()
{
var msg="\nwindow.onscroll 事件 : \n\n";
msg+=" 用户拖动了滚动条!";
alert(msg);
}
window.onresize = function ()
{
var msg="\nwindow.onresize 事件 : \n\n";
msg+=" 用户改变了窗口尺寸!";
alert(msg);
}
//-->
</script>
body>
<br>
<p>载入文档:</p>
<p>取得焦点:</p>
<p>失去焦点:</p>
<p>拖动滚动条:</p>
<p>变换尺寸:</p>
</body>
</html>

将上述源程序保存为*.html（或*.htm）文档，双击该文档后系统调用默认的浏览器进行浏览。
当载入该文档时，触发 window.load 事件，弹出警告框如图3.2 所示。

图 3.2 载入文档时触发window.load 事件
当把焦点给该文档页面时，触发 window.onfocus 事件，弹出警告框如图3.3 所示。

图 3.3 文档取得焦点时触发window.onfocus 事件
当该页面失去焦点时，触发 window.blur 事件，弹出警告框如图3.4 所示。

图3.4 文档失去焦点时触发window.onblur 事件
当用户拖动滚动条时，触发 window.onscroll 事件，弹出警告框如图3.5 所示。

图 3.5 拖动滚动条，触发window.onscroll 事件
当用户改变文档页面大小时，触发 window.onresize 事件，弹出警告框如图3.6 所示。

图 3.6 改变文档页面大小，触发window.onresize 事件
浏览器事件一般用于处理窗口定位、设置定时器或者根据用户喜好设定页面层次和内容等场合，在页面的交互性、动态性方面使用较为广泛。
注意：Netscape Navigator 4 支持window.onmove 事件，该事件在当前浏览器窗口被用户移动时触发，主
要用于窗口的定位方面。Internet Explorer 不支持window.onmove 事件。

赞 (0)

相关推荐

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

    使用类库可以比较容易的解决兼容性问题.但这背后的机理又是如何呢? 下面我们就一点点铺开来讲. 首先,DOM Level2为事件处理定义了两个函数addEventListener和removeEventListener, 这两个函数都来自于EventTarget接口.  复制代码 代码如下: element.addEventListener(eventName, listener, useCapture); element.removeEventListener(eventName, listen

  • myEvent.js javascript跨浏览器事件框架

    event究竟有多么复杂?可见前辈的6年前的努力:最佳的addEvent是怎样诞生的,后起之秀jQuery也付出了一千六百多行血汗代码(v 1.5.1)搞定了6年后出现的各种核的浏览器. 我参考前辈的代码以及自己的理解尝试写了一个事件框架,我的框架完成了一个事件机制的核心,它能提供统一接口实现多事件绑定以及避免内存泄漏等其他一些问题,更重要的是性能还不错. 我的手法: 所有回调函数根据元素.事件类型.回调函数唯一ID缓存在一个_create对象中(其内部具体结构可见下面源码的关于_cache的注

  • Javascript 浏览器事件小结

    Javascript 浏览器事件小结

    事件本身相当直观,常用的有: 事件 描述 abort 图片被阻止而不能加载 blur,focus 失去焦点,获得焦点 change 适用于表单元素,当元素使其焦点的时候判断是否发生改变 click,dblclick 单击,双击 keydown,keyup,keypress 按下键,键离开,按下键的时候触发,注意keypress只对数字字母键有效 load 加载图片或者页面的时候 mousedown,mouseup 按下键,放开键 mouseover,mouseout over是当鼠标进入的时候出

  • js 浏览器事件介绍

    js 浏览器事件介绍

    浏览器事件 浏览器事件指载入文档直到该文档被关闭期间的浏览器事件,如浏览器载入文档事件onload.关闭该文档事件onunload.浏览器失去焦点事件onblur.获得焦点事件onfocus 等. 先考察如下的代码: 复制代码 代码如下: //源程序3.1 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140/strict.dtd"> <

  • 详解JS浏览器事件循环机制

    详解JS浏览器事件循环机制

    先来明白些概念性内容. 进程.线程 进程是系统分配的独立资源,是 CPU 资源分配的基本单位,进程是由一个或者多个线程组成的. 线程是进程的执行流,是CPU调度和分派的基本单位,同个进程之中的多个线程之间是共享该进程的资源的. 浏览器内核 浏览器是多进程的,浏览器每一个 tab 标签都代表一个独立的进程(也不一定,因为多个空白 tab 标签会合并成一个进程),浏览器内核(浏览器渲染进程)属于浏览器多进程中的一种. 浏览器内核有多种线程在工作. GUI 渲染线程: 负责渲染页面,解析 HTML,C

  • 详解JS浏览器事件模型

    详解JS浏览器事件模型

    什么是事件 我想你很可能听说过事件驱动, 但是事件驱动到底是什么?为什么说浏览器是事件驱动的呢? 事件驱动通俗地来说就是什么都抽象为事件. 一次点击是一个事件 键盘按下是一个事件 一个网络请求成功是一个事件 页面加载是一个事件 页面报错是一个事件 浏览器依靠事件来驱动APP运行下去,如果没有了事件驱动,那么APP会直接从头到尾运行完,然后结束,事件驱动是浏览器的基石. 一个简单的例子 其实现实中的红绿灯就是一种事件,它告诉我们现在是红灯状态,绿灯状态,还是黄灯状态. 我们需要根据这个事件自己去完

  • 浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到"停止事件冒泡"和"阻止浏览器默认行为". 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else //否则,我们需要使用IE的方式来取消事件冒泡 window.event.cancel

  • 基于js粘贴事件paste简单解析以及遇到的坑

    在用户执行粘贴操作的时候,js能够获得剪切板的内容,本文讨论一下这个问题. 目前只有Chrome支持获取剪切板中的图片数据.还好需要这个功能的产品目前只支持Chrome和Safari,一些Chrome的新特性是可以尽情使用了,还是能够覆盖到大部分用户的.所以本文只讨论Chrome如何使用和如何阻止Safari,原理大概了解了,再研究其他浏览器相关的问题就容易多了. paste事件 可以用js给页面中的元素绑定paste事件的方法,当用户鼠标在该元素上或者该元素处于focus状态,绑定到paste

  • 浅谈js键盘事件全面控制

    主要分四个部分 第一部分:浏览器的按键事件 第二部分:兼容浏览器 第三部分:代码实现和优化 第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown. onkeypress和onkeyup这三个事件句柄.一个典型的按键会产生所有这三种事件,依次是keydown,keypress,然后是按键释放时候的keyup. 在这3种事件类型中,keydown和keyup比较底层,而keypr

  • 深入理解JS的事件绑定、事件流模型

     一.JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresize/onchange/onfoucs/onscroll 3.键盘事件: keydown:键盘按下时触发  keypress:键盘按下并抬起的瞬间触发.  keyup:键盘抬起触发 [注意事项] ①执行顺序:keydown keypress keyup ②keypress只能捕获数字,字母,符号键,

  • 浏览器事件循环与vue nextTicket的实现

    同步:就是在执行栈中(主线程)执行的代码 异步:就是在异步队列(macroTask.microTask)中的代码 简单理解区别就是:异步是需要延迟执行的代码 线程和进程 进程:进程是应用程序的执行实例,每一个进程都是由私有的虚拟地址空间.代码.数据和其它系统资源所组成:进程在运行过程中能够申请创建和使用系统资源(如独立的内存区域等),这些资源也会随着进程的终止而被销毁 线程:线程则是进程内的一个独立执行单元,在不同的线程之间是可以共享进程资源的,是进程内可以调度的实体.比进程更小的独立运行的基本

  • 关于js的事件循环机制剖析

    关于js的事件循环机制剖析

    前言 众所周知, JavaScript是单线程这一核心,可是浏览器又能很好的处理异步请求,那么到底是为什么呢?其中的原理与事件循环机制大有关系. 在探索事件循环之前,我们得先了解浏览器执行线程~~ 浏览器的渲染进程是多线程的,浏览器每一个tab标签都代表一个独立的进程,其中浏览器内核属于浏览器多进程中的一种,主要负责页面渲染,脚本执行,事件处理等.其包含的线程有以下几种 GUI 渲染线程:负责渲染页面,解析 HTML,CSS 构成 DOM 树: JS 引擎线程:解释执行代码.用户输入和网络请求:

  • 深入理解JS DOM事件机制

    深入理解JS DOM事件机制

    1.事件流 html 元素触发事件的顺序. 2.事件冒泡IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档).3.事件捕获事件捕获的思想是不太具体的节点应该更早的接收到事件,而最具体的节点应该在最后接收到节点.事件捕获的用意在于事件到达预定目标之前捕获它. DOM事件流 "DOM2级事件流"规定的事件流包括三个阶段:事件捕获阶段.处于目标阶段和冒泡阶段.首先发生的是事件捕获,

随机推荐