jQuery event事件对象用法浅析_H5之家 - 中国HTML5教程资源分享第一站

jQuery event事件对象用法浅析来源：时间：2013-09-05 20:25:16 阅读数：

[导读] 本人对jquery的event不懂，搜索了很多关于jquery event事件介绍，下面我来记录一下，有需要了解jquery event事件用法的朋友可参考，希望此文件对各位有所帮助。最终传入事件处理程序的 event 其实已经被 j

本人对jquery的event不懂，搜索了很多关于jquery event事件介绍，下面我来记录一下，有需要了解jquery event事件用法的朋友可参考，希望此文件对各位有所帮助。

最终传入事件处理程序的 event 其实已经被 jQuery 做过标准化处理，

其原有的事件对象则被保存于 event 对象的 originalEvent 属性之中，

每个 event 都是 jQuery.Event 的实例，其原型链中保存有六个方法，

代码如下复制代码

jQuery.Event.prototype = {
    preventDefault: function() {
        // 取消事件默认行为
    },
    stopPropagation: function() {
        // 取消事件向上冒泡
    },
    stopImmediatePropagation: function() {
        this.isImmediatePropagationStopped = returnTrue;
        this.stopPropagation();
    },
    isDefaultPrevented: returnFalse,
    isPropagationStopped: returnFalse,
    isImmediatePropagationStopped: returnFalse
};

对于取消事件默认行为与向上冒泡大家肯定不陌生，让我们把重点放在第三个方法上，

从源码上我们知道其调用了stopPropagation方法，所以他第一个作用就是取消冒泡。

代码如下复制代码

for ( i = 0; i < handlerQueue.length && !event.isPropagationStopped(); i++ ) {
    matched = handlerQueue[ i ];
    ...
    for ( j = 0; j < matched.matches.length && !event.isImmediatePropagationStopped(); j++ ) {
        ...
    }
}

让我先来简单阐述下 jQuery 的事件绑定机制，这样能让大家更好理解他的第二个作用。

使用 jQuery 绑定的事件处理程序会按其类型与绑定顺序存于节点相应的events对象中，

当事件触发时则使用 $._data 取出events中对应事件的处理程序列队以便后续遍历执行。

内层循环的 matched.matches 中保存事件触发时当前节点需执行的事件处理程序列队，

所以当 isImmediatePropagationStopped 为 true 时则会阻止当前事件下该节点的后续事件处理程序执行。

最后来个简单的

代码如下复制代码

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="gbk">
    <title>jQuery event 对象浅析</title>
</head>
<body>
    <a id="J_btn" href="javascript:;">点我吧！</a>
    <script type="text/javascript" src="../js/lib/jquery.js"></script>
    <script type="text/javascript">

        $("body").delegate("#J_btn", "click", function() {
            alert("冒泡至 BODY");
        });

var $btn = $("#J_btn");

        $btn.click(function(event) {
            event.stopImmediatePropagation();
            alert("第一次点击");
        });

        $btn.click(function() {
            alert("第二次点击");
        });

</script>
</body>
</html>

希望能帮助大家更好的理解！

jQuery.event 事件机制 focusin/ focusout 事件

首先来看 jQuery.simulate() 方法，该方法基于原生事件实现可冒泡事件。源码如下：

代码如下复制代码

simulate: function(type, elem, event, bubble) {
        var evt = jQuery.extend(new jQuery.Event(), event, {
                type: type,
                isSimulated: true,
                originalEvent: {}
            }
        );

        if (bubble) {
            jQuery.event.trigger(evt, null, elem);     // 直接程序触发，这里可冒泡
        } else {
            jQuery.event.dispatch.call(elem, evt);
        }

        if (evt.isDefaultPrevented()) {
            event.preventDefault();        //由于模拟的缘故，基础对象应该同时更改
        }
    }