浏览器事件监听

控制或右键单击元素并选择“检查 (Inspect)”。在 javaScript 控制台标签中输入：

monitorEvents($0)

现在，将鼠标悬停在该元素上时，关注或单击它， 将显示触发事件的名称及其数据。

要停止获取该数据，只需在控制台中写入下行：

unmonitorEvents($0)

我们需要三个项目来监听和对事件做出反应：

• 被监听的目标元素
• 想要对其做出反应的事件
• 反应时所要做出的行动

代码示例：

$('#my-input').on('keyopress', function() {
	$('body').css('background-color', '#2323FF');
});

$('#my-button').on('click', function() {
	$(this).remove();
	$('body').addClass('success');
})

对事件作出反应通常需要了解事件本身， 因此下面简要介绍了将要传递到事件监听器回调的事件对象。

请记住，当错误发生时，目标元素将调用回调函数。调用此函数后，jQuery 会将含有事件相关信息的事件对象传递到此函数。该对象包含大量可用于函数主体的信息。此对象通常在 JavaScript 中被引用为 e、evt 或 event，其中包含若干可用于 确定代码流的属性。

$( 'article' ).on( 'click', function( evt ) {
    console.log( evt );
});

target 属性包含作为事件目标的页面元素。

$( 'article' ).on( 'click', function( evt ) {
    $( evt.target ).css( 'background', 'red' );
});

在上述示例中，为页面上的每个 article 元素设置了一个事件侦听器。单击某个 article 后，会将包含事件相关信息 的对象传递到回调。evt.target 属性可用于访问刚刚被单击的元素！ jQuery 用于从 DOM 中选择刚才的元素 并将其背景更新为红色。

当你想要阻止浏览器将执行的默认操作时， 事件对象还将派上用场。例如， 在 anchor 链接上设置一个 click 事件监听器：

$( '#myAnchor' ).on( 'click', function( evt ) {
    console.log( 'You clicked a link!' );
});

单击 #myAnchor 链接会将消息记录到控制台， 但还将导航到该元素的 href 属性， 可能重定向到新的页面。

$( '#myAnchor' ).on( 'click', function( evt ) {
    evt.preventDefault();
    console.log( 'You clicked a link!' );
});

在上述代码中，evt.preventDefault(); 行指示浏览器不执行默认操作。

其他用途包括：

• event.keyCode 用以了解按下了哪个键，如果需要监听特定键， 则不起作用
• event.pageX 和 event.pageY 用以了解在页面上的哪个位置进行了单击， 用于分析跟踪
• event.type 用于发现所发生的事情，在监听目标的多个事件时非常有用

事件对象可能是最有用的工具！

$('input').on('keypress', function() {
	//...
})
// 简易方法（不需要指定事件类型）
$('input').keypress(function() {
	//...
})

$( 'article' ).on( 'click', function() {
    $( 'body' ).addClass( 'selected' );   
});

$( 'body' ).append( '<article> <h1>新文章的附加文章</h1> <p>内容 </p> </article>' );

单击“追加”文章将不会向 body 添加类 .selected，因为我们是在设置事件监听器之后才创建了“附加”文章。当我们选中 “article（文章）”时，它还不存在，因此 jQuery 将点击监听器添加到我们所有的文章（此时为空）中。

但如果使用事件代理，便可顺利进行。我们将监听点击父元素的事件， 并关注那些事件的目标。

$( '.container' ).on( 'click', 'article', function() { … });

…该代码命令 jQuery 关注 .container 元素的单击次数，如果存在单击，则检查单击事件的目标是否为 article 元素。

使用事件代理的另外一个优点是，你可以使用它来合并事件监听器的数量。例如，如果你 在一个页面上具有 1,000 个列表项：

<ul id="rooms">
    <li>Room 1</li>
    <li>Room 2</li>
            .
            .
            .
    <li>Room 999</li>
    <li>Room 1000</li>
</ul>

以下代码将为每个列表项设置一个事件侦听器，总计 1,000 个事件 侦听器！

$( '#rooms li' ).on( 'click', function() {
    ...
});

使用 jQuery 的事件代理仅在一个元素 (ul#rooms) 上设置事件侦听器并检查目标元素 是否为列表项；

$( '#rooms' ).on( 'click', 'li', function() {
    ...
});