事件
事件的例子很多了。如用户输入,点击按钮等等。可以把一个javascript函数赋给一个事件(这个可以叫做事件监听器或者事件处理器),当事件发生了,就会执行这个函数。
基于内置的HTML属性
添加一个时间最快的方法就是,直接添加到html属性中,代码如下
<div οnclick="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.。。。