monitorEvents()
浏览器事件监听
控制或右键单击元素并选择“检查 (Inspect)”。在 javaScript 控制台标签中输入:
monitorEvents($0)
现在,将鼠标悬停在该元素上时,关注或单击它, 将显示触发事件的名称及其数据。
要停止获取该数据,只需在控制台中写入下行:
unmonitorEvents($0)
monitorEvents() Documentation | 监听事件 文档
事件类型
事件监听
我们需要三个项目来监听和对事件做出反应:
- 被监听的目标元素
- 想要对其做出反应的事件
- 反应时所要做出的行动
代码示例:
$('#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
用于发现所发生的事情,在监听目标的多个事件
时非常有用
事件对象可能是最有用的工具!
jQuery 的事件 对象
event.target 属性
DOM 级别 3 事件
简易方法
$('input').on('keypress', function() {
//...
})
// 简易方法(不需要指定事件类型)
$('input').keypress(function() {
//...
})
注意,并非每个事件类型都有简易方法,具体查看 jQuery API,了解哪些事件类型可以使用简易方法。
事件代理
$( '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() {
...
});