神刀安全网

浏览器事件

javascript与HTML之间的交互是通过事件实现的。事件就是文档或者浏览器中发生的一些特定的交互瞬间。

事件流

事件流描述的是页面接受事件的顺序,而IE和Netscape的浏览器开发团队提出了两种截然不同的,甚至是完全相反的事件流概念。IE的事件流是事件冒泡,而Netscape的事件流是事件捕获。

事件冒泡

即事件开始时又最具体的元素接受,然后逐级向上传播,现代的所有浏览器都支持事件冒泡,但是在具体实现上还是有些差别的,IE5.5及更早的版本中事件冒泡会跳过<html>元素(从<body>直接到document)。而IE9, Firefox,Chrome,Safari则将事件一直冒泡到window对象。

事件捕获

事件捕获的用意在于事件到达预定目标之前就捕获它,在事件捕获过程中,document对象先接受到click事件,然后事件沿着DOM树依次向下,一直传播到事件的具体目标。

DOM事件流

DOM2级事件 (关于Dom0 Dom2 Dom3请参考这里) 规定的事件流包括三个阶段:事件捕获阶段,处于目标阶段,和事件冒泡阶段。在Dom事件流中,实际的目标元素在捕获阶段是不会接受事件的,这意味着在捕获阶段,事件从document到<html>再到<body>后就停止了。下一个阶段是“处于目标”阶段,于是事件在<div>上发生,并在事件处理中被看成冒泡阶段的一部分。然后冒泡阶段发生,事件又传播回文档。

浏览器事件

事件处理程序

事件就是用户或者浏览器执行的某个动作,例如click,load,mouseover都是事件的名字。而相应某个事件的函数叫做事件处理程序。事件处理程序的名字以on开头,例如onclick,onload。

HTML事件处理程序

每个元素支持的每种事件,都可以使用一个与响应事件处理程序同名的HTML特性来制定,这个特性的值应该是能够执行的HTML代码。

<input type="button" value="click me" onclick="alert(clicked)"/>

Dom0级事件处理程序

通过JavaScript指定事件处理程序的传统方式,就是将一个函数赋值给一个事件处理程序属性。

var btn = document.getElementById('btn') btn.onclick = function() {     alert('clicked') }

使用Dom0级事件处理程序被认为是元素的方法,此时程序中的this会引用当前元素。同时以这种方式添加的事件处理程序会在冒泡阶段被处理。

Dom2级事件处理程序

Dom2级事件定义了两个方法,addEventListener()和removeEventListener(),所有的Dom节点中都包含着两个方法,它们都是接受三个参数,要处理的事件名,事件处理函数,和一个布尔值(为true的时候表示在捕获阶段调用事件处理程序,false表示在冒泡阶段调用事件处理程序)

var btn = document.getElementById('btn') btn.addEventListener('click', function(){     alert(this.value)     }, false)

IE事件处理程序

IE中实现了与DOM中类似的两个方法,attachEvent()和detachEvent()。这两个方法接受相同的参数,事件处理程序名称,事件处理程序函数,由于在IE8以前不支持事件冒泡,所以事件处理程序函数会在冒泡阶段执行。

var btn = document.getElementById('btn') btn.attachEvent('ocClick', function() {     alert('clicked') })

此时在事件处理程序函数会在全局作用域中执行,也就是说此事的this是window。同时如果为同一个元素同时添加了两个不同的事件处理程序,这些事件处理程序并不是顺序执行的而是以相反的顺序被触发。

事件对象event

在触发Dom上的某个事件的时候,会产生一个事件对象event,这个对象包含着与事件有关的信息。

Dom事件对象

兼容Dom的浏览器会将一个event对象传到事件处理程序中。

var btn = document.getElementById('btn') btn.onclick = function(event) {     alert(event.type) }

当我们想要阻止某个事件的特定行为时可以使用event对象的preventDefault()方法,而stopPropagation()方法则用于立即停止事件在DOM中的传播,即取消进一步的事件冒泡或者捕获。

IE中的事件对象

要访问IE中的event对象有几种不同的方式,在使用DOM0级方法添加事件处理程序时,event对象作为window对像的一个属性存在。

var btn = document.getElementById('btn') btn.onclick = function() {     var event = window.event     alert(event.type) }

但是当我们用attachEvent的方式添加的,此时的event对象会被当作一个参数传入事件处理程序中。当时此时也可以通过window对象来访问event对象。在event对象中有一个srcElement属性,指向事件的目标对象,因为事件的处理程序的作用域是根据指定它的方式来确定的,所以this并不总是等于目标对象。此时为了保险起见,建议使用srcElement

btn.onclick = function() {     alert(window.event.srcElement) === this; //ture } btn.attachEvent("onclick", function(event) {     alert(event.srcElement === this); //false })

事件类型

Web浏览器中可能发生的事件类型有很多,不同的事件类型可能具有不同的信息。而DOM3级事件规定了一下几类事件。

  1. UI事件UI事件指的是那些不一定与用户操作有关的事件。比如load事件,当页面完全加载后在window上面触发,当图片加载完毕在<img>元素上触发。以及脚本加载完毕在<script>元素上触发。

  2. 焦点事件

    focus: 在元素获得焦点的时候触发,此事件不会冒泡。 focusin: 与foucs等价,但是会冒泡。 blur: 在失去焦点的时候触发,不会冒泡。
  3. 鼠标与滚轮事件

    客户区坐标位置:clientX,clientY 页面坐标位置:pageX,pageY 屏幕坐标位置:screenX,screenY
  4. 键盘与文本事件

    keydown:用户按下键盘上任意键触发,如果按住不放会重复触发此事件。 keypress:用户按下键盘上任意字符键触发,如果按住不放会重复触发此事件。 keyup: 用户释放键盘上的键时触发。
  5. 变动事件在DOM结构发生变化时触发,比如插入或者删除节点。

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 浏览器事件

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址