jQuery实战学习笔记（三）--事件处理

4.1 浏览器的事件模型

DOM第0级事件模型：（普通的事件模型）

1.Event实例：

    if(!event) event=window.event;//消除浏览器差异

    var target=(event.target)? event.target:event.srcElement;

2.事件冒泡和事件捕捉：

缺点：一个元素每次只能注册一个事件处理器，重复的事件会被覆盖！

---

DOM第2级事件模型：

实现了在同一个元素上为同一事件类型创建多个事件处理器！

 addEventListener(eventType,listener,useCapture);
 /*
     eventType:字符串参数，不带on前缀的事件名称；
     listener：函数引用，创建指定类型的处理器；
     useCapture：false（默认）则创建冒泡型处理器，true则创建事件捕获处理器
 */

注意：IE浏览器不支持DOM第2级事件模型。它有专有的模型。

---

IE事件模型：

    attachEvent(eventName,handler);
    /*
        eventName:带on的事件类型名称；
        handler:事件处理器，但Event实例必须通过window.event属性来获取
    */

jQuery事件模型

1. 统一了创建事件处理器的方法；
2. 允许为每个元素的每个事件类型创建多个处理器；
3. 使用标准事件类型的名称：click或mouseover；
4. 使得Event实例可作为处理器的参数；
5. 规范化Event实例中最常用的属性；
6. 统一了取消事件和阻止默认行为的方法；

1.使用jQuery绑定事件处理器：

bind(eventType,data,handler);
bind(eventMap);
/*
eventType:指定事件类型的名称；可用空格分隔来指定多个事件类型；
data:用来附加到Event实例的data属性，以便为处理器函数使用；可缺省；
handler:事件处理器的函数，会传入Event实例，并设置函数上下文(this)为冒泡阶段的当前元素；
eventMap:(对象)一个javascript对象，允许在一个调用中创建多个事件类型处理器。
*/
例：

    //第一种：
    $('img').bind('click',function(){
        alert(0);
    }).bind('click',function(){
        alert(1);
    });
    //第二种：
    $('img').bind({
        click:function(event){...},
        mouseover:function(event){...},
        mouseout:function(evnet){...}
    });

2.一次性事件：

one(eventType,data,listener);

3.删除事件处理器：

unbind(eventType,listener);
unbind(event);

eventType:只删除为指定事件类型创建的监听器；
listener:找出将要删除的指定监听器；
event：删除触发event实例描述的事件的监听器；
例：

    //删除特定命名空间下的所有事件：
    $("*").unbind('.fred');

4.Event实例：

注意：使用keyCode属性在不同浏览器下处理非字母字符是不可靠的！

5.预先管理事件处理器：

此种方法在使用动态元素的时候是极其方便的，可以预先为还不存在d元素创建事件处理器。！！！与AJAX配合时候很关键！！！

live(eventType,data,listener);

注意：

1. live”事件处理器会在每个匹配的元素上触发，但触发的事件不能继续传播。
2. 其次，live()方法只能应用于选择器，不能应用于衍生而来的包装集。

例：

    //合法：
    $("img").live(){...}
    $("img","#box").live(){...}
    //不合法：是在其他的某个对象上调用live()，而不是在选择器上
    $("img").closet('div').live(){...}

删除“live”事件处理：

die(eventType,listener)

6.触发事件处理器：

自动(模拟)触发事件：

trigger(eventType,data);

不导致冒泡或默认动作的自动触发事件：

triggerHandler(eventType,data);

7.其他事件相关的方法：

1.起切换作用的监听器：在多个函数中切换调用

toggle(listener1,listener2,…);

2.在元素上悬停鼠标：

hover(enterHandler,leaveHandler);
hover(handler)

    $(element).mouseenter(fn1).mouseleave(fn2);
    $(element).hover(fn1,fn2);

注意：使用mouseover和mouseout可能达不到预期效果。

总结：简单整理了下浏览器的事件模型和jQuery中的事件模型，主要是知识点的梳理，加深学习体系结构的理解记忆。其中很多在综合实践中才能体现其魅力所在！