jQuery事件



上周状态不佳，一直迷迷糊糊度过了，看书安不下心来，博客一直未更新。周末调整心态，出去快玩疯了。

今天周一，状态不错。

------------------------------------------------分隔线---------------------------------------------

事件

Jquery提供了简单的方法用于事件处理器的选择。当事件发生时，提供的函数会被执行。在函数的内部，this指的是

被点击的元素。事件处理函数可以接收时间对象。这个对象可以被用来决定事件的性质和阻止事件的默认行为。

Jquery的基本事件

Jquery是直接作用于页面元素上的事件驱动响应。这些事件是终端用户和页面的交互才会被触发，比如在一个元素中

写入文本或者鼠标指针被移动。在一些例子中，比如页面加载或卸载事件，浏览器自己就会触发事件。

Jquery提供了方便的方法针对大多数本地浏览器事件。这些方法包括.click()、.focus()、.blur()、.change()等，是jquery .on()

方法的速记形式。On方法用于同一个处理器绑定多个事件，当你想要提供数据给事件处理程序，当你正在使用自定义

事件或者当你想要将多个事件和处理程序的对象进行传递。

Jquery的基本事件
Jquery是直接作用于页面元素上的事件驱动响应。这些事件是终端用户和页面的交互才会被触发，比如在一个元素中写

入文本或者鼠标指针被移动。在一些例子中，比如页面加载或卸载事件，浏览器自己就会触发事件。
Jquery提供了方便的方法针对大多数本地浏览器事件。这些方法包括.click()、.focus()、.blur()、.change()等，

是jquery .on()方法的速记形式。On方法用于同一个处理器绑定多个事件，当你想要提供数据给事件处理程序，当你正

在使用自定义事件或者当你想要将多个事件和处理程序的对象进行传递。

// Event setup using a convience method
$("p").click(function(){
	Console.log("You clicked a paragraph!");
});

//Equivalent event setup using the ‘.on()’ method
$("p").on("click",function(){
	Console.log("You clicked a paragraph!");
});

新页面元素的事件扩展

有一点很重要，.on()只能在你设置侦听器时存在的元素上创建事件侦听器。事件侦听器建立之后类似元素不会自动执行

你以前设置的事件行为。例如：

$( document ).ready(function(){
    // Sets up click behavior on all button elements with the alert class
    // that exist in the DOM when the instruction was executed
    $( "button.alert" ).on( "click", function() {
        console.log( "A button with the alert class was clicked!" );
    });
    // Now create a new button element with the alert class. This button
    // was created after the click listeners were applied above, so it
    // will not have the same click behavior as its peers
    $( "<button class='alert'>Alert!</button>" ).appendTo( document.body );
});

事件处理函数

每个事件处理函数可以接收一个时间对象，事件对象包括很多属性和方法。事件对象大部分被用于阻止通过.preventDefault()

方法的事件默认操作。事件对象包含一系列有用的属性和方法，包括:

pageX,pageY

事件发生时鼠标的位置，是从页面左上角的区域开始算（不是整个浏览器窗口）。

Type

事件类型

Which

按钮或者键被选中。

Data

事件发生时数据被绑定。比如:

<pre class="html" name="code">// Event setup using the `.on()` method with data
$( "input" ).on(
    "change",
    { foo: "bar" }, // Associate data with event binding
    function( eventObject ) {
        console.log("An input value has changed! ", eventObject.data.foo);
    }
);

Target

DOM元素启动事件。

Namespace

事件发生时命名空间被指定。

Timestamp

事件发生在 1970年 1月 1日与浏览器中的时间之间的差异以毫秒为单位。

PreventDefault()

组织事件的默认操作。

StopPropagation()

停止事件冒泡到其他元素。

关键字this绑定到DOM元素,除了事件对象，事件处理函数也可以通过this，访问DOM元素。将DOM元素变成一个jquery对象，

我们可以使用jquery方法，我们只需要$(this),如下：

var element = $(this);

一个更全面的例子如下：

// Preventing a link from being followed
$( "a" ).click(function( eventObject ) {
    var elem = $( this );
    if ( elem.attr( "href" ).match( /evil/ ) ) {
        eventObject.preventDefault();
        elem.addClass( "evil" );
    }
});

多个事件响应

很多应用中的元素将被绑定到多个事件。如果多个事件要共享同一个处理函数，您可以提供多个事件类型用空格来分开:

// Multiple events, same handler
$( "input" ).on(
    "click change", // Bind handlers for multiple events
    function() {
        console.log( "An input was clicked or changed!" );
    }
);

当事件有自己的处理器，你可以传递对象给.on()函数，可以是一个或者多个键值对，键是事件的名字，值是事件处理函数。

// Binding multiple events with different handlers
$( "p" ).on({
    "click": function() { console.log( "clicked!" ); },
    "mouseover": function() { console.log( "hovered!" ); }
});

Namespacing events

对于复杂的应用程序和共享给他人的插件，使用命名空间是非常有用的，你不会无意中操作你不知道的事件。

// Namespacing events
$( "p" ).on( "click.myNamespace", function() { /* ... */ } );
$( "p" ).off( "click.myNamespace" );
$( "p" ).off( ".myNamespace" ); // Unbind all events in the namespace

Tearing down event listeners

若要删除一个事件监听，你使用.off()函数并传递事件类型为off。如果命名函数已有事件，你可以隔离此事件，给命名

函数传递第二个参数。

// Tearing down all click handlers on a selection
$( "p" ).off( "click" );
// Tearing down a particular click handler, using a reference to the function
var foo = function() { console.log( "foo" ); };
var bar = function() { console.log( "bar" ); };
$( "p" ).on( "click", foo ).on( "click", bar );
$( "p" ).off( "click", bar ); // foo is still bound to the click event

Setting up events to run only once

有时候你需要一个特别的处理器只需要执行一次，在这之后，你可能不需要处理器运行或者你可能想要不同的处理器运行。

jQuery提供了.one()方法。

// Switching handlers using the `.one()` method
$( "p" ).one( "click", firstClick );
function firstClick() {
    console.log( "You just clicked this for the first time!" );
    // Now set up the new handler for subsequent clicks;
    // omit this step if no further click responses are needed
    $( this ).click( function() { console.log( "You have clicked this before!" ); } );
}

.one()函数可以被用于执行多个事件:

// Using .one() to bind several events
$( "input[id]" ).one( "focus mouseover keydown", firstEvent);
function firstEvent( eventObject ) {
    console.log( "A " + eventObject.type + " event occurred for the first time on the input with id " + this.id );
}