DOM&事件 实战

题目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>

预览地址