DOM事件模型
2018-05-29 本文已影响10人
朱珠霞
1. **目前的DOM事件模型标准是Document Object Model Level
2. DOM level 1中一道题
/**html代码**/
<body>
<script>
function print(){
console.log('hi')
}
</script>
<button id=X onclick = "print">A</button>
<button id=Y onclick = "print()">B</button>
<button id=Z onclick = "print.call()">C</button>
/**javascript**/
<script>
X.onclick = print
Y.onclick = print()
Z.onclick = print.call()
/**哪个会正确运行?
*答案是B、C、X
*print // 类型为函数对象
*print()//undefined （默认return值为undefined）
*print.call()//undefined
*在css中，onclick = "要执行的代码"
*一旦用户点击，浏览器就eval("要执行的代码")
*eval("print")
*在javaScript中，
*一旦用户点击，那么浏览器会执行 X.onclick.call(x,{})
**/
</script>
</body>
3. DOM level2
xxx.addEventListener(event,function(){ },trueOrFalse)
//优点：level 1里, xxx.onclick()事件是唯一的一个属性，
//在level2 里，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
//因为xxx会得到一个队列：eventListener，
//通过入栈与出栈，最终只剩下一个有f2函数的click事件
- 捕获与冒泡
一般不传第三个参数，则优先显示冒泡。
/**html**/
<body>
<div id=grandpa>
<div id=parent>
<div id=child>儿子</div>
</div>
</div>
</body>
① 冒泡阶段（从下到上）
function f1(){
console.log(1)
}
function f2(){
console.log(2)
}
function f3(){
console.log(3)
}
grandpa.addEventListener('click',f1)
parent.addEventListener('click',f2)
child.addEventListener('click',f3)
//五个flasy值：undefined, Null, '', 0, NaN
//如果第三个参数是falsy值，则结果是 321
②捕获阶段（从上到下），第三个参数可转化为true，则显示捕获
function f1(){
console.log(1)
}
function f2(){
console.log(2)
}
function f3(){
console.log(3)
}
grandpa.addEventListener('click',f1)
parent.addEventListener('click',f2)
child.addEventListener('click',f3)
//如果第三个参数值为true，则结果是 1 2 3
③ 一般事件模型是先捕获再冒泡
//还是上面那个html例子
grandpa.addEventListener('click',f1,false)
parent.addEventListener('click',f2,true)
child.addEventListener('click',f3,false)
//最后得到的结果是2 3 1，
//因为事件模型是先捕获再冒泡，
//爸爸的click事件最先被触发，然后再到儿子，再到爷爷
④ 注意，同一个元素的事件不受捕获与冒泡阶段影响。也就是同一个元素同时加入event事件，则触发时间按代码出现决定。
child.addEventListener('click',f3)
child.addEventListener('click',f2)
//得到的结果是3 2
