jQuery 事件基础

jQuery

jQuery 事件基础

jQuery 为大多数原生事件提供了简易方法，比如.click()、.focus()、.blur()、.change()。这些是 jQuery 的.on()方法的简写，这些方法在内部会调用.on()方法，因此推荐直接使用.on()方法。

$( "p" ).click(function() {
    console.log( "You clicked a paragraph!" );
});

$( "p" ).on( "click", function() {
    console.log( "click" );
});

.on()方法会返回原来的 jQuery 对象。

事件对象

每个事件都会取得一个事件对象，事件对象包含了许多有用的属性和方法。

• pageX, pageY
• type
• which：被按下的键或者按钮。
• data：

$( "input" ).on(
    "change",
    { foo: "bar" }, //绑定事件的同时传入 data 属性
    function( eventObject ) {
        console.log("An input value has changed! ", eventObject.data.foo);
    }
);

• target
• namespace：jQuery 可以在绑定事件的同时制定命名空间，可以只触发或者移除指定命名空间的事件处理函数。

$p.on( "click.abc.foo", handler );    //定义在 abc 和foo 两个命名空间下
$p.trigger( "click.abc" );    //执行 abc 命名空间下的 click 事件处理函数
$p.off( "click.foo" );    //移除定义在 foo 命名空间下的事件处理函数

• timeStamp：事件被触发的时间（从1970年1月1日至今的毫秒数）
• preventDefault()
• stopPropagation()

除了事件对象以外，事件处理函数还可以通过 this 取得绑定的 DOM 元素。

设置多个事件响应

//多个事件，同个事件处理程序
$( "input" ).on(
    "click change", 
    function() {
        console.log( "An input was clicked or changed!" );
    }
);
//多个事件，多个事件处理程序
$( "p" ).on({
    "click": function() { console.log( "clicked!" ); },
    "mouseover": function() { console.log( "hovered!" ); }
});

设置一次性事件

.one()可以创建一次性事件。

$( "p" ).one( "click", firstClick );    //触发后移除该元素上的事件处理程序，即这个事件在所有 p元素上都可以触发一次
$( "input[id]" ).one( "focus mouseover keydown", firstEvent);    //任何一个事件触发，移除整个事件处理程序

辅助事件

.hover()方法接受一个或两个函数。如果传入了两个事件，那么这两个函数将分别在 mouseenter 和mouseleave 事件触发时被调用。如果仅传入一个函数，那么这个函数在 mouseenter 和mouseleave 事件触发时都会被调用。

事件委托

//这会在 body 中任意一个 button 被点击时触发
$( "body" ).on({
    click: function( event ) {
        alert( "Hello." );
    }
}, "button" );  //"button"是 CSS 选择器
//更加轻便的写法
$( "body" ).on( "click", "button", function( event ) {
    alert( "Hello." );
});

触发事件处理程序

.trigger()可以触发任何用 jQuery 或者原生 JavaScript 绑定的事件，但是不能够触发原生浏览器事件。因为在使用原生 JavaScript 以及 jQuery 绑定事件时都会给 jQuery 留下一个引用。

$( "a" ).trigger( "click" );

如果需要模拟原生浏览器事件可以使用.simulate()方法。使用这个方法模拟原生浏览器事件同样会触发由 JavaScript 和jQuery 绑定的事件。

$( "a" ).simulate( "click" );

.triggerHandler()方法同样可以触发事件，但是与.trriger()有以下几点不同。

• .triggerHandler()只会触发 jQuery 对象中的第一个元素。
• .triggerHandler()返回事件处理函数的返回值，因此不能够链式调用。
• .triggerHandler()不会触发默认行为。
• .triggerHandler()触发的事件不会冒泡。
• ##自定义事件
  jQuery 支持绑定自定义事件，自定义事件需要手动触发。

//绑定自定义事件
$( ".lightbulb" ).on( "light:toggle", function( event ) {
    //do something
});
//触发自定义事件
room.find( ".lightbulb" ).trigger( "light:toggle" );

jQuery 事件扩展

jQuery 事件不仅可以被绑定在 DOM 元素上，也可以被绑定在一般对象上。

jQuery.event.props

jQuery.event.props 是一个保存属性名字符串的数组，这些属性在 jQuery 处理事件时会被从原生事件对象复制到 jQuery 事件对象。使用 jQuery.event.props.push( "newPropertyName" )可以向这个列表添加属性名。如果原生事件对象中不存在这个属性的话这个属性的值就会是 undefined。向这个列表中添加过多的属性名会显著降低事件传递性能，因此对于偶尔才会用到的一些属性，推荐使用 event.originalEvent 来访问。如果一定要复制的话推荐使用 jQuery.event.fixHooks

jQuery.event.fixHooks 是一个对象，这个对象拥有两个属性。

• props：同 jQuery.event.props。
• fliter：Function( event, originalEvent )，jQuery 在创建 jQuery 事件对象之后会首先复制 props 中的基本属性，再复制 fixHooks 定义的特殊属性。fliter 可以创建新的属性，也可以删除已有的属性。

//设置一个在 drop 事件中复制 dataTransfer 属性的钩子
jQuery.event.fixHooks.drop = {
    props: [ "dataTransfer" ]
};

同一个事件的 fixHooks 之间会产生冲突，而且由于 fixHooks 没有被广泛地使用，这个冲突仍然需要手动来解决。

var existingHook = jQuery.event.fixHooks.drop;
if ( !existingHook ) {
    jQuery.event.fixHooks.drop = {
        props: [ "dataTransfer" ]
    };
} else {
    if ( existingHook.props ) {
        existingHook.props.push( "dataTransfer" );
    } else {
        existingHook.props = [ "dataTransfer" ];
    }
}

特殊事件钩子

jQuery 特殊事件钩子的机制与 fixHooks 相似，特殊的事件信息保存在 jQuery.event.special.NAME 中（NAME 是特殊事件名称）。在特殊事件钩子的使用中也存在 fixHooks 中同样的问题。

• noBubble：表示是否阻止事件冒泡，默认值是 false。
• bindType：表示绑定的特殊事件应该像某个事件类型一样被处理。
• delegateType：表示委托的特殊事件应该像某个事件类型一样被处理。

jQuery.event.special.pushy = {
    bindType: "click",
    delegateType: "click"
};

在绑定了"pushy"的元素上调用.trggle("click")会触发"pushy"事件，但是调用.off("click")并不会移除"pushy"事件。

handleObj 对象

事件对象中有一个 handleObj 对象，这个对象提供了关于事件的信息。这个对象应该被当做只读对象来对待。

$( ".dialog" ).on( "click.myPlugin", "button", {
    mydata: 42
}, myHandler );

这个对象中只应该包括以下这些属性。

• type：事件类型，如果事件类型映射被设置了，那么这个值就是设置的事件类型。
• origType：事件类型原本的名称，无论是否设置了事件类型映射。
• namespace
• selector：在事件委托中委托事件的元素的选择器，在这个例子中是"button"。
• data
• handler

可以在事件对象中设置以下这些方法来对事件进行修改。

• setup：function( data, namespaces, eventHandle )，在特定事件在一个元素上被第一次绑定时被调用。如果希望这个事件被绑定，那么这个函数应该返回 false。
• teardown：function()，在一个元素上的最后一个特定事件被移除时调用。如果希望这个事件被移除，那么这个函数应该返回 false。
• add：function(handleObj)，在每一次特定事件被 jQuery 绑定在元素上时被调用。这个函数的返回值没有意义。
• remove：function(handleObj)，在特定事件被移除时被调用。这个函数的返回值没有意义。
• trigger：function(event, data)，当特定事件被.trigger()和.triggerHandler()触发时被调用。其中的 event 指jQuery 的事件对象，data 指data 对象。如果这个函数返回 false，那么这个事件将不会继续处理。
• _default：function(event, data)，当一个元素上的所有事件被处理完毕后，开始处理默认事件之前被调用。如果希望默认事件被处理，那么这个函数应该返回 false。
• handle：function(event, data)，替代原来的事件处理程序被调用。它可以在原本的事件处理程序被调用之前修改 jQuery 事件对象中的信息，但是应该在返回或者执行后续事件处理程序之前恢复数据。这个钩子是特殊的，因为即使这个事件类型被映射，这个钩子依然是在原来的事件名称下调用。因此在设置了事件映射的事件上，除 handle 以外的钩子都永远不会被调用 。

下面是一个例子：重复点击事件。

//设置特殊事件钩子
jQuery.event.special.multiclick = {
    //设置事件映射
    delegateType: "click",
    bindType: "click",
    handle: function( event ) {
        var handleObj = event.handleObj;
        var targetData = jQuery.data( event.target );
        var ret = null;
        // 取得点击次数
        targetData.clicks = ( targetData.clicks || 0 ) + 1;
        if ( targetData.clicks % event.data.clicks === 0 ) {
            event.type = handleObj.origType;
            ret = handleObj.handler.apply( this, arguments );
            event.type = handleObj.type;
            return ret;
        }
    }
};
$( "p" ).on( "multiclick", {
    clicks: 3
}, function( event ) {
    alert( "clicked 3 times" );
});