DOM

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 这样的事件，虽然有事件冒泡，但是只能不断通过位置去计算定位，对性能消耗高，不适合事件委托

posted @ 2019-09-26 12:01  来亦何哀  阅读(183)  评论(0)  编辑  收藏  举报