<style>
.div1{
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class="div1"></div>
<script>
var obj={
a:1,
init:function(){
// console.log(this.a)
var div1=document.querySelector(".div1");
div1.ab=this;//将div1变成一个对象，里面存放{ab:obj}//TODO
div1.addEventListener("click",this.clickHandler);//this指向obj
},
clickHandler:function(e){
// console.log(e);
this.removeEventListener("click",this.ab.clickHandler);//这时候指向div1----ab---obj.clickHandler即可删除
//this指向div1,谁侦听指向谁，div1里面没有clickHandler,报错
// console.log(this.a)
}
}
obj.init();
</script>将对象存储进DOM元素，使元素有这个侦听函数
on事件和addEventListener事件的区别
1、on是系统自带事件，不能自定义; addEventListener可以定义任意名
2、on只能赋值一个函数，赋值多个会被覆盖；addEventListener可以多次使用调用
3、on是匿名函数，不能复用，不能抽象出来
4、on删除事件 事件=null；addEventListener通过removeEventListener删除
5、on可以在标签上使用但不能传参，- -如下；addEventListener有且只有一个参数
<div class="div1" onclick="clickHandler()"></div>
<script>
function clickHandler(e){
console.log(e)
}
</script>那么不传参我如何获取到clickHandler内的参数呢？
-------> 加上e = e || window.event
假如e没初始化，结果就为window.event，否则还是原来的e，利用|| 的短路行为来给e初始化
<div class="div1" onclick="clickHandler()"></div>
<script>
function clickHandler(e){
e=e||window.event;//没有e会用window.event
console.log(e)
}
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
