本文章著作权归饥人谷_Lyndon和饥人谷所有，转载请注明出处
>>> 引言
现在JS部分已经学到了事件，我发现很多题目已经可以融合之前学过的各种JS基础知识了。今天将从一道作业题目入手，来探究一道题的多种解法（不是全部解法，毕竟JS还没有学完），顺带回顾之前所学习的内容。
题目 补全代码，要求：当鼠标放置在
li元素上，会在img-preview里展示当前li元素的data-img对应的图片。
源代码如下：
<ul class="ct">
<li data-img="1.jpg">鼠标放置查看图片1</li>
<li data-img="2.jpg">鼠标放置查看图片2</li>
<li data-img="3.jpg">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
//你的代码
</script>
我这里自定义的三张图片如下：
>>> 解法1：正则表达式
我的初步想法是：因为要在div class="img-preview"中展现图片，所以最重要的实现手段就是在div标签中加上一个img标签。由于这里的图片和代码文件处于同一个文件路径之下，我可以先取出每个li中图片的名称，然后利用字符串拼接将图片包裹在img中加入到div里。
这个解法首先要取出图片名称，因此我使用正则表达式。总结起来，完整的思路是：
- 使用
querySelectorAll()方法选择所有的li元素，用querySelector()方法选择将要用于图片展示的div元素 - 因为
querySelectorAll()方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象，所以用forEach()方法遍历返回的结果，在每一个li元素上使用addEventListener()方法指定事件处理程序 - 用
innerHTML属性在div中加入img标签，将图片名称附着进去
var pics = documents.querySelectorAll("li"),
preview = document.querySelector(".img-preview");
pics.forEach(function(li){
li.addEventListener("mouseenter", function(){
// 使用RegExp取出图片名称
var pic = this.outerHTML.toString().match(/[0-9]\.jpg/)[0];
// 为了方便观察，加一个控制台输出结果
console.log(pic);
preview.innerHTML = "<img src =" + pic + ">";
})
});
最后的结果完全符合题目要求，只要鼠标悬停在相应的li元素上面，就会在下方出现当前li元素的data-img对应的图片。
在正则表达式匹配过程中需要注意：如果单独用this.outerHTML返回的是一个Object，没有match方法，所以需要加上toString()方法进行转换。
用这个解法完成后，我进行了反思，虽然这个解法代码简单，但是存在一个很大的缺陷：题目中图片的名称相对来说是比较类似的，但是如果一旦没有共性，正则表达式的匹配很可能就失去效力，如果希望用很多个正则表达式去匹配图片名称，代码就会显得很复杂。
>>> 解法2：创建元素并添加属性，将事件绑定到父元素上
总体思路是：
- 使用
createElement()方法来生成HTML元素节点 - 使用
getAttribute()方法来获取相应li的data-img值，再使用setAttribute()方法来给刚才创建的元素节点设置元素属性
这样做的好处是：不再受到图片名称的局限，虽然代码会稍稍复杂一些。
var ct = document.querySelector(".ct"),
preview = document.querySelector(".img-preview"),
// 创建元素节点
image = document.createElement("img");
ct.addEventListener("mouseover", function(e){
src = e.target.getAttribute("data-img");
// 为了方便观察，加一个控制台输出结果
console.log(src);
// 设置元素属性
image.setAttribute("src", src);
preview.appendChild(image);
});
需要注意的是：这里需要使用的事件类型不是上一种方法用到的mouseenter，而是mouseover，两者的区别在于：不论鼠标指针穿过被选元素或其子元素，都会触发mouseover事件；只有在鼠标指针穿过被选元素时，才会触发mouseenter事件，mouseover对应mouseout；mouseenter对应mouseleave。
如果在现在的解法中使用mouseenter，就会出现报错，因为这里添加事件处理程序的元素是ul class="ct"，因此mouseenter在这种场景下会返回null，因为ul本身是没有"data-img"属性的。而li作为ul的子元素，只要鼠标指针穿过li，就能触发mouseover事件，从而顺利获取到对象中的"data-img"属性值。
>>> 解法3：综合解法1和解法2，兼用循环和属性获取
这个方法就是比较安全、不容易出错的方法。解法1中使用的是forEach()方法，这里直接使用常见的for循环
var pics = document.querySelectorAll(".ct>li"),
preview = document.querySelector(".img-preview");
for(var i = 0; i < pics.length; i++){
pics[i].addEventListener("mouseenter", function(){
var img = this.getAttribute("data-img");
preview.innerHTML = "";
});
}
>>> 总结
通过思考一道题的多种解法，回顾了之前已经学习的部分JS基础知识，关键要点如下：
- 明确
mouseenter和mouseover的使用场景 - 摆脱循环可能会让代码更加简单
- 尽量直接使用DOM中Element对象已有的增、删、改、查方法，可以有效提升效率
BTW，我相信最好的解法永远是学习更多知识后写出的下一个解法。
