1.DOM的事件模型是什么?
DOM之事件模型分脚本模型、内联模型(同类一个,后者覆盖)、动态绑定(同类多个)
<body> <!--行内绑定:脚本模型--> <button onclick="javascrpt:alert('Hello')">Hello1</button> <!--内联模型--> <button onclick="showHello()">Hello2</button> <!--动态绑定--> <button id="btn3">Hello3</button> </body> <script> /*DOM0:同一个元素,同类事件只能添加一个,如果添加多个, * 后面添加的会覆盖之前添加的*/ function shoeHello() { alert("Hello"); } var btn3 = document.getElementById("btn3"); btn3.onclick = function() { alert("Hello"); } /*DOM2:可以给同一个元素添加多个同类事件*/ btn3.addEventListener("click", function() { alert("hello1"); }); btn3.addEventListener("click", function() { alert("hello2"); }) if (btn3.attachEvent) { /*IE*/ btn3.attachEvent("onclick", function() { alert("IE Hello1"); }) } else { /*W3C*/ btn3.addEventListener("click", function() { alert("W3C Hello"); }) } </script>
2.DOM的事件流是什么?
事件就是文档或浏览器窗口中发生的一些特定的交互瞬间,而事件流(又叫事件传播)描述的是从页面中接收事件的顺序。
事件冒泡
事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点。
事件捕获
事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前就捕获它。
事件流
事件流又称为事件传播,DOM2级事件规定的事件流包括三个阶段:事件捕获阶段(capture phase)、处于目标阶段(target phase)和事件冒泡阶段(bubbling phase)。
什么是事件委托
事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.
<ul id="parent">
<li class="child">one</li>
<li class="child">two</li>
<li class="child">three</li>
...
</ul>
<script type="text/javascript"> //父元素 var dom = document.getElementById('parent'); //父元素绑定事件,代理子元素的点击事件 dom.onclick = function(event) { var event = event || window.event; var curTarget = event.target || event.srcElement; if (curTarget.tagName.toLowerCase() == 'li') { //事件处理 } } </script>
优点:
节省内存占用,减少事件注册
新增子对象时无需再次对其绑定事件,适合动态添加元素
局限性:
focus、blur 之类的事件本身没有事件冒泡机制,所以无法委托
mousemove、mouseout 这样的事件,虽然有事件冒泡,但是只能不断通过位置去计算定位,对性能消耗高,不适合事件委托