风雪涟漪

浏览: 506946 次
性别:
来自: 大连->北京

最近访客更多访客>>

zeraw

我菜鸟1号

孤狼18

freeman01

博主相关

博客

微博

相册

留言

关于我

博客专栏

: 搜索引擎基础（Search...
浏览量：9009

: SEO策略
浏览量：18385

文章分类

社区版块

存档分类

Javascript 在浏览器环境中 (六) 事件

博客分类：

Javascript

浏览器 JavaScript IE Firefox Opera

事件

事件的例子很多了。如用户输入，点击按钮等等。可以把一个javascript函数赋给一个事件(这个可以叫做事件监听器或者事件处理器)，当事件发生了，就会执行这个函数。

基于内置的HTML属性

添加一个时间最快的方法就是，直接添加到html属性中，代码如下

<div onclick="alert('aaa!')">click</div>

当用户点击这个div的时候，alert('aaa')就被执行了。发现了这种方式并没有明显的函数来监听这个事件，但是这个函数已经在后台创建了。

元素的属性

另一种方法是，把一个函数赋给元素的属性。代码如下

<div id="my-div">click</div>
<script type="text/javascript">
  var myelement = document.getElementById('my-div');
  myelement.onclick = function() {
    alert('aaa!');
    alert('bbb!');
  }
</script>

这个方法很面显得要比第一种方式要好，因为它实现了html代码和javascript代码的分离了。一定要知道html的作用在于内容，而javascript是行为，css是用于样式的。我们尽可能的让这三部分进行分离。

缺点是灵活度不够，只能一个函数监听一个事件。下面的方法就可以解决这个问题。

DOM事件监听器

最好的方式是使用时间监听器，这样就可以用许多函数监听一个事件。当发生事件的时候，所有监听的函数就会执行。所有的函数都是独立的，不需要管其他的函数。代码如下

var mypara = document.getElementById('my-div');
mypara.addEventListener('click', function() {alert('Boo!')}, false);
mypara.addEventListener('click', console.log, false);

这段javascript用addEventListener去监听click事件。第一个参数是事件的类型，第二个参数是一个函数，匿名函数也可以。当click发生click事件的时候，函数被执行，并且传入一个event对象。

事件的捕捉和冒泡

下面让我们详细的来说下 addEventListener() 第三个参数。

<body>
  <ul>
    <li><a href="http://phpied.com">my blog</a></li>
  </ul> 
</body>

当你点击这个链接，当然也同样点击了li,ul,body.一个click链接，就相当于点击了这个document了。这就是事件的传播。事件的传播可以用两种方法实现

时间的捕捉-这个点击事件首先发生在document上，然后是body，然后是ul,然后是li，最后是a。
事件的冒泡-和上一个过程刚好相反。先从a开始在传播到document。

DOM 2规范建议事件的传播分为三个阶段。捕获，目标，冒泡。意思就是document->a 再从 a->document.这个过程。。。event对象有eventPhase属性，能返回当前的阶段。

说说残酷的现实把。大家都知道历史上是ie和netscape，它们都实现了规范的一部分。IE实现的是冒泡，而netscape实现的是捕获。现在firefox,opera都实现了三个阶段。但是ie还是冒泡。。。

我们看看关于事件传播的实际意义

关于第三个参数就是是否使用事件的传播。一般为了跨浏览器，这个参数最好设为false以及用冒泡的实现方式。
可以在监听器中，控制事件的传播。因此可以停止冒泡。我们可以使用事件对象的stopPropagation方法。
我们也可以用事件代理。如果在div有10个按钮的话，你可以把每个按钮添加一个监听器。但是最好的方法是监听div。当事件发生后，判断哪个按钮被点击就可以了。

在IE中，用setCapture和releaseCapture方法，但是仅仅适用于鼠标事件。

停止事件的传播

<p id="closer">final</p>

一个函数用来处理click事件。

function paraHandler(){alert('clicked paragraph');}

接下来让这个函数作为一个事件的监听器

var para = document.getElementById('closer');
para.addEventListener('click', paraHandler, false);

接下来，在分别为document,body,window添加监听器。

document.body.addEventListener('click', function(){alert ('clicked body')}, false);
document.addEventListener('click', function(){alert ('clicked doc')}, false);
window.addEventListener('click', function(){alert('clicked window')}, false);

需要注意的是DOM规范并没有提到关于window的事件，DOM处理的是DOCUMENT和浏览器没啥关系。IE是不会有window的事件传播的，而firefox可以。

我们测试一下。执行的顺序如下

clicked paragraph
clicked body
clicked doc
clicked window

这个就可以看出来事件的传播。与addEventLister()相反的方法是removeEventListener().参数都是相同的。让我们移除这个监听器。

para.removeEventListener('click', paraHandler, false);

如果这么做会发现，结果如下

clicked body
clicked doc
clicked window

让我们来看看如何停止事件的传播。你可以调用 stopPropagation() 方法。

function paraHandler(e){
  alert('clicked paragraph');
  e.stopPropagation();
}
para.addEventListener('click', paraHandler, false);

当我们再次点击p的时候，发现只弹出一个alert。事件停止了传播。

需要注意的是，removeEventListener不能移除匿名函数的情况，这两个匿名函数是两个内存，下面的代码是不能移除监听器的。

document.body.removeEventListener('click',
    function(){
        alert('clicked body')
    }, 
false); //  不能移除监听器。

阻止默认的行为

有许多浏览器事件有默认的行为。如link就是个例子。你click link默认的行为是跳转到另一个页面。我们可以禁止这个链接的行为。我们可以调用 preventDefault()方法去实现。

下面个例子就是在click链接之后，有提示信息出现。来确认是否跳转。代码如下

//  获取所有链接的对象
var all_links = document.getElementsByTagName('a'); 
for (var i = 0; i < all_links.length; i++) { // 循环链接
  all_links[i].addEventListener(
    'click', // 事件的类型
    function(e){事件的函数
      if (!confirm('Are you sure you want to follow this link?')){
        e.preventDefault();
      }
    },
    false); //事件的捕获为false
}

注意不是所有的事件都可以阻止。

跨浏览器的事件监听器

现在的大部分浏览器都支持DOM1规范。在DOM2规范之前，事件并没有规范化。所以出现了大量浏览器事件兼容的问题。先看段代码

document.addEventListener('click', function(e){}, false);

让我们看看IE中有啥不一样的。

在IE中并没有addEventListener方法。在IE5之后可以用attachEvent
当使用attachEvent,click变为onclick.
如果有标签属性的方式来监听事件，是不会有event对象传入到函数中的。(就是开篇所说的前两个实现事件的方式。。)但在IE中，无论是什么方式，IE都会传入一个window.event。
在IE中，不会获取target属性，来知道哪个元素上的事件发生了。但是我们可以用srcElement来取代它。
以前说过了，IE中没有事件的捕获，只有事件的冒泡。
并没有stopPropagation()方法，可以设置cancelBubble属性为true。
没有preventDefault() 方法，而是用returnValue为false来取代它。
删除监听器可以用 detachEvent(). 来取代removeEventListener()

下面写一个跨浏览器的例子

function callback(evt) {
  evt = evt || window.event;//如果evt不存在，说明是ie，赋给evt一个window.event.
  //判断target是否存在，不存在的话就是ie用evt.srcElment来取代标准的target.
  var target = (typeof evt.target !== 'undefined') ? evt.target : evt.srcElement;
  // 下面可以写业务逻辑了。

}
// 开始监听一个click事件。
if (document.addEventListener){ // 如果存在就是FF
  document.addEventListener('click', callback, false); 
} else if (document.attachEvent){ // 不存在就是IE
  document.attachEvent('onclick', callback);
} else {//其他的浏览器
  document.onclick = callback;
}

事件的类型

上面说的例子都是针对click事件的，下面来说下事件的类型。这些事件都是各个浏览器通用的事件，每个浏览器的事件各不相同。如果需要其他特殊的事件就要去查看文档了。

鼠标事件：mouseup,mousedown,click(就是mousedown,mouseup的连贯),dbclick
键盘事件：keydown,keypress,keyup.
load,一个图片或者页面以及它所有的元素加载完毕执行的事件，Unload-用户离开页面。beforeunload-一般用来提示用户离开页面。
abort:在firefox中用户停止页面的读取，在IE中是停止图片的读取。
error:IE和Firefox中javascript报错，或者在IE中，图片不能读取。
resize:浏览器大小更改。scoll，页面scoll的时候，contextmenu(右键的菜单)
focus-进入一个表单
blur-离开一个表单
change-在值改变后，离开表单。
select-在text 域中选取text
reset,submit.。。。

分享到：

Javascript 在浏览器环境中 (七) XMLHttpR ... | 外观模式(Facade Pattern) 追MM

2009-02-17 14:17
浏览 2656
评论(0)
论坛回复 / 浏览 (0 / 3403)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

博客专栏

文章分类

社区版块

存档分类

最新评论

Javascript 在浏览器环境中 (六) 事件

事件

基于内置的HTML属性

元素的属性

DOM事件监听器

事件的捕捉和冒泡

停止事件的传播

阻止默认的行为

跨浏览器的事件监听器

事件的类型

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

博客专栏

文章分类

社区版块

存档分类

最新评论

Javascript 在浏览器环境中 (六) 事件

事件

基于内置的HTML属性

元素的属性

DOM事件监听器

事件的捕捉和冒泡

停止事件的传播

阻止默认的行为

跨浏览器的事件监听器

事件的类型

评论

发表评论

相关推荐

Javascript 基本数据类型，数组，循环以及条件 - 基本数据类型

Javascript 基本数据类型，数组，循环以及条件 - 运算符

Javascript 基本数据类型，数组，循环以及条件-变量

Javascript 在浏览器环境中 (七) XMLHttpRequest

Javascript 在浏览器环境中 (五) HTML DOM

Javascript 在浏览器环境中 (四) DOM节点的创建,修改与删除

Javascript 在浏览器环境中 (三) DOM节点的访问

Javascript 在浏览器环境中 (二) BOM

Javascript 在浏览器环境中 (一) 目录

Javascript 继承 (七)

Javascript 继承 (六)

Javascript 继承 (五)

Javascript 继承 (四)

Javascript 继承 (三)

Javascript 继承 (二)

Javascript 继承 (一)

Javascript Prototype （二）

Javascript Prototype （一）

Javascript 对象 (四)

Javascript 对象 (三)

最近访客更多访客>>