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
网友评论