美文网首页
DOM&事件 实战

DOM&事件 实战

作者: 左冬的博客 | 来源:发表于2017-09-16 23:22 被阅读0次
    题目1: 写一个函数,批量操作 css
    function css(node, styleObj){
    //todo ..
    }
    css(document.body, {
      'color': 'red',
      'background-color': '#ccc'
    })
    
    题目2: 如何获取 DOM 计算后的样式

    使用getComputedStyle获取元素计算后的样式


    题目3: 实现此效果

    效果链接

    题目4: onlick与addEventListener的区别?
    • oncllick:绑定事件监听器,也是DOM0级事件监听方法。
      优点:简单且具有跨浏览器优势。
      缺点:通常将一个方法赋值给一个元素的事件处理程序属性,也就意味着这个方法可以被新的方法覆盖,一个时间只能绑定一次。
      移除事件处理程序:只需把onclick属性赋值为null即可。
      btn.onclick = function(){}
    • addEventListener:是DOM2级事件处理程序。
      能够接受三个参数
      • 事件处理类型
      • 事件处理方法
      • 布尔参数(在不会阶段调用事件处理程序为true,在事件冒泡阶段处理为false)
        优点:能够绑定多个处理程序,会按照顺序依此执行。
        缺点:不具备跨浏览器优势。
        移除事件处理程序:只能通过removeEventListener移除,移除时参数与添加的时候相同。
    var btnClick = document.getElementById('btnClick');
    
        var handler=function() {
            alert(this.id);
        }
    btnClick.addEventListener('click', handler, false);
    btnClick.removeEventListener('click', handler, false);
    
    题目5: 解释DOM2事件传播机制?

    DOM2级事件传播机制包括三个阶段

    • 事件捕获阶段
    • 处于目标阶段
    • 事件冒泡阶段

    首先发生的是事件捕获,为截取事件提供机会,然后是实际目标接收事件,最后是冒泡阶段

    题目6:有如下代码,要求当点击每一个元素<li>时控制台展示该元素的文本内容。不考虑兼容
    <ul class="ct">
        <li>这里是</li>
        <li>饥人谷</li>
        <li>前端14班</li>
    </ul>
    <script>
    //...
    </script>
    
    题目7: 补全代码,要求:
    • 当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素,内容为用户输入的非空字符串;当点击结尾添加时在最后一个<li>元素后添加用户输入的非空字符串。
    • 当点击每一个元素li时控制台展示该元素的文本内容。
    <ul class="ct">
        <li>这里是</li>
        <li>饥人谷</li>
        <li>任务班</li>
    </ul>
    <input class="ipt-add-content" placeholder="添加内容"/>
    <button id="btn-add-start">开头添加</button>
    <button id="btn-add-end">结尾添加</button>
    <script>
    //你的代码
    </script>
    

    预览地址
    题目8: 补全代码,要求:当鼠标放置在<li>元素上,会在img-preview里展示当前li元素的data-img对应的图片。
    <ul class="ct">
        <li data-img="1.png">鼠标放置查看图片1</li>
        <li data-img="2.png">鼠标放置查看图片2</li>
        <li data-img="3.png">鼠标放置查看图片3</li>
    </ul>
    <div class="img-preview"></div>
    <script>
    //你的代码
    </script>
    

    预览地址

    相关文章

      网友评论

          本文标题:DOM&事件 实战

          本文链接:https://www.haomeiwen.com/subject/qbdssxtx.html