javascript事件

来源:互联网 发布:儒尼尼奥任意球数据 编辑:程序博客网 时间:2024/03/28 23:18

一、事件绑定

javascript的事件绑定可以有多种方式

1.HTML事件处理程序

直接在HTML元素中,显式地为元素绑定事件:

<button onclick="func()"></button>

这种方式的移除事件的处理程序方式是,将事件函数置空。

func = function() {}

2.DOM0级处理事件程序

把一个函数赋值给事件处理函数。

element.onclick= function() {    doSomething();}

这种方式的移除事件程序是,将程序处理事件置位null;

element.onclick = null;

3.DOM2级事件处理程序

通过事件监听的方式来绑定事件

element.addEventLisstener('click',function() {    doSomething();},false);

第一个参数为绑定的事件名称;第二个参数为事件处理函数;第三个参数为指定事件冒泡(false)还是事件捕获(true),默认是false,即为时间冒泡方式。
这种事件绑定的移出方式是remove

element.removeEventListener('click',function() {},false);

我们可以给一个元素添加多个事件处理程序,这些绑定的事件的执行顺序与定义的顺序一一对应。

4.IE的事件处理程序

IE有自己的事件绑定方式,与前面的事件监听有所差异

element.attachEvent('onclick',function() {    doSomething();});

IE的事件绑定函数只有两个参数,因为在IE中,它只支持事件冒泡方式。还有,它的事件名前面都有加上一个’on’。
它的事件移出方式为:

element.detachEvent('onclick',function() {    doSomething();});

二、事件捕获和事件冒泡

1.事件捕获

事件首先发生在DOM树的最高层对象(document),然后往事件触发的发个元素一层层传递。如点击a标签:document –> html –> body –> a

2.事件冒泡

事件触发的元素首先接收到事件,然后依次向上传递,直到最高层对象接收到事件。如:a –> body –> heml –> document

对于这两种事件接收方式,如果希望只一次事件触发,就能在整个DOM树上都得到响应,那么选择用事件冒泡方式;如果只希望在目标元素中触发事件,那么就阻止事件冒泡(也不是所有事件都能冒泡,如blur、focus、load事件都不支持事件冒泡)。

3.阻止事件冒泡

阻止事件冒泡的方式有两种:
w3c标准:event.stopPropagation();
IE中:event.cancelBubble();

三、事件委托

事件委托也称事件代理是指:当事件被推到更上层的父节点时,通过检查事件目标对象(target)来判断并获取事件源。
当我们需要给很多同级元素添加事件的时候,我们可以通过将事件绑定到它们的父节点上,从而将事件委托给父节点去出发事件处理函数。

  • 给ul标签下的li添加处理事件。
$ul.onclick = function(e) {    if(e.target.id = "$li") {        doSomething();    }     if(e.target.class = "someli") {        doSomething();    }}

这样做的优点是:
1.管理的函数变少了,不需要为每个元素都添加监听函数
2.可以方便的添加和修改元素,不需要因为元素的改动而修改事件绑定。新添加的子元素也在父节点中,只要给它们添加相同的标记就可以接收事件。
3.javascript和DOM节点之间的关联变少了,这样也就减少了因循环引用而带来的内存泄漏问题。

0 0
原创粉丝点击