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

    好记性不如烂笔头,看到自己觉得应该记录的知识点,结合自己的理解进行记录,用于以后回顾。
  • 相关阅读:
    IOS UI NavigationController结构
    IOS UI 自定义navigationBar布局
    IOS UI 代码界面跳转常用方式
    IOS OC 多态(白话)
    IOS OC NSArray&NSMutableArray
    IOS OC NSString基础知识
    NSTimer做一个小计时器
    IOS UI 代码创建UIButton,UITextField,UILabel
    [HNOI2010]平面图判定
    [SDOI2017]树点涂色
  • 原文地址:https://www.cnblogs.com/wangxi01/p/11590099.html
Copyright © 2011-2022 走看看