「备忘」原生 JS 监听未来元素事件实例

吐槽/反馈/建议:我的咸鱼心  爱发电-@wdssmq

最近发现的一个社区化(?)或者说分布式的微博系统——Mastodon(官方中文译万象,网民又称长毛象),简单说就是任何人都可以使用其源码搭建一个微博站点并各自允许用户注册,不同站点的用户又可以相互发现和关注……

↓↓↓

注册 - 长毛象中文站

https://acg.mn/invite/DXwRtTMG

Mastodon - 搜索结果 - 知乎

https://www.zhihu.com/search?type=content&q=Mastodon

↑↑↑

其实关于 Mastodon 的介绍就只有上边这些。详细请自行注册了解……

问题是关注了几个更新纸片人的机器人后,发现 NSFW 太烦人了,,这个到是找到了现成的脚本:

↓↓↓

Mastodon NSFW Remover

https://greasyfork.org/zh-CN/scripts/29228-mastodon-nsfw-remover

↑↑↑

然而点击图片后加载大图实在略慢。。试着写了下边代码实现在鼠标划过图片时自动替换为大图(虽然感觉效果和效果有偏差,先发出来再调整)

// 原生js未来元素事件监听的写法 - 笑场 - CSDN博客
// https://blog.csdn.net/xianglikai1/article/details/76100177

// JS获取元素属性和自定义属性 - 马优晨 - CSDN博客
// https://blog.csdn.net/qq_24147051/article/details/77976844
(function () {
  "use strict";
  function $n(e) {
    return document.querySelector(e);
  }
  function $na(e) {
    return document.querySelectorAll(e);
  }
  // 直觉应该用mouseenter,然而并不是
  $n(".app-holder").addEventListener("mouseover", function (e) {
    console.log(e.target);
    console.log(e.target.nodeName);
    console.log(e.target.className || "class为空");
    // 实际代码
    if (e.target.nodeName === "IMG") {
      let src = e.target.getAttribute("src");
      src = src.replace("small", "original");
      e.target.setAttribute("src", src);
      let srcset = e.target.getAttribute("srcset");
      srcset = srcset.replace("small", "original");
      e.target.setAttribute("srcset", srcset);
    }
  }, false);
})();

爱发电

本文标题:《「备忘」原生 JS 监听未来元素事件实例》作者:沉冰浮水
原文链接:https://www.wdssmq.com/post/20190316472.html
特别注明外均为原创,转载请注明。

分享到微信

扫描二维码

可在微信查看或分享至朋友圈。

相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

网站分类

  • 订阅本站的 RSS 2.0 新闻聚合

搜索

本周旧文

近期观影记录:超级马里奥,死侍与金刚狼。。

搬家也告一段落,虽然搬过来的东西还得归置,新衣柜虽说已经散俩月味儿了,但还是不想放衣服进去。

要不我每年汇总整理一次??碎雨集_沉冰浮水_第1页

所以,不带这条的话,2024 年目前只发了 13 条嘟????

VSCode 内 git 操作卡住的时候没办法主动取消一直是个痛点,一般都是推送或拉取,今天连提交都卡了。。

又一个夏天过去了,所以今年也没买防水鞋套;然后天凉了,为了应对踢被子买了睡袋,不知道 1.2 米会不会略窄。。

《五至七时的克莱奥》,2018 年 6 月加入列表,21 年 11 月底发现 B 站上线了这部,直到前几天才看完,还是分两次看的。。接下来有五项是 2019 年的,都是电影 —— 略长的待办列表。。

有用程序自动抓取自己带 tag 的嘟,然后按年备份后从线上删除;刚发现去年的数据有备份但是没删线上??和本地数据对比后发现线上的还少一条,Why??

本质上,每个人需要的是「让自己面临的问题得到解决」的能力。。

这又涉及到直接能力和间接能力,,缺乏直接能力很正常,视情况可以通过学习来掌握直接能力,或者「请」有直接能力的人来帮自己解决。。

缺乏间接能力的情况是真没救,尤其是对「这是**我自己**面临的问题」这一前提没有明确认知的人。。

其实,在认知意义上,焦虑时我知道这种情绪对应「焦虑」这个文法词汇,此外还有「压抑」「悲伤」等等,然而「抑郁」其实是个我认知体系外的词,虽然经常一些情绪感受我找不到对应的语言词汇来表述,却也只能将其实表述为「找不到对应的语言词汇来表述」的某些感受。。

爱发电支持者

最新留言

友情链接