当我们想去操作html文档中的某个元素,使其发生某种变化时,这都少不了事件绑定。
今天主要想写一下最基本的一些用法和注意点。
第一,事件绑定
(1)在元素的标签中,使用 on+事件名的方法。此种方法简单,也不存在什么兼容问题,但是没有实现代码分离,且只能绑定一个函数。
(2)第二种方法与第一种方法类似,只是事件绑定放到了js中。这实现了代码分离,也很简单。但是功能较弱,也只能实现一个函数的绑定。
(3)添加事件监听
这种方法,addEventListener可以同时绑定多个函数,在W3C标准下,为先绑定先执行。此外,此方法还有其它优点,可以在第三个参数下,指定是在事件冒泡时执行,还是事件捕捉时执行。此外,第二个参数,如果我们直接写一个函数,在函数中传入事件(e),我们可以直接捕捉到触发事件。最后还有一个注意点,就是函数体中的this,是添加事件监听前的元素。
这种方法优点这么多,所以我们自然优先选择这种方法,但是要注意,IE 不支持,要使用attachEvent.
第二 jQuery中的事件绑定
由于jQuery的使用频度较高,这里简略提一下jQuery中我们常用的事件绑定方法。
(1)$(选择器).bind(事件类型,[data],function(){});
(2) 可以将上述简写成,$(选择器).事件(function(){});
eg. a.click(function(){ alert("a is clicked");});
(3)使用on.
on(type,[selector],[data],fn)
这里有较为详细一些的,关于jQuery中的事件绑定 http://www.51edu.com/it/bckf/35687.html
第三,事件冒泡,事件捕获以及应用。
1)冒泡事件
冒泡事件如其名字,是从一个具体的元素的事件的触发,逐渐扩散到最不具体的事件目标(document)。我们最常用的一个应用,就是如果多个元素需要触发相同事件,或者动态添加某些元素导致无法绑定事件时,可以将事件触发绑定到父元素上,这样在子元素上的事件也会使父元素触发相应函数,这就叫做事件委托。
2)事件捕获
定义与事件冒泡相反,就是从最不具体的事件逐级捕获到最具体的事件。
3) 事件流
DOM事件流:同时支持两种事件模型:捕获型事件和冒泡型事件,但是,捕获型事件先发生。两种事件流会触及DOM中的所有对象,从document对象开始,也在document对象结束。在addEventListener中,将第三个参数设置为false,则是在冒泡事件中执行。这与IE默认的事件模型一致。
参考文章:
事件绑定:
http://www.cnblogs.com/ninofocus/archive/2012/11/07/2758772.html
http://www.itxueyuan.org/view/6338.html
冒泡及事件流:http://www.jb51.net/article/42492.htm