DOM事件里那点不能不说的小事情
2018-07-27 本文已影响0人
潘千千
前言：今天才发现，原来我对DOM事件理解的如此不够深入，仅限于做点正常的页面，顿时感觉自己不是一个合格的前端程序员，现在，我就用这篇文章也算是给大家做一个小测试，看你们对DOM事件有多少的了解呢~~
关键词：DOM事件,addEventListener,onclick~~......
正文：
一、这是一个小例子：
<head>
<script>
function print(){
console.log('hi');
}
</script>
</head>
<body>
<button id=x onclick="print">A</button>
<button id=y onclick="print()">B</button>
<button id=z onclick="print.call()">C</button>
</body>
js:
x.onclick = print
y.onclick = print() //undefined
z.onclick = print.call() //undefined
现在，问题来了，ABCXYZ几种方法里面哪个会打印出hi~~
六秒钟思考，6,5,4,3,2,1
答案：BCX会打印出hi
二、这是第二个小例子：
<body>
<button id=xxx >A</button>
</body>
js:
xxx.addEventListener('click',function(){
console.log(1);
})
xxx.onclick = function (){
console.log(1);
}
请问，这两个有什么区别吗？
答案：
xxx.onclick = function (){//是属性，唯一
console.log(1);
}
一个节点只能有这样的一个onclick,试想如下情况：
xxx.onclick = function (){
console.log(1);
}
xxx.onclick = function (){
console.log(2);
}
那请问是打印出1还是2呢？答案是2.那1去哪里呢，当然是被2覆盖了。试想如果在工作中，你和你的同事出现了上述情况，，，，后续大家自行脑补。
onclick说完了，我们说下
xxx.addEventListener('click',function(){
console.log(1);
})，这个和onclick有什么区别呢？xxx.addEventListener，这是个队列，是个
事件监听队列。当你写出如下代码时
xxx.addEventListener('click',function(){
console.log(1);
})
xxx.addEventListener('click',function(){
console.log(2);
})
会先打出1，再打出2.为什么？我先问你一个问题，队列的特点是什么？答：
先进先出
xxx拥有一个队列 eventListeners ,你不能直接访问他，但是你可以通过addEventListener往这个队列里排一个队，现在，排是排进去了，但是怎么走呢？
三、这是第三个小例子：
function f1 (){
console.log('1');
}
function f2 (){
console.log('2');
}
function f3 (){
console.log('3');
}
xxx.addEventListener('click',f1})
xxx.addEventListener('click',f2})
xxx.removeEventListener('click',f1})
xxx.addEventListener('click',f3})
xxx.removeEventListener('click',f3})
答案：只打印出2
那现在有没有什么方法让addEventListener click点击一次再点击就不行了呢？
function f1 (){
console.log('1');
xxx.addEventListener('click',f1})
}
xxx.addEventListener('click',f1})
也就是触发一次事件后马上再把它从队列里移走。
