DOM事件（一）
2018-10-20 本文已影响0人
索伯列夫
DOM文档：
https://www.w3.org/DOM/DOMTR
DOM1中的事件：
dom1中的事件
链接：https://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/level-one-html.html
DOM level2：
添加了很多events
image.png
看看～链接：https://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html
DOM level3：
没有添加events
image.png
例１：在DOM level0 区分下这几种区别
请问在下边A B C三项中，点击谁会打印hi
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<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>
</html>
答案：点击B C会执行
onclick = '要执行的代码'
一旦用户点击，浏览器就 eval(‘要执行的代码’)
运行分析：
eval(): https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/eval
function print(){console.log(1)}
eval('print') //ƒ print(){console.log(1)}
eval('print()') //1
eval('print.call()') //1
在上述代码中，我们若用js执行：
x.onclick = print //类型为函数对象
x.onclick = print() //undefined
x.onclick = print.call() //undefined
//一旦用户点击
x.onclick.call(x,{})
例２：在DOM level2中
<button id="xxx">xxx</button>
//队列
//xxx有一个队列EventListener
xxx.addEventListener('click',f1)
xxx.addEventListener('click',f2)
xxx.removeEventListener('click',f1)
xxx.addEventListener('click',f3)
//属性，是唯一的，要是有俩就覆盖了
xxx.onclick = function(){
console.log(100)
}
function f1(){
console.log(1)
}
function f2(){
console.log(2)
}
function f3(){
console.log(3)
}
事件模型：
先捕获，再冒泡。但是如果触发到本身身上（就是在自己身上），就是按照顺序。
注意看注释
<div id="grand1">
爷爷
<div id="parent1">
父亲
<div id="child1">
儿子
</div>
</div>
</div>
grand1.addEventListener('click',function(){
console.log('爷爷')
})//1
parent1.addEventListener('click',function(){
console.log('父亲')
})//2
child1.addEventListener('click',function(){
console.log('儿子')
})//3
//谁先执行，３ ２ １还是１ ２ ３
//取决于参数
//addEventListener的第三个参数是false，就从小到大执行，若为true则为从大到小执行
事件模型.png
但是如果触发到本身身上（就是在自己身上），就是按照顺序。这俩前后顺序，就是，谁先写，就是谁。
child1.addEventListener('click',function(){
console.log('冒泡儿子')
})//3
child1.addEventListener('click',function(){
console.log('捕获儿子')
},true)//3
