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

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