1.写一个函数，批量操作 css
image.png
function css(node, styleObj){
//todo ..
for(var property in styleObj){
node.style[property]=styleObj[property];
}
}
css(document.body, {
'color': 'red',
'background-color': '#ccc'
})
2.如何获取 DOM 计算后的样式
window.getComputedSelector(element).property
var node = document.querySelector('p')
var color = window.getComputedStyle(node).color
console.log(color)
3. 实现效果如图
image.png
http://js.jirengu.com/boqin/2/edit
4 . 几种事件处理程序
HTML事件处理程序
<input type="button" value="Click Here" onclick="alert('Clicked!');" />
<input type="button" value="Click Here" onclick="showMessage();" />
如果当前元素是一个表单输入元素，则作用域还可会包含访问表单元素（父元素）的入口，这个函数就变成如下
function (){
with(document){
with(this.form){
with(this){
//无属性值
}
}
}
这样扩展作用域，无非就是相让事件处理程序无需引用表单元素就能访问其他表单字段。
<form method="post">
<input type="text" name="username" value="enter username">
<input type="button" value="Echo Username" onclick="alert(username.value)">
</form>
-
缺点：
存在加载顺序问题，如果事件处理程序在html代码之后加载，用户可能在事件处理程序还未加载完成时就点击按钮之类的触发事件，存在时间差问题
这样书写html代码和JavaScript代码紧密耦合，维护不方便
DOM0级事件处理程序。
通过JavaScript指定事件处理程序就是把一个方法赋值给一个元素的事件处理程序属性。
<input id="btnClick" type="button" value="Click Here" />
<script type="text/javascript">
var btnClick = document.getElementById('btnClick');
btnClick.onclick = function showMessage() {
alert(this.id);
};
</script>
这样处理，事件处理程序被认为是元素的方法，事件处理程序在元素的作用域下运行，this就是当前元素，所以点击button结果是：btnClick
这样还有一个好处，我们可以删除事件处理程序，只需把元素的onclick属性赋为null即可
- 缺点：不能绑定多个事件，后一个将覆盖前一个
DOM2级事件处理程序
DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作：
- addEventListener
- removeEventListener
所有DOM节点包含这两个方法，并且接受三个参数。
1.事件类型
2.事件处理方法 - 布尔参数，如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理
<input id="btnClick" type="button" value="Click Here" />
<script type="text/javascript">
var btnClick = document.getElementById('btnClick');
btnClick.addEventListener('click', function() {
alert(this.id);
}, false);
btnClick.addEventListener('click', function() {
alert('Hello!');
}, false);
</script>
- 可以绑定多个事件*。
5. 解释DOM2事件传播机制？
- DOM2级事件规定的事件包括三个阶段:
- 事件捕获阶段：不太具体的节点应该更早的接收事件，而最具体元素最后接收事件。
2.处于目标阶段 - 事件冒泡阶段：事件开始时由最具体的元素接收，然后逐级向上传播到较不具体的节点。
- 首先发生的事件捕获，然后是实际的目标接收事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出相应。
- 以下面的例子，点击div会按照顺序触发事件。
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Test Page</title>
</head>
<body>
<div>
Click Here</div>
</body>
</html>
事件捕获
事件冒泡
DOM事件流
6.有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
代码：http://js.jirengu.com/carob/2/edit
7. 补全代码，要求：
- 当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.
- 当点击每一个元素li时控制台展示该元素的文本内容。
代码：http://js.jirengu.com/rahas/1/edit
8. 补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。
代码：http://js.jirengu.com/vibor/2/edit
