用js绑定onclick事件中的this
案例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
color: #0000cc;
font-size: 20px;
}
</style>
</head>
<body>
<div>
<div onclick="func()" name="book1">hello 1</div>
</div>
<script> //onclick 绑定的函数 传参数 关键字this
function func() {
console.log(this); // 点击后直接获取本点击对象
}
</script>
</body>
</html>
案例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
color: #0000cc;
font-size: 20px;
}
</style>
</head>
<body>
<div>
<div onclick="func(this)" name="book1">hello 1</div>
</div>
<script> //onclick 绑定的函数 传参数 关键字this
function func(obj) {
console.log(obj); // 点击后直接获取本点击对象
console.log(obj.getAttribute("name"));
console.log(obj.innerHTML);
}
</script>
</body>
</html>
使用JQuery案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
color: #0000cc;
font-size: 20px;
}
</style>
</head>
<body>
<div>
<div onclick="func(this)" name="book1">hello 1</div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script> //onclick 绑定的函数 传参数 关键字this
function func(obj) {
console.log($(this));
console.log($(obj)); // 点击后直接获取本点击对象
console.log(obj);
console.log($(obj).attr("name"));
console.log($(obj).html());
}
</script>
</body>
</html>
通过上面案例对比可以发现，要想获取onclick所在的标签内容，必须加入参数，而且实参为this，形参为非关键字就行了
上一篇：
IDEA上Java项目控制台中文乱码