on () es un método incorporado en jQuery que se usa para adjuntar uno o más controladores de eventos para los elementos seleccionados y los elementos secundarios en el árbol DOM. El DOM (Document Object Model) es un estándar del World Wide Web Consortium. Esto define para acceder a elementos en el árbol DOM.
Sintaxis:
$(selector).on(event, childSelector, data, function)
Parámetro: Acepta algunos parámetros que se especifican a continuación:
- evento: Esto especifica los eventos que se adjuntan al elemento seleccionado.
- childSelector: esto es opcional y especifica el elemento secundario específico para el que se puede usar el controlador de eventos dado.
- datos: esto es opcional y especifica datos adicionales que se pasarán junto con la función.
- función: Esto especifica la función que se ejecutará cuando ocurra el evento.
Valor devuelto: Esto devuelve todos los controladores de eventos que están adjuntos al elemento seleccionado.
Código jQuery para mostrar el funcionamiento del método on():
Código n.º 1:
en el código siguiente, el especificador secundario y los datos no se pasan.
<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>
Salida:
Antes de hacer clic en la salida generada- 
Después de hacer clic en la salida generada-
Código n.º 2:
en el siguiente código, los datos y el mensaje se pasan a la función.
<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>
Salida:
antes de hacer clic en la salida generada, 
después de hacer clic en la salida generada,
Publicación traducida automáticamente
Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA