DOM、事件

作者: StarLikeRain | 来源:发表于2016-08-03 22:50 被阅读29次

前端面试题（3）——DOM事件类
DOM事件
DOM事件
DOM0和DOM2级事件简单理解
Dom事件
3-6 DOM事件
HTML DOM 事件
网易微专业-DOM编程艺术 05 事件
DOM事件类
DOM事件

问答

dom对象的innerText和innerHTML有什么区别？
innerText:可以获取或设置对象标签内的文本内容

        <div id="ct">
            <h1>click me!</h1>
            <a class="link" href="#">this is a element test</a>
        </div>
        <script type="text/javascript">
            var ct = document.querySelector('#ct');
            console.log(ct.innerText);//click me!  this is element test
        </script>

innerHTML:可以获取或设置对象html里面的html构造

        <div id="ct">
            <h1>click me!</h1>
            <a class="link" href="#">this is a element test</a>
        </div>
        <script type="text/javascript">
            var ct = document.querySelector('#ct').innerHTML;
            console.log(ct);// <h1>click me!</h1> <a class="link" href="#">this is a element test</a>
        </script>

elem.children和elem.childNodes的区别？
children：返回指定元素的子元素集合，只包含元素节点，仅包含直接子元素。
childNodes：返回的内容包含文本节点和元素节点返回的#text就是文本节点，内容是空格、换行符或制表符等

    <body>
        <div id="ct">
            <h1>click me! <span>inside Span</span></h1>
            
        </div>
        <script type="text/javascript">
            console.log(document.getElementsByTagName('h1')[0].children); //HTMLCollection[1]
            console.log(document.getElementsByTagName('h1')[0].childNodes);//NodeList[2]
        </script>
    </body>

查询元素有几种常见的方法？
①getElementById:通过ID特征返回一个对象，该对象对应文档里面一个特定的元素element
②getElementByClassName：返回一个对象数组，对应文档里的特定元素节点
③getElementByTagName：返回一个对象数组，对应文档里的特定元素节点
④querySelectorAll：返回当前文档中匹配的选择器，返回对象类型是[NodeList]（类数组对象）
⑤querySelector：匹配单个对象，根据选择器，该对象对应文档里的一个特定元素节点

如何创建一个元素？如何给元素设置属性？

  <script type="text/javascript">
   var img = document.createElement('img');
   img.id = 'myimg';
   /*or*/ img.setAttribute("class", "myimg");
   console.log(img); //<img id = "myimg">
  </script>

元素的添加、删除？
元素的添加
appendChild：元素的末尾添加一个子元素节点

  <div id="laugh">
   <h1>aaa</h1>
  </div>
  <script type="text/javascript">
   var div = document.getElementById('laugh'),
    newConetent = document.createTextNode('hello');  
   div.appendChild(newConetent);//执行这句会在html结构后面加入一个子元素节点hello   
  </script>
//另附
var div = document.createElement('div');
var newContent = document.createTextNode('hello');
newDiv.appendChild(newContent);

insertBefore：在某个元素之前插入元素节点

  <div id="laugh">
   <h1>aaa</h1>
  </div>
  <script type="text/javascript">
   var div = document.getElementById('laugh'),
   newContent = document.createTextNode('hello');
   div.insertBefore(newContent, div.firstChild);
  </script>
//另附
var newDiv = document.createElement('div');
var newContent = document.createTextNode('hello');
newDiv.insertbefore(newContent , newDiv.firstChild);

元素的删除
removeChild：删除某个元素，参数为一个待删除的元素

parentNode.removeChild(childNode);

DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
DOM0：每个元素都有自己的时间处理程序属性，这些属性名字通常是小写的，比如onclick等。将这些属性的值设置为一个函数，可以指定事件处理程序。比如

        <input id='btn' type="button" name="name" value="Don't clike me anymore ..." />

        <script type="text/javascript">
            var btn = document.getElementById('btn');
            btn.onclick = function display() {
                alert(this.value);
            }
        </script>

事件处理程序被认为是元素的方法，事件处理程序在元素的作用域下运行，this是当前的这个元素，所以点击button的结果是：Don't clike me anymore ...
如果要删除事件处理程序的话，只要把元素onclick的属性赋为null即可。

DOM2：DOM2级时间定义了两个方法用于处理指定和删除事件处理程序的操作

1、addEventListener
2、removeEventListner

所有的DOM节点都包含这两个方法，他们接受三个参数：

1、事件类型
2、事件处理方法
3、布尔，如果是true则在捕获阶段调用事件处理程序，如是false则是在时间冒泡阶段就处理。

//expamle

        <input id='btn' type="button" name="name" value="Don't clike me anymore ..." />

        <script type="text/javascript">
            var btn = document.getElementById('btn');
            btn.addEventListener('click',function(){
                alert(this.value);
            },false)
        </script>

DOM2可以为上面代码添加多个事件处理程序，DOM不行。
如果要移除事件处理程序，只需要removeEventListener，移除时的参数和添加时相同（匿名函数无法移除）。

attachEvent与addEventListener的区别？

1、attachEvent用在IE上因IE不支持addEventListener。
2、参数上addEventListener可以接收3个参数（类型，函数，布尔值），attachEvent接收2个参数（类型，函数）只支持事件冒泡。
3、移除函数：比如addEventListener移除方法是removeEventListener,但accachEvent的移除方法是detachEvent。
4、类型名称：addEventListener的接收类型是'click',但attachEvent的接收类型是'onclick'。
5、作用域：addEventListener作用域是元素本身，this指的是点击的触发的元素，而attachEvent的作用域是全局，this指的就是全局的window啦~
6、事件处理程序的执行顺序：addEventListener按照添加顺序执行，而attachEvent顺序是无规律的（添加的少的时候多数是反顺序执行，添加多了就会无规律）

解释IE事件冒泡和DOM2事件传播机制？
1、IE事件冒泡：事件被触发由具体的第一个被触发的元素接收，然后一级一级网上传播
2、DOM2事件传播：分事件捕获阶段，处于目标阶段，事件冒泡阶段。首先发生的是事件捕获，然后是实际目标接收事件，最后是冒泡阶段

如何阻止事件冒泡？如何阻止默认事件？
可以写代码btn.stopPropagation()方法用户立即停止事件在DOM层中的传播，阻止事件进一步的冒泡，一般来说用于阻止事件传播到body（不能阻止同意document节点上其他事件句柄被调用）

        <input id='btn' type="button" name="name" value="Don't clike me anymore ..." />

        <script type="text/javascript">
            var btn = document.getElementById('btn');
            btn.addEventListener('click',function(e){
                console.log(e);
                alert(this.value);
                e.stopPropagation();//this is the point
            },false)
            document.body.addEventListener('click',function(){
                alert("what the hell? I'm anonymous");
            },false)
            
        </script>

代码

有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容

<ul class="ct"> <li>这里是</li>  <li>前端6班</li></ul><script>//todo ...</script>

//答

    <body>
        <ul class="content">
            <li>here</li>
            <li>we</li>
            <li>go~!!</li>
        </ul>
        <script type="text/javascript">
            var lists = document.getElementsByClassName('content')[0].getElementsByTagName('li');
            for(i = 0; i < lists.length; i++) {
                lists[i].addEventListener('click', function() {
                    console.log(this.innerText);
                })
            }
        </script>
    </body>

补全代码，要求
1、当点击按钮开头添加时在<li>这里是</li>元素前面添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时，在<li>前端6班</li>后添加用户输入的非空字符串。
2、当点击每一个元素li时控制台展示该元素的文本内容。

        <ul class="ct">
            <li>这里是</li>
            
            <li>前端6班</li>
        </ul>
        <input class="ipt-add-content" placeholder="添加内容" />
        <button id="btn-add-start">开头添加</button>
        <button id="btn-add-end">结尾添加</button>
        <script>
            //todo ...
        </script>

//答

        <ul class="ct">
            <li>这里是</li>
            
            <li>前端6班</li>
        </ul>
        <input class="ipt-add-content" placeholder="添加内容" />
        <button id="btn-add-start">开头添加</button>
        <button id="btn-add-end">结尾添加</button>
        <script>
            var ct = document.getElementsByClassName('ct')[0];
            var content = document.getElementsByClassName('ipt-add-content')[0];
            var btnStart = document.getElementById('btn-add-start');
            var btnEnd = document.getElementById('btn-add-end');
            btnStart.addEventListener('click', handler);
            btnEnd.addEventListener('click', handler);

            function handler(e) {
                var newE = document.createElement('li');
                var newContent = document.createTextNode(content.value);
                newE.appendChild(newContent);
                if(e.target.id === 'btn-add-start') {
                    ct.insertBefore(newE, ct.firstChild)
                } else {
                    ct.appendChild(newE);
                }

            }
            ct.addEventListener('click', function(e) {
                    console.log(e.target.innerText)
                }, false)
                //在父元素添加事件监听

            //注释为笔记
            //这是每个元素都添加监听   
            //          var listArr = document.getElementsByClassName('ct')[0].getElementsByTagName('li');
            //          for(var i =0; i< listArr.length; i++){
            //              listArr[i].addEventListener('click',function(){
            //                  console.log(this.innerText);
            //              })
            //          }

            //这是直接给父元素添加
            //          var bttttttnnn = document.querySelector('.ct');
            //          bttttttnnn.addEventListener('click', function(e) {
            //                  console.log(e.target.innerText);
            //              })
        </script>

补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。

        <ul class="ct">
            <li data-img="https://img.alicdn.com/imgextra/i4/773811758/TB22XMHtVXXXXa7XXXXXXXXXXXX_!!773811758.jpg">鼠标放置查看图片1</li>
            <li data-img="https://img.alicdn.com/imgextra/i1/773811758/TB2VrAHtVXXXXbfXXXXXXXXXXXX_!!773811758.jpg">鼠标放置查看图片2</li>
            <li data-img="https://img.alicdn.com/imgextra/i3/773811758/TB2cL7JtVXXXXaMXXXXXXXXXXXX_!!773811758.jpg">鼠标放置查看图片3</li>
        </ul>
        <div class="img-preview"></div>
        <script>
            var ct = document.querySelector('.ct'),
                childs = ct.querySelectorAll('li'),
                preview = document.querySelector('.img-preview');
                
//          for(var i = 0; i < childs.length; i++) {
//              childs[i].addEventListener('mouseenter', function() {
//                  var dataImg = this.getAttribute('data-img');
//                  preview.innerHTML = '![](' + dataImg + ')'
//              });
//          }

//给父元素加监听
            ct.addEventListener('mouseover',show)
            function show(e){
                var src = e.target.getAttribute('data-img');
                preview.innerHTML='![]('+src+')';
            }
        </script>

实现如下图Tab切换的功能
OMG
实现下图的模态框功能
btn-cover

前端面试题（3）——DOM事件类
基本概念：DOM事件的级别 DOM事件模型：事件冒泡事件捕获 DOM事件流描述DOM事件捕获的具体流程 Even...
DOM事件
DOM级别与DOM事件 DOM级别：DOM0级、DOM1级、DOM2级、DOM3级DOM事件：DOM0级事件处理、...
DOM事件
DOM级别与DOM事件 DOM级别：DOM0级，DOM1级，DOM2级和DOM3级DOM事件：DOM0级事件处理，...
DOM0和DOM2级事件简单理解
关于DOM0 和DOM1级事件可以简单理解为：事件分为DOM 0级事件和Dom 2级事件，DOM2级事件也叫做事件...
Dom事件
基本概念 Dom事件级别 Dom事件模型 Dom事件流描述Dom事件捕获的具体流程 Event对象的常见应用自...
3-6 DOM事件
问题 DOM 事件的级别 DOM 事件模型(就是捕获和冒泡儿) DOM 事件流描述DOM事件捕获的具体流程 Ev...
HTML DOM 事件
HTML DOM 事件 HTML DOM 事件 HTML DOM 事件允许Javascript在HTML文档元素中...
网易微专业-DOM编程艺术 05 事件
1、DOM事件⑴主要内容▪事件流▪事件注册▪事件对象▪事件分类▪事件代理 ⑵什么是DOM事件▪点击一个DOM元素▪...
DOM事件类
基本概念：DOM事件的级别 DOM事件模型 DOM事件流描述DOM事件捕获的具体流 Event对象的常见应用自...
DOM事件
DOM事件的级别 DOM事件模型 DOM事件流描述DOM时间捕获的具体流程 Event对象的常见应用自定义事件...