沉冰浮水

沉冰浮水

做最终到的事,成为最终成为的人!
github
bilibili
mastodon
zhihu
douban

【備忘】原生 JS 監聽未來元素事件實例

最近發現的一個社區化(?)或者說分佈式的微博系統 ——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);
})();
載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。