|
精华帖 (1) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-02-17
事件事件的例子很多了。如用户输入，点击按钮等等。可以把一个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了。这就是事件的传播。事件的传播可以用两种方法实现
DOM 2规范建议事件的传播分为三个阶段。捕获，目标，冒泡。意思就是document->a 再从 a->document.这个过程。。。event对象有eventPhase属性，能返回当前的阶段。
说说残酷的现实把。大家都知道历史上是ie和netscape，它们都实现了规范的一部分。IE实现的是冒泡，而netscape实现的是捕获。现在firefox,opera都实现了三个阶段。但是ie还是冒泡。。。
我们看看关于事件传播的实际意义
在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
这个就可以看出来事件的传播。与addEventLister()相反的方法是removeEventListener().参数都是相同的。让我们移除这个监听器。 para.removeEventListener('click', paraHandler, false);
如果这么做会发现，结果如下 clicked body
让我们来看看如何停止事件的传播。你可以调用 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中有啥不一样的。
下面写一个跨浏览器的例子 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事件的，下面来说下事件的类型。这些事件都是各个浏览器通用的事件，每个浏览器的事件各不相同。如果需要其他特殊的事件就要去查看文档了。
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
浏览 3403 次
