jQuery.on() 函数

最新推荐文章于 2025-09-13 09:06:35 发布

转载最新推荐文章于 2025-09-13 09:06:35 发布 · 72 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wanan-01/p/7421651.html

文章标签：

#javascript #ViewUI

本文介绍了如何使用jQuery为页面元素绑定click等事件，包括为现有及动态添加的元素绑定事件的方法，以及如何为元素绑定多个事件并传递额外数据。

1.绑定所有的<p>元素
// 为所有P元素分别绑定click事件处理函数handler
$("p").on("click", handler);

2.为div中所有的P元素绑定click事件
// 为div中的所有p元素绑定click事件处理程序，对后面append添加的p也有用
$("div").on("click", "p", function(){
    // 这里的this指向触发点击事件的p元素(Element)
    alert( $(this).text() );
});

// 在body元素上绑定click事件处理函数handler，如果这个click事件是由其后代的P元素触发的，就执行handler
$(document.body).on("click", "p", handler);
注意："focus"、"blur"等部分事件不支持冒泡，使用事件委托机制将无效。不过，他们一般也有对应的支持冒泡的事件。例如与"focus"对应的"focusin"，与"blur"对应的"focusout"。此外，我们也可以使用event.stopPropagation()方法，让当前触发的事件停止冒泡。

3.为元素绑定多个事件并为其传入附件数据
<p id="n5">Google</p>

var data = { id: 5, name: "张三" };

var events = {
    "mouseenter": function(event){
        $(this).html( "你好，" + event.data.name + "!");       
    },
    
    "mouseleave": function(event){
        $(this).html( "再见!");
    }       
};

//为n5绑定mouseenter mouseleave两个事件，并为其传入附加数据data
$("body").on(events, "#n5", data);