版权声明:大家好,我是笨笨,笨笨的笨,笨笨的笨,转载请注明出处,谢谢! https://blog.csdn.net/jx520/article/details/87968300
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<style>
.btn {
width: 400px;
height: 30px;
}
.btnStyle0
{
background: #9f4;
border: 1px solid red;
}
.btnStyle1
{
background: #f99;
border: 1px solid red;
}
.btnStyle2 {
background: #ff9;
border: 1px solid white;
}
.center {
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
</style>
<title>js 挂载事件Demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
function btnClick(e,s) {
document.getElementById('msg').innerText = e.innerText + " " + s;
}
$(document).ready(function() {
'use strict'
//原生js批量添加事件,
document.getElementById('buton0').addEventListener('click', function (e) {
document.getElementById('msg').innerText = e.currentTarget.innerText;
return false;
}, false)
//固定参
//------------------- 方案一 -------------------
//var elmts = document.getElementsByClassName('btn');
//使用 let i = 0 创建块级作用域
//target会显示 <span>我是按钮4</span> 6 , currentTarget 才正常
// for (let i = 0; i < elmts.length; i++) {
// elmts[i].addEventListener('click', function (e) {
// document.getElementById('msg').innerText = e.currentTarget.innerHTML +" "+ i;
// return false;
// }, false)
// }
//------------------- 方案二 -------------------
//如果不用let i = 0的话,就要利用匿名函数的作用域把参数传进去存住。
//外面这层是用来存参数的,里面返回的匿名函数才是给事件用的。
var elmts = document.getElementsByClassName('btnStyle2');
for (var i = 0; i < elmts.length; i++) {
elmts[i].addEventListener('click', function (i) {
return function (e) {
document.getElementById('msg').innerText = e.currentTarget.innerText +" "+ e.currentTarget.id;
};
}(i + 1), false);
}
//-------------- JQuery 批量添加事件 ---------------
//没有for传固定参数的效果。换种思路,给按钮设个ID然后执行时判断就行了。
$(".btn.btnStyle1").click(function(e) {
document.getElementById('msg').innerText = "被点击的按钮ID是: " + this.id;
});
// jquery 动态绑定事件
$("body").on('click','.dc', function(e){
document.getElementById('msg').innerText = "动态创建的对象,要动态绑定事件,body监控子对象如果新增了class为.dc的元素就给它绑定事件。按钮ID是: " + this.id;
});
$("#msg").before(`<div id="buton7" class="btn btnStyle2 center dc"> <span>动态创建的对象,要动态绑定事件</span> </div>`);
$("#msg").before(`<div id="buton8" class="btn btnStyle2 center dc"> <span>动态创建的对象,要动态绑定事件</span> </div>`);
$("#msg").before(`<div id="buton9" class="btn btnStyle2 center dc"> <span>动态创建的对象,要动态绑定事件</span> </div>`);
//----------------------------------------------------
//传参数 动态添加 onclick 属性,实现传参
$("#msg").before(`
<div id="buton10" onclick="btnClick(this,'呵呵达');" class="btn btnStyle1 center">
<span>动态添加 onclick 属性,实现传参</span>
</div>
`);
//动态添加元素,实现传参
$("#msg").before(`<div id="buton11" class="btn btnStyle2 center"> <span>动态添加元素,实现传参</span> </div>`);
$("#buton11").attr('onclick',"btnClick(this,'呵呵达');");
});
</script>
</head>
<body>
<div id="buton0" class="btn btnStyle0 center"> <span>原生Js 直接添加 点击事件</span> </div>
<div id="buton1" class="btn btnStyle2 center"> <span>匿名函数传参1</span> </div>
<div id="buton2" class="btn btnStyle2 center"> <span>匿名函数传参2</span> </div>
<div id="buton3" class="btn btnStyle2 center"> <span>匿名函数传参3</span> </div>
<div id="buton4" class="btn btnStyle1 center"> <span>JQuery 用自身ID判断 4</span> </div>
<div id="buton5" class="btn btnStyle1 center"> <span>JQuery 用自身ID判断 5</span> </div>
<div id="buton6" class="btn btnStyle1 center"> <span>JQuery 用自身ID判断 6</span> </div>
<div></div>
<div id="msg"></div>
</body>
</html>