JS事件：一道题的多种解法

本文章著作权归饥人谷_Lyndon和饥人谷所有，转载请注明出处

>>> 引言

现在JS部分已经学到了事件，我发现很多题目已经可以融合之前学过的各种JS基础知识了。今天将从一道作业题目入手，来探究一道题的多种解法（不是全部解法，毕竟JS还没有学完），顺带回顾之前所学习的内容。

题目 补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。
源代码如下：

    
鼠标放置查看图片1
    
鼠标放置查看图片2
    
鼠标放置查看图片3

我这里自定义的三张图片如下：

---

>>> 解法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 = "";
    })
});

最后的结果完全符合题目要求，只要鼠标悬停在相应的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 = "![]( + img + )";
    });
}

---

>>> 总结

通过思考一道题的多种解法，回顾了之前已经学习的部分JS基础知识，关键要点如下：

• 明确mouseenter和mouseover的使用场景
• 摆脱循环可能会让代码更加简单
• 尽量直接使用DOM中Element对象已有的增、删、改、查方法，可以有效提升效率

BTW，我相信最好的解法永远是学习更多知识后写出的下一个解法。