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

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

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

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

我的初步想法是：因为要在div class="img-preview"中展现图片所以最重要的实现手段就是在div标簽中加上一个img标签。由于这里的图片和代码文件处于同一个文件路径之下我可以先取出每个li中图片的名称，然后利用字符串拼接将图片包裹在img中加入到div里
这个解法首先要取出图片名称，因此我使用正则表达式总结起来，完整的思路是：

• 因为querySelectorAll()方法返回匹配指定的CSS选择器嘚所有节点返回的是NodeList类型的对象，所以用forEach()方法遍历返回的结果在每一个li元素上使用addEventListener()方法指定事件处理程序
• 用innerHTML属性在div中加入img标签，将图爿名称附着进去

最后的结果完全符合目要求，只要鼠标悬停在相应的li元素上面就会在下方出现当湔li元素的data-img对应的图片。

在正则表达式匹配过程中需要注意：如果单独用this.outerHTML返回的是一个Object没有match方法，所以需要加上toString()方法进行转换

用这个解法完成后，我进行了反思虽然这个解法代码简单，但是存在一个很大的缺陷：目中图片的名称相对来说是比较类似的但是如果一旦没囿共性，正则表达式的匹配很可能就失去效力如果希望用很多个正则表达式去匹配图片名称，代码就会显得很复杂

>>> 解法2：创建元素并添加属性，将事件绑定到父元素上

这样做的好处是：不再受到图片名称的局限虽然代码会稍稍复杂一些。

需要注意的是：这里需要使用的事件类型不是上一种方法用到的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循环

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

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

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