`

javascript事件机制

JavaScriptIE浏览器HTMLCSS 
阅读更多
转http://www.jb51.net/article/22107.htm

Javascript中的事件都是与对象相关联的，而不是语言本身所有，当Javascript在浏览器中运行的时候，事件与每个浏览器实现的DOM模型有关。
事件本身相当直观，常用的有：


1. 0级DOM上的事件处理
0级DOM上的事件处理方法是比较早的，目前也广泛应用，从IE4.0开始就支持这类方法。

1.1 事件注册
下面主要介绍如何添加响应事件，也就是为事件添加处理程序。

（1）内联注册（inline registration)

这是最简单的一种，将事件响应程序作为html标签的一个属性来设置，如下例，可以是代码，当然更多情况下是一个函数调用。事件的句柄一般就是事件的名称加上前缀on。 
<html>
<head>
    <title>event sample</title>
    <style type="text/css">
        #adiv {
            width: 200px;
            height: 200px;
            background-color: #00aa00;
        }
    </style>

</head>
<body>
<div id="adiv" onmouseover="this.innerHTML+='OK'">
    a
</div>
</body>
</html>
这种方法很简单，任何浏览器都支持，缺点是将Javascript代码和HTML代码混杂在一起，而且不能动态添加事件响应程序，也不能添加多个响应程序。
（2）传统模式(traditional registration)

这种模式将事件作为对象的属性进行添加。例如： 
 <script type="text/javascript">
        function helloWorld() {
            alert("Hello World");
            var d = document.getElementById("adiv");
            d.onmouseout = function() {
                this.innerHTML += 'Bye';
            }
        }
        window.onload = helloWorld;
    </script>

1.2 事件的参数（Event对象）
有些事件处理程序需要一些关于事件更多的信息，比如click事件发生的位置等。这些信息是通过事件参数传给事件处理程序的。IE事件模型和W3C事件模型对此的实现是不同的。

IE把event对象作为window对象的一个属性，而W3C把event对象作为处理程序的一个参数。下面以click事件为例，分别写一个程序用于IE和支持W3C标准的浏览器。 
<html>
<head>
    <title>event sample</title>
    <style type="text/css">
        #adiv {
            width: 200px;
            height: 200px;
            background-color: #00aa00;
        }
    </style>
    <script type="text/javascript">
        function IEClick() {
            var res = document.getElementById("result");
            var s;
            for (var p in window.event) {
                s += p.toString() + ":" + window.event[p] + "\r\n";
            }
            res.innerHTML = s;
        }
        function W3CClick(args) {
            var res = document.getElementById("result");
            var s;
            for (var p in args) {
                s += p.toString() + ":" + args[p] + "\r\n";
            }
            res.innerHTML = s;
        }
    </script>
</head>
<body>
<div id="adiv" onclick="W3CClick(event)">a</div>
<div id="result" style="font-size:small; font-family:Verdana">
</div>
</body>
</html>

这一段页面代码可以把click事件对象的所有属性都展示出来。上面的例子是W3C的浏览器所用的方法，要在IE下使用，只要改成onclick=”IEClick()”.注意，W3CClick中的参数名，只能是event。打印出来的属性很多，我分别用FF3.5，Chrome3，IE8（标准模式和兼容模式）运行，他们共有的属性并不多，其实也就这些共有的属性才有意义，他们是:

altKey,shiftKey,ctrlKey:是否按下alt,shift,ctrl键

clientX,clientY:客户区坐标（浏览器窗口）,screenX,screenY：屏幕区坐标

type:事件类型

虽然事件的参数的传递方式有点不同，但是对于写跨浏览器的代码也没有造成太多的麻烦，只需要在函数一开始判断下window.event有没有定义即可。 

function BothClick(args) { 
var evnt = window.event ? window.event : args; 
alert(evnt.clientX); 
}

注册句柄为:<div id="adiv" onclick="BothClick(event)" >a</div>如果采用第二种方式注册句柄，则不需要什么特别处理。
1.3 事件的浮升
页面上的对象通常是重叠的，比如一个div中可以包括若干div或者其他元素。当某一事件触发的时候，同时有多个元素受影响，并且它们都有相应的事件处理程序，那么这些事件处理程序执行哪些？以何种顺序执行？这就是本节要讨论的问题。通常情况下，一个事件被多个句柄捕获的情形并不多见。先看一个例子(CSS省略)： 
<html>
<head>
<script type="text/javascript">
    function body_click() {
        var dis = document.getElementById("res");
        dis.innerHTML += "Body Click  ";
    }
    function out_click() {
        var dis = document.getElementById("res");
        dis.innerHTML += "Outer Click";
    }
    function inner_click() {
        var dis = document.getElementById("res");
        dis.innerHTML += "Inner Click  ";
    }
</script>
</head>
<body onclick="body_click()">
<div id="out" onclick="out_click()">
    Outer Div
    <div id="innerdiv" onclick="inner_click()">
        Inner Div
    </div>
</div>
<div id="res">
</div>
</body>
</html>

可见，事件是由内向外层的元素依次触发的。（一般教材上的说法是向上浮升，bubbling,我觉得这个向上是有歧义的，我一开始就误认为内层的元素是上面的，因为它能覆盖外层的元素）用0级DOM注册的事件，它的浮升方法无论是IE还是W3C都是统一的。
1.4 浮升的取消
有时候我们需要在响应了一个事件之后，就不需要外层的元素再响应了，可以取消事件的浮升。取消的方法IE和W3C是不一致的。IE是通过设置事件对象的cancelBubble属性来实现，W3C则是调用事件对象的stopPropagation方法。

例如上面的例子改为： 
<html>
<head>
    <script type="text/javascript">
        function body_click() {
            var dis = document.getElementById("res");
            dis.innerHTML += "Body Click  ";
        }
        function out_click() {
            var dis = document.getElementById("res");
            dis.innerHTML += "Outer Click";
        }
        function inner_click(arg) {
            var evnt = window.event ? window.event : arg;
            var dis = document.getElementById("res");
            dis.innerHTML += "Inner Click <br/>";
            if (evnt.stopPropagation) {
                evnt.stopPropagation();
            } else {
                evnt.cancelBubble = true;
            }
        }
    </script>
</head>
<body onclick="body_click()">
<div id="out" onclick="out_click()">
    Outer Div
    <div id="innerdiv" onclick="inner_click(event)">
        Inner Div
    </div>
</div>
<div id="res">
</div>
</body>
</html>

1.5 事件处理函数中的this
这个this指向的是触发事件的对象。

下面介绍2级DOM的事件句柄。这种方式是比较新的方式，它不依赖于任何特定的事件句柄属性。W3C规定的方式是

object.addEventListener('event',function,boolean)

第一个参数是事件名，第二个是事件响应函数，第三个变量如果是true，则事件函数在事件冒泡阶段被触发，否则是在事件的捕获阶段被触发。W3C规定事件的发生有两个阶段，首先是捕获，即事件以此从最外层层的元素向内层传递，相应的事件处理函数被依次触发，然后是冒泡阶段，事件从最内层的元素向外层传递。 看一个例子： 
<html>
<head>
    <title>DOM 2 Event</title>
    <script type="text/javascript">
        function setup() {
            var div = document.getElementById('testDiv');
            div.addEventListener('click', function() {
                alert('div true');
            }, true);
            document.addEventListener('click', function() {
                alert('body true');
            }, true);
            div.addEventListener('click', function() {
                alert('div false');
            }, false);
            document.addEventListener('click', function() {
                alert('body false');
            }, false);
        }
        window.onload = setup;
    </script>
</head>
<body>
<div id='testDiv' style="width:100px;height:100px;background-color:gray"></div>
<body>
</html>

点击灰色框，会依次弹出body true,div true,div false,body false. 很遗憾，IE不支持这种方式,最新的IE8也不支持。不过IE也有类似的注册事件的方法，名字是attachEvent.不过这个方法没有第三个参数，它支持冒泡阶段的事件响应。attachEvent函数传递事件参数的时候是和W3C一致的，也是通过event参数传递，但是，其函数内部的this指向的不是触发事件对象，而永远指向window。在event对象中有一个属性指向触发该事件的对象，W3C中是target,IE中是srcElement, 在符合W3C规范的浏览器中，事件处理函数中的this和event.target指向的是同一个对象。下面的程序展示了一个IE和W3C兼容的事件处理程序： 
<html>
<head>
    <title>DOM 2 Event</title>
    <script type="text/javascript">
        function ClickMe(event) {
            var target1 = event.target ? event.target : event.srcElement;
            alert(target1.innerHTML);
        }
        function setup() {
            var div = document.getElementById('testDiv');
            if (div.addEventListener) {
                div.addEventListener('click', ClickMe, false);
            } else {
                div.attachEvent('onclick', ClickMe);
            }
        }
        window.onload = setup;
    </script>
</head>
<body>
<div id='testDiv' style="width:100px;height:100px;background-color:gray">
    Hello World.
</div>
</body>
</html>


事件处理程序中W3C和IE还有诸多不一致之处，十分麻烦。好在大多都有较好的解决方案。更多信息请参考http://www.quirksmode.org/js/events_events.html
  • 大小: 13.8 KB
分享到：
| offsetLeft,Left,clientLeft的区别
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScript事件机制详细研究

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

    【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)1

    JavaScript 事件机制是网页交互的核心，它使得网页具备响应用户操作的能力。在移动端，考虑到不同设备和浏览器的差异，理解事件机制以及如何处理兼容性问题至关重要。本文将深入探讨JavaScript事件的捕获/冒泡阶段，...

    javaScript事件机制兼容【详细整理】

    JavaScript事件机制是Web开发中的核心概念之一，它负责页面中事件的响应和处理。为了保证在不同的浏览器中能够正确地执行事件处理函数，开发者需要对不同浏览器之间的事件机制兼容性有所了解，并进行相应的处理。...

    javascript事件详解

    总的来说，JavaScript事件是构建动态网页的关键工具，理解并掌握事件处理机制、事件阶段和事件对象的使用，能够帮助开发者编写更高效、更灵活的交互代码。在实际开发中，应充分利用事件委托、事件监听器等高级技巧，...

    JavaScript 事件的一些重要说明

    总结，理解JavaScript事件机制对于编写交互式的网页至关重要。异步回调确保了代码的非阻塞执行，事件对象提供了事件的相关信息，`this`关键字帮助我们定位到事件源，而事件冒泡的管理则让我们能够精确控制事件的传播...

    简析JavaScript事件、以及捕获和冒泡

    本文将深入探讨JavaScript事件机制，特别是事件的捕获和冒泡阶段。 首先，理解JavaScript事件的基础概念至关重要。事件是用户或浏览器在与网页交互时发生的动作，比如点击按钮、页面加载或滚动等。当这些事件发生时...

    js事件机制 .pdf

    ### JavaScript事件机制详解 #### 一、引言 在学习编程语言的过程中，"事件"这一概念往往是初学者遇到的一个难点，然而它又是编程中极为重要的一个组成部分。在JavaScript中，事件处理更是不可或缺的一部分，它是...

    javaScript大事机制兼容(具体整理)_.docx

    在JavaScript中，事件处理机制是网页交互的核心部分，它允许用户与页面进行互动，如点击按钮、提交表单等。本文将详细讲解JavaScript事件机制的兼容性问题，特别是针对不同浏览器（尤其是IE与非IE浏览器）的差异。 ...

    JavaScript的简单且小巧119字节事件发射器库

    标题提到的"JavaScript的简单且小巧119字节事件发射器库"正是这种设计理念的体现，它在极小的代码体积下实现了事件驱动的机制。 事件发射器库，通常包含两个主要功能：注册事件监听器和触发事件。在JavaScript中，...

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

    3. **干预系统的事件处理机制**： - **停止事件冒泡**：通过`event.stopPropagation()`阻止事件继续向上层元素传播。 - **阻止事件的默认行为**：通过`event.preventDefault()`防止默认的浏览器行为，例如阻止链接...

    浅析JavaScript中的事件机制

    接下来，我们将深入探讨JavaScript中的事件机制，这将有助于我们更好地理解如何在网页中实现用户交互。 首先，我们需要明白什么是事件。在计算机编程中，事件是指在运行程序时，某个特定的操作或动作发生时系统所...

    JavaScript王者归来 随书源码

    6. **事件处理**：JavaScript事件机制是用户或浏览器行为的响应机制。通过addEventListener或attachEvent等方法绑定事件处理器，实现用户交互功能，如点击、提交、滚动等。 7. **函数编程**：函数在JavaScript中是...

    JS.zip_javascript

    JavaScript是一种广泛应用于网页和网络应用的脚本语言，主要负责客户端的交互逻辑。在这个"JS.zip_javascript...通过实践和理解这些代码，可以提升对JavaScript事件机制和动态效果实现的理解，从而提升自己的开发能力。

    javascript左右拖曳翻页

    总的来说，实现“javascript左右拖曳翻页”需要深入理解JavaScript事件机制、动画制作以及页面布局。这个过程涉及到的技术点广泛且实用，对于提升用户体验和增强网站互动性有着重要作用。通过不断实践和优化，我们...

    javascript运行机制1

    JavaScript 运行机制 JavaScript 运行机制是指 JavaScript 代码在浏览器或 Node.js 环境中执行的过程。这个机制涉及到变量作用域、函数执行、上下文创建和垃圾回收等多个方面。 一、全局执行上下文 在 JavaScript...

    JavaScript 事件流、事件处理程序及事件对象总结

    在Web开发中，JavaScript事件是实现用户界面交互的核心机制。通过JavaScript与HTML之间的交互，可以响应用户的操作，如点击、按键、页面加载等各种行为。为了处理这些交互，需要对事件流、事件处理程序及事件对象有...

    JavaScript继承机制研究.pdf

    JavaScript继承机制研究 在本文中，我们将深入探讨JavaScript继承机制的实现方式，并对基于原型的继承、构造函数方式继承、组合继承、寄生式继承等继承机制进行了总结归纳和分析。 基于原型的继承 JavaScript是...

Magicbox
Global site tag (gtag.js) - Google Analytics