HTML 标签中onclick事件中的this

教程分享 > Java教程 > 博文分享 (1805) 2023-03-28 11:29:14

HTML 标签中onclick事件中的this并非当前元素。而是window。需要获取当前的元素怎么办呢?以下开始讲解。

首先要标签这是这样的

<a href="#" onclick="on()">

<script>
function on(){
console.log(this);//
}
</script>
大家猜猜上方的this是<a>标签么?
--答案肯定不是的。
这里的this获取到的是window对象

如何才难通过元素的onclick事件绑定获取元素本身呢?

<a href="#" onclick="on(this)">

<script>
function on(obj){
console.log(obj);//
}
</script>
通过传递参数来获取。

原理

this关键字指定的永远是它的拥有者。onclick事件实际是window在操作,所以onclick的事件其实拥有者是window

相关文章
HTML 标签中onclick事件中的this并非当前元素。而是window。需要获取当前的元素怎么办呢?以下开始讲解。
javascript(js)onclick 传递多个字符变量参数&lt;a title="点击下载附件" onclick="downloadFile(\''+row.url+'\',\''+ro...
前端状态数据展示小技巧
javascript中onclick事件传递对象参数,javascript,javascript传递对象参数
这里主要讲解下在前端开发中常用的调试日志对象console。console对象对目前国内流行的浏览器如:IE/谷歌/火狐的支持情况说明
问题描述:Cannot open URL. Please check this URL is correct: http://localhost:8080/解决办法​检查上方两个地方得端口是否一致
企业软件_企业软件定制开发框架选择以及分类
本文主要翻译spring官方的基于spring security框架的oauth2开发指南,spring,oauth2,spring框架,Java编程
前言Webpack 和 Vite 都是前端工程化工具。Webpack 作为老大哥,在前端社区也算站稳了脚跟,它提供了许多配置和插件,让开发者定制化构建项目。随着
场景在使用 SpringBoot + Vue 进行前后端分离的开发过程中,部分功能是需要当用户登陆成功时后端(SpringBoot)向前端(Vue)返回一个to
什么是webpackWebpack是前端工程化工具。Webpack 作为老大哥,在前端社区也算站稳了脚跟,它提供了许多配置和插件,让开发者定制化构建项目。
Spring Boot 2.0 - 开发者工具devtools热部署教程(自动重载),如果你曾经在最新的UI开发框架上工作过,比如Node,angular,gulp等等,那么当你在某些代码发生变...
spring boot 开发技巧,在开发web项目中跳过thyemeleaf模板/js/css等缓存避免每次修改资源文件都需要重启服务器
Java编程中如何避免NullPointerException(空指针异常)
JDK11 90+ 新特性新功能(第二部分:非开发人员功能)