javascript / 在元素中添加单击事件并处理 + 获取被点击的对象

最新推荐文章于 2023-11-23 10:31:52 发布

Ruo_Xiao

最新推荐文章于 2023-11-23 10:31:52 发布

阅读量1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/itworld123/article/details/108998211

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="zh-CN">
    <head>
        <title>test click</title>
        <script type="text/javascript" src="test.js"></script>
    </head>
    <body>
        <center><button onclick="btnFun(this)" style="width: 80px;height: 50px;background-color: cadetblue;">hello</button></center>
    </body>
</html>

test.js

function btnFun(obj) {
    obj.style.backgroundColor = "#fdfadf";
    obj.style.width = "120px";
}

onclick 事件会在元素被点击时发生。

btnFun 中的 obj 为被点击的对象，即为调用该函数时传入的 this 指针。

（SAW：Game Over！）

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Ruo_Xiao

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

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

weixin_58443158的博客

08-07

717

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

js中onclick()获取当前点击对象的属性值

weixin_39218464的博客

05-20

1万+

HTML <a type='button' class="layui-badge margin-left-5 layui-bg-danger" target="view_window" onclick="audit_no(this)" value="{$value['id']}"> 审核订单 </a> js代码 //修改订单状态，生成审核记录 function audit_no(obj) { var a = $(obj).attr("valu

1 条评论您还未登录，请先登录后发表或查看评论

JavaScript 动态添加事件和获取Event (兼容IE和Firefox)

jianqi6的专栏

02-28

187

1、直接给对象添加事件document.all.Object.ondblclick=function(){方法}; 2、通过监听方式添加事件，多事件可并存，按添加顺序执行。if(window.addEventListener) // Mozilla, Netscape, Firefox Object.addEventListener("click", function(){方法...

js获取事件源及触发该事件的对象

Edward的web前端修炼之路

07-15

4736

如何获取事件源及触发该事件的对象，方法有很多，js中可以通过event来实现，下面有个不错的示例，感兴趣的朋友可以参考下： function myfunction(event) { event = event ? event : window.event; var obj = event.srcElement ? event.srcElement : event.target; //这时o

获取触发onclick事件的当前对象的文本或者值

滴水石穿

04-27

2258

获取触发onclick事件的当前对象的文本或者值 html代码 <ul id="house_content"> <li onclick="tianchong(this)">金泰小区</li> <li onclick="tianchong(this)">金泰华府</li> <li onclick="tianchong(this)">金泰舒格蘭</li> </ul> javascript 代码 functio

javascript获取鼠标点击元素对象(示例代码)

10-26

8. 示例代码中展示了如何在函数内部使用`document.elementFromPoint`方法来获取被点击的元素，并将该元素存储在`obj`变量中。之后，可以通过`obj.innerText`访问到元素的文本内容。 9. 在实际应用中，编写代码时...

JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法

11-27

本文主要探讨了如何使用JavaScript来实现一个功能，即为页面中所有的`<img>`标签添加`onclick`事件，并在用户点击图片时，在新窗口中打开图片进行查看。这个功能对于提升用户体验，尤其是展示大量图片的网站来说，是...

vue动态渲染svg、添加点击事件的实现

10-15

1. **直接添加点击事件**：在Vue模板中，我们可以直接使用`v-on`指令为SVG元素添加点击事件，如`v-on:click="handleClick"`。但在动态渲染SVG时，我们需要在SVG DOM加载之后添加事件监听器。 2. **注意事项**： - ...

vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作

10-14

2. 在循环内为每个元素添加点击事件监听器，传递当前项数据和事件对象给事件处理函数。 3. 通过`$event`访问原生事件对象，获取关于事件的信息。 4. 使用`v-for`的第二个参数`index`获取当前项的索引。 5. 使用`...

JS在按钮被点击时获取自身对象的方法

最新发布

m0_57005111的博客

11-23

251

6.根据name属性的值获取元素 document.getElementsByName("name属性的值");5.根据标签名字获取元素 document.getElementsByTagName("标签的名字");4.根据类样式的名字获取元素 document.getElementsByClassName("类样式的名字");3.根据id获取元素 document.getElementById("id属性的值");案例:案例:点击按钮,改变所有name属性值为name1的文本框中的value属性值。

JavaScript DOM 获取与操作元素

crush_oo的博客

05-19

194

DOM 获取与操作元素案例

js如何获取object类型里的键值

weixin_44195615的博客

11-12

2314

方法一 function printObject(res){ //obj = {"cid":"C0","ctext":"区县"}; var temp = ""; for(var i in res){ //用javascript的for/in循环遍历对象的属性 temp += i+":"+res[i]+"\n"; } alert(temp); } 方法二：eval(“obj.”+key) var key = "name1"; var value = res[key]; var key =

javascript获取点击元素对象

m0_56726855的博客

09-21

6958

获取当前鼠标点击的HTML元素对象，可用于判断点击菜单外元素是否为下拉按钮元素实现点击下拉菜单外区域关闭下拉菜单。实现代码 window.onclick = function (e) { // 获取点击元素对象 var element = document.elementFromPoint(e.clientX,e.clientY); // 获取点击元素的类名并弹窗显示 alert(element.classList); } 测试代码及效果 <...

JavaScript DOM中获取元素、事件基础、操作元素、节点操作

11-17

1824

JavaScript DOM中获取元素、事件基础、操作元素、节点操作

JS获取点击事件的内容

weixin_45313093的博客

03-04

1万+

JS获取点击事件的内容点击事件的方法获取点击事件的内容点击事件的方法 <div> <a onclick="test()">点击</a> </div> <script> function test(){ var is=event.currentTarget; console.log($(is)); //获取当前元素，类同this 返回绑定事件的元素 console.log(

JavaScript实现动态添加的元素添加点击事件

qq_18932003的博客

10-25

1万+

在页面开发过程中常常遇到需要动态添加元素，然后给这一元素绑定相关事件的情况，这种情况下一般需要给元素加上相关属性，然后写这些元素的事件函数即可。动态添加的元素怎么绑定事件呢？原生JavaScript 原生JavaScript主要有2种实现方式，第一种是在动态添加的html代码中添加oclick事件，然后传递一个唯一的参数来判断点击的是哪个，然后做相应的操作。第二种是通过事件委托的原理进行处理，事件委托将一个事件监听器实际上绑定到整个容器，然后每个列表项被点击就可以访问，这样效率更高。具体的.

js实现为新添加元素添加绑定事件

m0_64288219的博客

07-04

3200

不知道大家在写js的时候碰没碰到过这样一个问题：算了，还是直接上代码就是有时我们使用querySelectAll(‘li’)只能获取html原有的li1,li2,li3标签，如果我们此时创建一个新的小li名为newLi并把它添加到div里面,querySelectAll(‘li’）就无法选取newLi。因为 var li=document.querySelectorAll(‘li’); 把他放在第一行只能获取前三个，因为新的小li还没有创建出来。此时把 var li=document.

深入理解JavaScript对象模型与事件处理

JavaScript对象模型与事件处理是JavaScript编程中至关重要的概念，它们构成了JavaScript在Web开发中的基础。JavaScript是一种面向对象的语言，它的对象模型描述了对象间的层次关系，而事件处理则允许程序对用户在...