DOM事件模型
1.历史
image.png
2.DOM level2 标准
DOM level3没有对事件进行修订,所以DOM事件模型的标准就是DOM level2 制定的标准
规定了
事件捕获event capture
事件冒泡event bubbling
事件取消event cancelation
3.DOM level 0和1知识点
在html的onclick属性中,使用时要加括号,
在js的onclick中,给点击事件赋值,不加括号.
问题1
<!--下面那个按钮被点击后会在控制台上打印出"hi"?-->
<button id="X" onclick="print">1</button>
<button id="Y" onclick="print()">2</button>
<button id="Z" onclick="print.call()">3</button>
答案：button2和3能够打印出来。在HTML中，属性onclick="要执行的代码".一旦用户点击，浏览器就会 eval("要执行的代码"),对于button1来说，相当于eval("print") ,即：相当于在控制台上输入print,它返回的值自然是一个函数 。而对于 button2以及button3来说，eval的字符串则是函数的执行语句。所以第二个button以及 第三个button会在控制台上成功执行函数print,并且打印出"hi"。
image.png
问题2
<body>
<button id="X">1</button>
<button id="Y">2</button>
<button id="Z">3</button>
<script>
function print() {
console.log('hi');
}
// 当点击哪一个按钮时,会在控制台上打印出"hi"
X.onclick = print;
Y.onclick = print();
Z.onclick = print.call();
</script>
答案：当按钮1被点击后，会在控制台上打印出"hi"; 只要搞清楚print,print()以及print.call()返回的类型就可以 print是一个函数，让X的onclick属性指向这个函数，所以点击按钮1 自然会执行函数print,所以按钮1被点击之后，会在控制台上打印出hi。而对于按钮 2和3他们本质就是函数的执行后的返回值 print函数的返回值为undefined,所以 Y.onclick = print();或者是Y.onclick = print.call();都是让按钮的onclick属性指向了 undefined。
在JS里面
image.png
在js里,print 为一个函数,返回类型也为函数,赋值的时候,就是把函数这个类型赋给onclick,而print()返回类型为undefined.
4.DOM level 2知识点
4.1在L1中,事件属性
image.png
在DOM level1中,onclick只是一个属性,可以被覆盖,所以一个元素只能有一个onclick时事件
image.png
4.2在L2中,事件监听队列
事件监听队列,xxx拥有一个队列,是eventListeners事件监听队列,先添加的先触发
image.png
先进先出,先绑定的先触发,可以绑定多个相同的事件
每一个事件都有一个自己的队列,click有click的队列mouseenter有他自己的队列
image.png
也可以移出队列
也可以只触发一次
image.png
相当于jQuery中的one
总结:
image.png
4.3DOM level 2中的两个阶段
问：当点击"儿子"区域时，会在控制台打出什么样的结果呢？
image.png
image.png
4.4 触发顺序总结:捕获与冒泡阶段
image.png
答：首先，值得肯定的是，点击后，无论是"爸爸",还是"爷爷"都会触发"onclick"事件，只是执行的顺序应该是怎么样的呢？最先IE认为，执行的顺序应该是"爷爷"->''爸爸''->''儿子"，这种执行顺序被称作event capturing 。而Microsoft则不这样认为，他们认为先被点击的块具有执行优先权，所以触发事件的顺序应该是："儿子"->''爸爸''->''爷爷''，这种执行的顺序则被称为：event bubbling。所以W3C为此做了标准，于是乎，W3C标准采取了所谓的"两全其美"的方案。事件模型中发生的任何事件，先从祖先元素一路向下开始捕获，直到达到目标元素，达到目标元素后开始冒泡，W3C事件模型如下：
image.png
执行顺序就是先从左,往下,再从底,往右上,如果不写第三个参数或者第三个参数为false,那么函数就只在右边,执行顺序就是fn3,fn2,fn1.
如果把参数改为true,那么函数会跑到左边,执行顺序发生改变
如果想让执行的顺序是event bubbling只需要：在DOM level2的event写法后添加一个 true即可：
son.addEventListener('click',function () {
console.log('son')
},true)
father.addEventListener('click',function () {
console.log('father')
},true)
grandfather.addEventListener('click',function () {
console.log('grandfather')
},true)
当在事件最后加上个true后，在控制台打印的顺序为："爷爷"->''爸爸''->''儿子"。当事件最后不写，或值为falsy时(0,'',null,undefined,NaN)时，则执行的顺序为事件冒泡顺序：
son.addEventListener('click',function () {
console.log('son')
},false)
father.addEventListener('click',function () {
console.log('father')
},false)
grandfather.addEventListener('click',function () {
console.log('grandfather')
},false)
在控制台打印的顺序为："儿子"->''爸爸''->''爷爷"。
所以分为两个阶段
- 从上到下,捕获阶段
- 从下到上,冒泡阶段
事件模型就是先捕获,再冒泡.
执行顺序就是先捕获再冒泡,看他在不活的路上还是冒泡的路上
image.png
4.5考点,如果一个元素同时有捕获和冒泡,即第三个参数有事false,又是true
特例:
如果这个元素是最底层的元素(是嵌套的里面嘴内部的元素),那么不管是捕获还是冒泡,先写的先执行.如图:
image.png
网友评论