函数10（箭头函数与dom操作结合）
2020-04-26 本文已影响0人
小雪洁
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>箭头函数与dom操作结合</title>
</head>
<body>
<button id="bt1">haoxuejie</button>
<button id="bt2">yangdingchuan</button>
<button id="bt3">yh</button>
<button class="btn">郝雪洁</button>
<button class="btn">杨定川</button>
<button class="btn">确定</button>
</body>
<script>
let obj={
truename:"郝雪洁",
handleEvent:function(e){
alert(`${e.target.innerHTML}-${this.truename}`);
},
bind:function(){
//获取dom对象，给dom对象添加点击事件
const bt1=document.getElementById("bt1");
const bt2=document.getElementById("bt2");
const bt3=document.getElementById("bt3");
const btns=document.getElementsByClassName("btn");
const _this=this;
//提供两种方法写绑定的点击事件，
//方法一、建议如果点击事件函数里需要大量操作dom对象使用function关键字的比较方便
bt1.addEventListener("click",function(e){
console.log(this);//这个this指的是button元素
console.log(e.target);//指的也是button元素
//如果想用对象obj里的属性，这时this就取不到了要在外面存一下this
alert(`${this.innerHTML}-${_this.truename}`);
});
//方法二、使用箭头函数就可以使函数的this指向与外部一致，不用再存this了，
//但是注意此时的this就不指向点击元素了，需要用e.target获取点击元素
//建议如果点击事件函数里需要大量使用对象属性的的使用箭头函数比较方便
bt2.addEventListener('click',(e)=>{
alert(`${e.target.innerHTML}-${this.truename}`);
});
//方法三、在对象里定义一个方法，该方法是点击出发啊以后执行的操作，
//绑定点击事件时，直接传这个方法，直接传this也可以触发这个方法？
bt3.addEventListener('click',this);
//给多个按钮添加点击事件，要用到遍历
//console.log(btns);
//注意多层函数使用箭头函数的this指向问题
/* [...btns].forEach(function(btn){
//对象的方法里又使用function关键字定义函数，函数内的this指向window对象
console.log(this);
btn.addEventListener('click',(e)=>{
//使用了箭头函数，与上一层的this指向一样，同样指向window对象
console.log(this);
console.log(e);
})
}); */
[...btns].forEach((btn)=>{
//使用了箭头函数，this与外层指向一致，指向obj对象，因为该函数是对象方法内部的函数
console.log(this);
btn.addEventListener('click',(e)=>{
//使用了箭头函数，与上一层的this指向一样，同样指向obj对象
console.log(this);
console.log(e);
})
});
}
};
obj.bind();
</script>
</html>
