Dado un documento HTML y se dispara algún evento, la tarea es obtener la clase del elemento que ha disparado el evento. Aquí hay 2 enfoques discutidos.
Enfoque 1:
- En este artículo solo usamos el evento de clic, sin embargo, el enfoque se puede aplicar a cualquier evento.
- El evento onCLick() se usa en este enfoque.
- Este método this.getAttribute(‘class’) devuelve la clase del elemento en el que ocurrió el evento. Cuando el usuario hace clic en cualquier elemento, este evento de clic se activa y detectamos la clase de elemento.
- Use onCLick = function(this.getAttribute(‘class’)) para obtener el nombre de clase del elemento en particular.
Ejemplo: Este ejemplo implementa el enfoque anterior.
<!DOCTYPE html>
<html>
<head>
<title>
Getting the class of the element that
fired an event using JavaScript.
</title>
<style>
#div {
background: green;
height: 100px;
width: 200px;
margin: 0 auto;
color: white;
}
#gfg {
color: green;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body style="text-align: center;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<p>
Click on the DIV box or button to get Class of
the element that fired click event.
</p>
<div class="DIV" id="div"
onClick="GFG_click(this.getAttribute('class'));">
This is Div box.
</div>
<br />
<button class="button" id="button"
onClick="GFG_click(this.getAttribute('class'));">
Button
</button>
<p id="gfg"></p>
<script>
var el_down = document.getElementById("gfg");
function GFG_click(className) {
// This function is called, when the
// click event occurs on any element.
// get the classname of element.
el_down.innerHTML = "Class = " + className;
}
</script>
</body>
</html>
Producción:
Enfoque 2:
- El evento onCLick() se usa en este enfoque.
- Este método $(this).attr(‘class’) devuelve la clase del elemento en el que ocurrió el evento. Cualquiera que sea el elemento que haya disparado el evento, podemos detectar su clase.
- Use onCLick = function($(this).attr(‘class’)) para obtener el nombre de clase del elemento que ha activado el evento.
Ejemplo: Este ejemplo implementa el enfoque anterior.
<!DOCTYPE html>
<html>
<head>
<title>
Getting the class of the element that
fired an event using JavaScript.
</title>
<style>
#div {
background: green;
height: 100px;
width: 200px;
margin: 0 auto;
color: white;
}
#gfg {
color: green;
font-size: 20px;
font-weight: bold;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</head>
<body style="text-align: center;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<p>
Click on the DIV box or button to get
Class of the element that fired click event.
</p>
<div class="DIV" id="div"
onClick="GFG_click($(this).attr('class'));">
This is Div box.
</div>
<br />
<button class="button" id="button"
onClick="GFG_click($(this).attr('class'));">
Button
</button>
<p id="gfg"></p>
<script>
var el_down = document.getElementById("gfg");
function GFG_click(className) {
// This function is called, when the
// Click event occurs on any element.
// Get the class Name.
el_down.innerHTML = "Class = " + className;
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA