前端-常用点击事件获取元素的方式及onclick如何获取点击事件所在的元素

weixin_58443158

已于 2024-08-08 16:48:36 修改

阅读量285

点赞数 10

文章标签：前端 javascript 开发语言

于 2024-08-07 12:01:00 首次发布

本文链接：https://blog.csdn.net/weixin_58443158/article/details/140985649

版权

一、JavaScript获取元素的方式

在JavaScript中，常用的获取元素的方式有以下几种：

根据id获取元素

var element = document.getElementById('elementId');

根据类名获取元素

var elements = document.getElementsByClassName('className');

根据标签名获取元素

var elements = document.getElementsByTagName('tagName');

根据name属性名获取元素

var elements= document.getElementsByName('name');

通过querySelector获取

通过querySelector()获取(选择器 只获取第一个)：
var elements= document.querySelector("tagName");


 通过CSS选择器获取单个元素：
var element = document.querySelector('.className');

通过querySelectorAll获取

通过queryselectorAll()获取(选择器 获取所有)：
var elements= document.querySelectorAll("tagName");


通过CSS选择器获取元素集合：
var elements = document.querySelectorAll('.className');


通过HTML5新属性获取元素集合（如data-*）：
var elements = document.querySelectorAll('[data-custom]');

父找子，子找父


通过父元素直接获取子元素：
var child = parentElement.firstElementChild; // 第一个子元素
var child = parentElement.lastElementChild; // 最后一个子元素
var children = parentElement.children; // 所有子元素


通过子元素获取父元素：
var parent = element.parentElement;



通过Document获取body和html元素：
var body = document.body;
var html = document.documentElement;

二、Jquery获取元素的方式

根据id获取元素


$('#elementId')

根据类名获取元素

$('.className')

根据标签名获取元素


$('tagName')

根据name属性名获取元素

$('input[name="someName"]')

获取所有元素：

$('*')

获取直接子元素：

$('parent > child')

获取后代元素：


$('ancestor descendant')

获取相邻兄弟元素：

$('prev + next')

获取后面的所有兄弟元素：

$('prev ~ siblings')

三、onclick如何获取点击事件所在的元素

在JavaScript中，可以通过给元素添加onclick事件处理器来获取触发事件的元素。事件处理器会被传入一个事件对象（event），该对象包含关于事件的所有信息，包括触发事件的元素。

事件的三要素

1、事件源：被触发的元素
2、事件类型:事件触发的方式：鼠标事件 、键盘事件 、浏览器事件
3、事件的处理程序：事件触发后要执行的代码（函数）
事件公式：事件源.事件类型 = 事件的处理程序

详看示例代码，如何在onclick事件处理函数中获取事件所在的元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function manualClick(event){
            var element =event.target;
            console.log("element",element);
            alert("你点击了: " + element.id);

        }
    </script>
</head>
<body>
   
    <button id="button" onclick=manualClick(event) style="width: 80px; height: 20px;color: red;">点击一下</button>
</body>
</html>

当按钮被点击时，会触发handleClick函数，并且通过event.target获取到是哪个元素触发了事件

event.currentTarget返回绑定事件的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function manualClick(event){
            var element =event.target;
            console.log("element",element);
            alert("你点击了: " + element.id);
            console.log(event.target);
            console.log(event.target.nodeName ); //获取事件触发元素标签name 
            console.log(event.target.className);  //获取事件触发元素classname
            console.log(event.target.innerHTML); //获取事件触发元素的内容
            console.log(event.target.id);//获取事件触发元素id
            console.log(event.currentTarget.nodeName); //获取事件绑定元素标签name 
            console.log(event.currentTarget.className); //获取事件绑定元素classname
            console.log(event.currentTarget.innerHTML); //获取事件绑定元素的内容
            console.log(event.currentTarget.id);//获取事件绑定元素id

        }
</script>
                            
</head>
<body>
   
    <button id="button" onclick=manualClick(event) style="width: 80px; height: 20px;color: red;">点击一下</button>
</body>
</html>

weixin_58443158

关注

10
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
前端-常用点击事件获取元素的方式及onclick如何获取点击事件所在的元素

事件处理器来获取触发事件的元素。事件处理器会被传入一个事件对象（），该对象包含关于事件的所有信息，包括触发事件的元素。3、事件的处理程序：事件触发后要执行的代码（函数）事件公式：事件源.事件类型 = 事件的处理程序。在JavaScript中，可以通过给元素添加。获取到是哪个元素触发了事件。1、事件源：被触发的元素。当按钮被点击时，会触发。详看示例代码，如何在。
复制链接

扫一扫