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

本文章著作权归饥人谷_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()方法来获取相应lidata-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对应mouseoutmouseenter对应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基础知识,关键要点如下:

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

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 8,938评论 1 87
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 507评论 0 8
  • 总结: 鼠标事件 1.click与dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r阅读 832评论 2 9
  • 第1章 鼠标事件 1-1 jQuery鼠标事件之click与dbclick事件 用交互操作中,最简单直接的操作就是...
    mo默22阅读 420评论 0 5
  • “什么事情笑的这么高兴。”夏爸爸搂着早春的小子跨进房门,顿时这个小小的空间充斥了大人的呵斥声、孩子的叫喊声、或是开...
    S菩提只吃半碗饭阅读 62评论 1 1