jQuery on() 方法

实例

<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(); 
    });
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值