JQuery中on,函数详解

JQuery API中定义的on方法,专业名词很多,读起来并不是那么容易,而对于开发人员知道函数怎么使用就可以了。本文将JQuery的说明翻译如下:

on(events,[selector],[data],fn)

events:事件名,必写参数

[selector]:子元素选择器名,选填参数

[data]:事件触发时,传入函数的参数,可通过event.data对象获取,选填参数

fn:事件触发时所执行的动作,必写参数

示例:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="../../jquery-3.1.0.js"></script>

<script type="text/javascript">

$(function(){

$("#fatherDiv").on("click","#sonBtn",{id:1,name:"john"},function(event){

var name = event.data.name;

console.log("name == " + name);

});

});

</script>

</head>

<body>

<div id ="fatherDiv" >

<button >按钮</button>

</div>

</body>

</html>

点击div中的button按钮会触发click事件,在事件函数中通过event.data.key获取对象中key的对应value值。