DOM事件模型

html中的事件写法与DOM的区别

html里写事件函数要写调用的：

<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>

上面的代码B和C是正确的.
原因: 一旦用户点击，浏览器就执行
eval(“要执行的代码”)
而A就变成了 eval(“print”)就直接得到的是print函数，而不是执行函数

DOM leave 0中的事件写法

X.onclick = print; //类型为函数对象
一旦用户点击，那么浏览器就直接帮你调用这个函数

x.onclick.call(x,{})

问题: x.onclick = function(){}
只能给元素绑定一个onclick事件
因为事件是赋值操作所以同一个对象的相同事件函数，先写的会被后面覆盖掉：

x.onclick = function(){
  console.log(‘1’)
}
x.onclick = function(){
  console.log(‘2’)
}

上面的代码1不会被打印出来，因为被后面的2给覆盖掉了.

DOM leave 2 中的事件写法

x.addEventListener('click', function() {})
可以给添加多个click事件,每添加一个, 都会进入队列里, 然后依次执行, 可以用xxx.removeEventListener('click', function() {}) 取消click队列, 每种事件有各自不同的队列

function foo() {
  console,log(1)
x.removeEventListener('click', foo)
}
x.addEventListener('click', foo)

我们设置一次事件监听,点击一次元素后, 这个监听事件就被取消了.

---

事件捕获， 事件冒泡

<div id="first">
       first
  <div id="second">
       second
    <div id="third">third</div>
  </div>
</div>

当点击一个元素触发事件时.

1. 事件从元素的最外层父元素一层一层进入到触发的元素,
   2.从触发元素一层一层返回到最外层父元素,

从最外层一层一层进入的阶段叫事件捕获阶段, 从最里层一层一层往外的阶段叫事件冒泡,

点开浮层、关闭浮层的题目

1.点击按钮弹出浮层
2.点击别处关闭浮层
3.点击浮层时，浮层不得关闭
4.再次点击按钮，浮层消失

https://jsbin.com/bayofosova/edit?html,css,js,output