极客教程jQuery on()方法
jQuery on()是一个内置的方法，用于附加一个或多个事件处理程序给DOM树中的选定元素和子元素。DOM（文档对象模型）是一个万维网联盟的标准。这个方法定义了访问DOM树中的元素。
语法:
$(selector).on(event, childSelector, data, function)
参数：它接受一些参数，具体如下–**。
- event。这指定了附属于所选元素的事件。
- childSelector。这是可选的，这指定了给定的事件处理程序可以使用的具体孩子。
- data:这是可选的，这指定了要与函数一起传递的额外数据。
- function。这指定了事件发生时要运行的函数。
返回值：这将返回所有连接到选定元素的事件处理程序。
例子1：在下面的代码中，没有传递子指定器和数据。
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
/* jQuery code to show on method */
(document).ready(function () {
("p").on("click", function () {
document.getElementById("p1").innerHTML
= "Paragraph changed!";
});
});
</script>
<style>
#p1 {
font-size: 30px;
width: 400px;
padding: 20px;
border: 2px solid green;
}
</style>
</head>
<body>
<!--click on this paragraph -->
<p id="p1">Click Here !!!</p>
</body>
</html>
输出:
例子2：在下面的代码中，数据和信息都被传递给了函数。
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
/* jQuery code to show on method */
function handlerName(event) {
var t = event.data.msg;
document.getElementById("p1").innerHTML = t;
}
(document).ready(function () {
("p").on("click", {
msg: "You just clicked the given paragraph !"
}, handlerName)
});
</script>
<style>
#p1 {
font-size: 30px;
width: 470px;
padding: 20px;
border: 2px solid green;
}
</style>
</head>
<body>
<!--click on this paragraph -->
<p id="p1">Click Me!</p>
</body>
</html>
输出:
