Javascript 在浏览器环境中事件

来源：互联网发布：java webservice原理编辑：程序博客网时间：2024/06/05 19:19

转至http://www.javaeye.com/topic/334133

事件

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

基于内置的HTML属性

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

Js代码

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

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

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

元素的属性

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

Html代码

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

<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事件监听器

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

Js代码

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

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() 第三个参数。

Html代码

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

<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方法，但是仅仅适用于鼠标事件。

停止事件的传播

Html代码

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

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

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

Js代码

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

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

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

Js代码

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

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

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

Js代码

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);

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().参数都是相同的。让我们移除这个监听器。

Js代码

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

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

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

clicked body
clicked doc
clicked window

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

Js代码

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

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

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

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

Js代码

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

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

阻止默认的行为

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

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

Js代码

// 获取所有链接的对象
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
}

//  获取所有链接的对象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规范之前，事件并没有规范化。所以出现了大量浏览器事件兼容的问题。先看段代码

Js代码

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

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()

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

Js代码

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;
}

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 在浏览器环境中 事件

转至http://www.javaeye.com/topic/334133

事件

基于内置的HTML属性

元素的属性

DOM事件监听器

事件的捕捉和冒泡

停止事件的传播

阻止默认的行为

跨浏览器的事件监听器

事件的类型

Javascript 在浏览器环境中事件