<!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>
函数10（箭头函数与dom操作结合）
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 这篇文章我们来了解一下ES6中的箭头函数。首先会介绍一下箭头函数的基本语法，因为基本语法比较好理解，我们用示例做简...
- 这里补充一个我遇到的坑：在循环中使用time.sleep()使循环阻塞一段时间 预期结果是每间隔1秒输出一个数字但...
