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

本文系原创,转载前请邮件联络作者:scorpionlc@yeah.net或直接在评论中留言等候回复

>>> 引言

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

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

1
2
3
4
5
6
7
8
9
<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标签,将图片名称附着进去
1
2
3
4
5
6
7
8
9
10
11
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()方法来获取相应lidata-img值,再使用setAttribute()方法来给刚才创建的元素节点设置元素属性

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

1
2
3
4
5
6
7
8
9
10
11
12
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对应mouseoutmouseenter对应mouseleave
如果在现在的解法中使用mouseenter,就会出现报错,因为这里添加事件处理程序的元素是ul class="ct",因此mouseenter在这种场景下会返回null,因为ul本身是没有"data-img"属性的。而li作为ul的子元素,只要鼠标指针穿过li,就能触发mouseover事件,从而顺利获取到对象中的"data-img"属性值。


>>> 解法3:综合解法1和解法2,兼用循环和属性获取

这个方法就是比较安全、不容易出错的方法。解法1中使用的是forEach()方法,这里直接使用常见的for循环

1
2
3
4
5
6
7
8
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 src=" + img + ">";
});
}

>>> 总结

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

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

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