Használja ezt a 3 kevéssé használt HTML-eseményt, hogy némi hangulatot adjon webhelyéhez

Egyre nehezebb kitűnni az interneten, miközben ez egyre fontosabb. Összegyűjtöttem 3 alulhasznált HTML-eseményt, amelyeket meghallgathat JavaScriptben, és felvirágoztathatja az internet sarkát.

1. Módosítsa az oldal címét, amikor a felhasználó másik lapra lép

Amikor egy felhasználó lapot vált, az Ön webhelye csatlakozik a nyitott lapok egyre növekvő listájához, és jó eséllyel soha többé nem tér vissza. Ha továbbra is kommunikálhatna azzal a felhasználóval, visszanyerheti őket! Itt lép be a "visibilitychange" esemény. Ezt az eseményt "akkor indítják el a dokumentumban, amikor a lap tartalma láthatóvá vált vagy el lett rejtve", így reagálhatunk a másik lapra navigáló felhasználóra, valamint amikor visszajönnek. Sajnos a definíció szerint, ha a lap tartalma rejtve van, nem sok mindent tudunk megmutatni a felhasználónak, hogy visszacsábítsa őket. A megbízható régi dokumentumcím azonban megmarad. Az alábbi részlet lecseréli a dokumentum címét egy kéréssel, hogy térjen vissza, amikor a felhasználó kilép, majd a hála üzenetével helyettesíti, amikor visszatér.

addEventListener("visibilitychange", () => {
  document.title = document.visibilityState === "hidden"
    ? "Please come back! 🙏"
    : "Phew, we missed you 😌";
});

Tedd saját magad

Amíg a lap nem aktív, nem sok mindent meg lehet mutatni a felhasználónak, de nincs korlátozás arra, hogy mit tehet ezzel az eseménnyel, amikor a felhasználó visszatér a lapra. Miért ne ünnepelhetnénk visszatérésüket egy kis konfettivel?

2. Nyisson meg egy felugró ablakot, amikor a felhasználó szöveget másol

A másolás és beillesztés billentyűparancsai talán a legismertebbek az összes közül, de tudtad-e, hogy amikor egy felhasználó szöveget "másol" (vagy "kivág" vagy "beilleszt") az oldalon, akkor egy eseményt is küldünk hallgatni?

Ha e-kereskedelmi webhelyet üzemeltet, és a felhasználó lemásolja a termék címét, akkor előfordulhat, hogy ugyanazt a terméket keresi jobb áron egy versenytárs üzletében. Megelőzheti az elveszett eladást, ha kedvezményt kínál a felhasználónak!

addEventListener("copy", () => {
  openDiscountPopup()
});

Tedd saját magad

Számos oka lehet annak, hogy a felhasználó szöveget másol az Ön webhelyére. Lehet, hogy nem ismertek egy bonyolult szó jelentését, és a Google-ba készültek; definícióval ellátott elemleírást kínálhatna. Talán el akarják menteni azt a blogcikket egy jegyzetben valahol; javasolhatja, hogy adják hozzá a „kedvenceikhez”. Minél jobban megérti a felhasználó szándékait, annál jobban tud reagálni az igényeikre. Gondolja át, mit tehetnek a felhasználók, miután szöveget másolnak a webhelyéről, és mit tehetnek a segítségükre ott és most.

3. Mutasson néhány közösségi média megosztási gombot, amikor a felhasználó kiemeli a szöveget

A szöveg másolásához hasonlóan a felhasználók különféle okokból kiemelhetnek szöveget az oldalon. Képzeljük el ebben a példában, hogy a felhasználó meg akarja osztani a blog cikkének egy részletét a közösségi médiában. Az alábbi részlettel elindíthatunk egy felületet, amely egy kattintással megosztható a Twitteren, a Facebookon stb. Akár "előre feltöltheti a tweetet" a számukra másolt szöveggel (és egy hivatkozással a forrásra, ha alattomosnak érzed magad).

const article = document.querySelector(".article");
article.addEventListener("mouseup", () => {
  const text = getSelection().toString();
  if (text === "") return;
  showShareButtons(text);
});

Tedd saját magad

Ismét gondoljon a felhasználókra – miért emelik ki a szöveget? Ha egyszer bejut a felhasználó elméjébe, már csak a képzeleted szab határt a számukra kínálható kényelmi lehetőségeknek.

BÓNUSZ: Jutalmazza meg a felhasználót, ha beírja a Konami kódot

Csak a móka kedvéért, miért nem tesz fel húsvéti tojásokat a webhelyére is? A „Konami kód” nyilvánvaló, és nem kell túl sok a megvalósítása, ahogy az alábbi részletben is látható.

const pressedKeys = [];
const konamiCode = [
  "ArrowUp",
  "ArrowUp",
  "ArrowDown",
  "ArrowDown",
  "ArrowLeft",
  "ArrowRight",
  "ArrowLeft",
  "ArrowRight",
  "b",
  "a",
];
let timeout;
window.addEventListener("keyup", (e) => {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    pressedKeys.splice(0, pressedKeys.length);
  }, 2500);
  pressedKeys.push(e.key);
  if (pressedKeys.join("").includes(konamiCode.join(""))) {
    clearTimeout(timeout);
    alert('Congratulations! Please accept this trophy 🏆')
  }
});

Tedd saját magad

A JavaScript-riasztás nem biztos, hogy a legszórakoztatóbb módja annak, hogy megünnepeljük a húsvéti tojást felfedező felhasználót. Adhat egy kis kedvezményt bizonyos termékekre, adhat hozzá egy kitűzőt a profiljukhoz (esetleg tartalmazza, hogy milyen gyorsan adja meg a kódot?), vagy küldjön nekik egy rendkívüli e-mailt a kiválóságukról.

Következtetés

A weben való építés és böngészés szórakoztató lehet, és remélem, ez a cikk adott néhány új ötletet a következő projektjéhez.

Ha bármilyen más ötlete van ezeknek az eseményeknek a felhasználására; vagy néhány újszerű módja az események felhasználásának, amelyeket nem soroltam fel, kérjük, ossza meg a megjegyzésekben.

Ha tetszett ez a cikk, kérjük, tapsolja meg, és kövessen további hasonló cikkekért.

Köszönöm, hogy elolvasta!