JS DOM操作（2）事件（1）

1、写一个函数，批量操作 css

function css(node, styleObject){
    for(var key in styleObject){
        node.style[key] = sytleObject[key]
    }
}
css(document.body, {
  'color': 'red',
  'background-color': '#ccc'
})

2、如何获取 DOM 计算后的样式

//css
div {
  color: red;
  fontsize: 20px;
}
//html
<div id="name">海山城</div>

设置div的background为pink

document.querySelector("#name").style.background = 'pink'

检查代码发现相当于做了这样一件事，相当于添加了行内样式

<div id="name" style="background: pink;">海山城</div>

因此如果行内样式没有某个属性，通过这个方式是获取不到该属性对应的值的

//css
div {
  color: red;
  fontsize: 20px;
}
//html
<div id="name" style="background:blue">海山城</div>
//JS
var background = document.querySelector("#name").style.background
var fontsize = document.querySelector("#name").style.fontsize
console.log(background)    //"blue"
console.log(fontsize)      //""，获取不到

那么我就想获取到某个元素的非行内样式怎么办呢？
getcomputedStyle：获取元素计算后的样式，不要通过 node.style.属性获取

//css
div {
  color: red;
  fontsize: 20px;
}
//html
<div id="name">海山城</div>
//JS
var color = window.getComputedStyle(document.querySelector("#name")).color
var fontsize= window.getComputedStyle(document.querySelector("#name"))['font-size']
//或者var fontsize= window.getComputedStyle(document.querySelector("#name")).fontSize
console.log(color)
console.log(fontsize)

注： window.getComputedStyle()得到的是一个存放了所有计算后的样式的对象，因此 . 和 [] 都可以访问其中所有的属性样式，[]中用的是css写法(font-size)，想用 . 可以使用驼峰(fontSize)

3、实现此效果

通过node.style.属性添加样式太麻烦，需要一条一条的添加。可以将所有需要添加的属性写到一个class中，那个元素需要这些样式，直接给这个元素添加这个class就行了
代码实现

4、onlick与addEventListener的区别？

用法：

//onclick
btn.onclick = function(){
   console.log("第一")
}
// "第一"
//addEventListener
var btnClick = document.getElementById('btnClick');
btnClick.addEventListener('click', function() {
    console.log("第一")
}, false)
btnClick.addEventListener('click', function() {
    console.log("第二")
}, false)
/* "第一"
   "第二" */

区别：

名称的区别。一个是onclick，而addEventListener中的参数是click
onclick只可以绑定一个事件，而addEventListener可以绑定多个事件
btn.onclick = function(){console.log("第一")}相当于对一个对象赋值，那么在btn.onclick = function(){console.log("第二")}就会把前面的值覆盖，所以onclick不能绑定多个事件
onclick只能是在默认的冒泡阶段，而addEventListener可以指定参数来设置是捕获阶段还是冒泡阶段，第三个参数可以不写（即为false），代表的是默认的冒泡阶段，如果是true则代表的是捕获阶段

5、解释DOM2事件传播机制？

首先了解下什么是事件流？
事件流描述的是从页面中接收事件的顺序，比如有两个嵌套的div，点击了内层的div，这时候是内层的div先触发click事件还是外层先触发？目前主要有三种模型

IE的事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素
Netscape的事件捕获：不太具体的节点更早接收事件，而最具体的元素最后接收事件，和事件冒泡相反
DOM2级事件流：包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段

再来看个DOM2事件传播机制的有趣事例
事例代码地址
代码中嵌套了3个div，并且为每个div都绑定了对应的捕获以及冒泡事件。当我点击div#inner时，控制台的结果为：

outer捕获
middle捕获
inner冒泡
inner捕获
middle冒泡
outer冒泡

what？为啥inner冒泡会在inner捕获前面！！？
原理：DOM事件触发分为三个阶段
①、事件捕获阶段，即由最顶层元素（一般是从window元素开始，有的浏览器是从document开始）开始，逐次进入dom内部，最后到达目标元素，依次执行绑定在其上的事件(不包括目标元素上的事件)
②、处于目标阶段，检测机制到达目标元素，按事件注册顺序执行绑定在目标元素上的事件。
③、事件冒泡阶段，从目标元素出发，向外层元素冒泡，最后到达顶层（window或document），依次执行绑定再其上的事件(不包括目标元素上的事件)。
所以，div#inner上的事件是处于目标阶段的事件，会按事件注册顺序执行，和设定的是捕获还是冒泡事件并无关系

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

<ul class="ct">
    <li>这里是</li>
    <li>海山城</li>
    <li>大世界</li>
</ul>
<script>
//todo ...
</script>

方法一：利用this。this指代的就是绑定事件的那个元素

var liList = document.getElementsByTagName('li')
for(var i=0; i<liList.length; i++){
  liList[i].onclick = function(){
    console.log(this.innerText)
  }
}

方法二：利用闭包。

var liList = document.getElementsByTagName('li')
for(var i=0; i<liList.length; i++){
  (function(new_i){
    liList[new_i].onclick = function(){
      console.log(liList[new_i].innerText)
    }
  })(i)
}

那么，问题来了，我不加立即执行函数生成闭包不行吗，就像下面这样

var liList = document.getElementsByTagName('li')
for(var i=0; i<liList.length; i++){
  liList[i].onclick = function(){
    console.log(liList[i].innerText)//如果console.log(i)，点击任何li都会输出3
  }
}

点击每个li会发现控制台报错，什么原因呢？
原理：

onclick的回调函数会被加入到任务队列中，等主线程所有代码执行完毕，才开始执行。因此，循环会先被执行完，最后得到i的值为length（我这里只有3个li，i也就是3），最后无论点击哪个li时，对应的回调函数执行console.log（liList[3].innerText），已经越界了，所以会报错!!!
如果给代码块包装一个立即执行函数，并把i作为参数传入的话
相当于var new_i = i，console.log(liList[new_i ].innerText。那么后续i++对当前new_i并没有影响

方法三：事件代理（推荐！！），不对每个节点都设置事件，对其父节点设置事件

var ul = document.querySelector('.ct')
ul.addEventListener('click',function(e){
   console.log(e.target.innerText)
})

在事件处理程序内部，this始终等同于currentTarget(绑定事件的目标)，而target是事件的实际目标（实际点击的目标）
e是指event事件对象，包含了创建它的特定事件有关的属性和方法，preventDefault()，stopPropagation()，target这三个最为重要
e是哪边来的呢？在addEventListener的内部var event = {}，然后系统收集到的方法属性会被添加到对象中，最后callback(event)执行，也就是把event作为参数传入到了callback中，所以上述代码等价于：

var ul = document.querySelector('.ct')
ul.addEventListener('click',function(){
   console.log(arguments[0].target.innerText)//addEventListener函数的内部会将event对象作为第一个参数传入call函数中
})

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>