jQuery on() 方法

最新推荐文章于 2023-09-10 13:40:58 发布

.NET跨平台

最新推荐文章于 2023-09-10 13:40:58 发布

阅读量456

点赞数

分类专栏： Jquery及其组件

Jquery及其组件专栏收录该内容

147 篇文章 3 订阅

订阅专栏

实例

向 <p> 元素添加 click 事件处理程序：

$(document).ready(function(){
  $("p").on("click",function(){
    alert("段落被点击了。");
  });
});

定义和用法

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。
提示：如需移除事件处理程序，请使用 off() 方法。
提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。

语法

$(selector).on(event,childSelector,data,function)

参数	描述
event	必需。规定要从被选元素移除的一个或多个事件或命名空间。
	由空格分隔多个事件值，也可以是数组。必须是有效的事件。
childSelector	可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 `delegate()` 方法）。
data	可选。规定传递到函数的额外数据。
function	可选。规定当事件发生时运行的函数。

更多实例

bind() 改为 on()
如何使用 on() 来达到与 bind() 相同的效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#div1").on("click",function(){
    $(this).css("background-color","pink");
  });
  $("#div2").bind("click",function(){
    $(this).css("background-color","pink");
  });
});
</script>
</head>
<body>

<h4 style="color:green;">该实例演示了如何使用 on() 来达到与 bind() 相同的效果。</h4>

<div id="div1" style="border:1px solid black;">这些一些文本。
<p>点我使用 <b>on() 方法设置背景颜色</b>。</p>
</div><br>

<div id="div2" style="border:1px solid black;">这些一些文本。
<p>点我使用 <b>bind() 方法设置背景颜色</b>。</p>
</div>

</body>
</html>

delegate() 改为 on()
如何使用 on() 来达到与 delegate() 相同的效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#div1").on("click","p",function(){
    $(this).css("background-color","pink");
  });
  $("#div2").delegate("p","click",function(){
    $(this).css("background-color","pink");
  });
});
</script>
</head>
<body>

<h4 style="color:green;">该实例演示了如何使用 on() 来达到与 delegate() 相同的效果。.</h4>

<div id="div1">
<p>点我使用 <b>on() 方法设置背景颜色</b>。</p>
</div>

<div id="div2">
<p>点我使用 <b>delegate() 方法设置背景颜色</b>。</p>
</div>

</body>
</html>

live() 改为 on()
如何使用 on() 来达到与 live() 相同的效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://apps.bdimg.com/libs/jquery/1.7.0/jquery.js">
</script>
<script>
$(document).ready(function(){
  $("#div1").on("click",function(){
    $(this).css("background-color","pink");
  });
  $("#div2").live("click",function(){
    $(this).css("background-color","pink");
  });
});
</script>
</head>
<body>

<h4 style="color:green;">该实例演示了如何使用 on() 和 live()。</h4>

<div id="div1" style="border:1px solid black;">这是一些文本。
<p>点击此处，使用 <b>on() 方法来设置背景颜色</b>。</p>
</div><br>

<div id="div2" style="border:1px solid black;">这是一些文本。
<p>点击此处，使用 <b>live() 方法来设置背景颜色</b>。</p>
</div>
<p><b>注意：</b>live() 方法在 jQuery 版本 1.7 中被废弃，在版本 1.9 中被移除。请使用 on() 方法代替。</p>
</body>
</html>

添加多个事件处理程序
如何向元素添加多个事件处理程序。

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").on("mouseover mouseout",function(){
    $("p").toggleClass("intro");
  });
});
</script>
<style type="text/css">
.intro
{
font-size:150%;
color:red;
}
</style>
</head>
<body>

<p>Move the mouse pointer over this paragraph.</p>

</body>
</html>

使用 map 参数添加多个事件处理程序
如何使用 map 参数向被选元素添加多个事件处理程序。

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").on({
    mouseover:function(){$("body").css("background-color","lightgray");},  
    mouseout:function(){$("body").css("background-color","lightblue");}, 
    click:function(){$("body").css("background-color","yellow");}  
  });
});
</script>
</head>
<body>

<p>Click or move the mouse pointer over this paragraph.</p>

</body>
</html>

在元素上添加自定义事件
如何在元素上添加自定义命名空间事件。

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").on("myOwnEvent", function(event, showName){
    $(this).text(showName + "! What a beautiful name!").show();
  });
  $("button").click(function(){
    $("p").trigger("myOwnEvent",["Anja"]);
  });
});
</script> 
</head>
<body>

<button>Trigger custom event</button>
<p>Click the button to attach a customized event on this p element.</p>

</body>
</html>

向函数传递数据
如何向函数传递数据。

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
function handlerName(event) 
{
  alert(event.data.msg);
}

$(document).ready(function(){
  $("p").on("click", {msg: "You just clicked me!"}, handlerName)
});
</script>
</head>
<body>

<p>Click me!</p>

</body>
</html>

向未来的元素添加事件处理程序
演示 on() 方法也适用于尚未创建的元素。

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("div").on("click","p",function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("<p>This is a new paragraph.</p>").insertAfter("button");
  });
});
</script>
</head>
<body>

<div style="background-color:yellow">
<p>This is a paragraph.</p>
<p>Click any p element to make it disappear. Including this one.</p>
<button>Insert a new p element after this button</button>
</div>

</body>
</html>

移除事件处理程序
如何使用 off() 方法移除事件处理程序。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").on("click",function(){
    $(this).css("background-color","pink");
  });
  $("button").click(function(){
    $("p").off("click");
  });
});
</script>
</head>
<body>

<p>点击这个段落修改它的背景颜色。</p>
<p>点击一下按钮再点击这个段落( click 事件被移除 )。</p>

<button>移除 click 事件句柄</button>

</body>
</html>

on() 和 click() 的区别:

二者在绑定静态控件时没有区别，但是如果面对动态产生的控件，只有 on() 能成功的绑定到动态控件中。

以下实例中原先的 HTML 元素点击其身后的 Delete 按钮就会被删除。而动态添加的 HTML 元素，使用 click() 这种写法，点击 Delete 按钮无法删除；使用 On() 方式可以。

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>

<h1>展示jQuery中on()和click()的区别</h1>

<p>
	<span>点击生成新按钮。NewOn生成的Delete按钮行为用on()实现，NewClick生成的Delete按钮行为用click()实现。</span>
</p>
<div class="test">
	<button class="new" id="newon">NewOn</button> 
	<button class="new" id="newclick">NewClick</button>
	<ul class="li"> 
		<li>原先的HTML元素on<button class="deleteon">Delete</button></li> 
		<li>原先的HTML元素click<button class="deleteclick">Delete</button></li> 
	</ul> 
</div>

    $("#newclick").click(function(){ 
        $(".li").append('<li>动态添加的HTML元素click<button class="deleteclick">Delete</button></li>'); 
    });
    $("#newon").click(function(){ 
        $(".li").append('<li>动态添加的HTML元素on<button class="deleteon">Delete</button></li>'); 
    });
    $(".delete").click(function(){ 
        $(this).parent().remove(); 
    }); 

    $(".li").on('click', ".deleteon", function(){
        $(this).parent().remove(); 
    })
    $(".deleteclick").click(function(){ 
        $(this).parent().remove(); 
    });

.NET跨平台

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery on() 方法

实例向元素添加 click 事件处理程序：$(document).ready(function(){$(“p”).on(“click”,function(){alert(“段落被点击了。”);});});尝试一下 »定义和用法on() 方法在被选元素及子元素上添加一个或多个事件处理程序。自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 d...
复制链接

扫一扫

专栏目录