原生javascript封装事件监听函数
javascript中有很多函数和方法是已经封装好了的，用户只需要拿到直接使用，大大简化 了代码，用户体验更方便，但是如果学过原生javascript的都知道，这些方法都可以自己封装出来，封装函数能够了解底层js的实现，对javascript有更深的认识，今天我自己尝试封装了时间监听函数 ------addEventListener和rmoveEventListener.
首先介绍一下addEventListener和rmoveListener的实现，上代码
<style>
.box1{
width:100px;
height:100px;
background-color: blueviolet;
}
.box2{
width:100px;
height: 100px;
background-color: chocolate;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>这时候页面会出现上下两个盒子，我们给他绑定监听函数
function foo1(){
console.log(1)
}
function foo2(){
console.log(2)
}
box1.addEventListener("click",foo1)
box1.addEventListener("click",foo2)
//给box1绑定了两个点击事件，只要点击盒子box1就会触发两个事件函数，输出1 2
box1.removeEventListener("click",foo1)
//把box1其中添加foo1的绑定函数取消，这时候点击盒子就只输出2这是我们能直接用的监听函数，下面我在原型上封装两名字不一样，但是功能一样的函数，看完这个，相信大家就能对addEventListener和rmoveListener有一定的了解了
HTMLElement.prototype.myaddEventListener =function(type,handleFunction){
this.eventObject = this.eventObject|| {}
type = type.toLowerCase()
this.eventObject[type] = this.eventObject[type] || []
if(this.eventObject[type].includes(handleFunction)) return //有相同名的函数就不执行
this.eventObject[type].push(handleFunction)
this["on"+type] = e =>{
this.eventObject[type].forEach(fn => (fn(e)));
}
}
HTMLElement.prototype.myRemoveEventListener = function(type,handleFunction){
if(this.eventObject[type].includes(handleFunction)){
this.eventObject[type] = this.eventObject[type].filter(item =>item!=handleFunction)
this["on"+type] = e => {
this.eventObject[type].forEach(fn => fn(e))
}
}
}试着自己封装底层函数能够对原生javascript有更深刻的认识，以后使用框架也会很容易上手。
相关推荐
nmgxzm00 2020-11-10
ifconfig 2020-10-14
hhanbj 2020-11-17
zfszhangyuan 2020-11-16
古叶峰 2020-11-16
一个智障 2020-11-15
jipengx 2020-11-12
81427005 2020-11-11
xixixi 2020-11-11
游走的豚鼠君 2020-11-10
苗疆三刀的随手记 2020-11-10
Web卓不凡 2020-11-03
小飞侠V 2020-11-02
帕尼尼 2020-10-30
爱读书的旅行者 2020-10-26
帕尼尼 2020-10-23
杏仁技术站 2020-10-23
淼寒儿 2020-10-22