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

    好记性不如烂笔头,看到自己觉得应该记录的知识点,结合自己的理解进行记录,用于以后回顾。
  • 相关阅读:
    常见的位运算技巧总结(膜wys)
    BZOJ1878:[SDOI2009]HH的项链
    BZOJ4300:绝世好题
    BZOJ1298:[SCOI2009]骰子的学问
    BZOJ2748:[HAOI2012]音量调节
    BZOJ1951:[SDOI2010]古代猪文
    BZOJ1002:[FJOI2007]轮状病毒
    BZOJ1081:[SCOI2005]超级格雷码
    BZOJ2595:[WC2008]游览计划
    BZOJ1190:[HNOI2007]梦幻岛宝石
  • 原文地址:https://www.cnblogs.com/wangxi01/p/11590099.html
Copyright © 2011-2022 走看看