使用这 3 个未充分利用的 HTML 事件为您的网站添加一些风格

Photo by 阿迪·戈德斯坦 on 不飞溅

在网络上脱颖而出变得越来越困难，同时这样做也越来越重要。在这里，我收集了 3 个未充分利用的 HTML 事件，您可以在 JavaScript 中收听这些事件，并为您的互联网角落增添一些活力。

1.当用户转到另一个选项卡时更改页面标题

当用户切换标签时，您的网站会加入一个不断增长的打开标签列表，并且很有可能他们永远不会回来。如果您仍然可以与该用户交流，您可能能够赢回他们！这就是 “可见性改变”事件 介入。此事件“在其选项卡的内容变为可见或隐藏时在文档中触发”，因此我们可以响应用户导航到另一个选项卡以及何时返回。不幸的是，根据定义，当标签内容隐藏时，我们没有太多可以向用户展示将其引诱回去。但是，可靠的旧文档标题仍然存在。下面的代码片段将文档标题替换为在用户离开时请求返回，然后在用户返回时将其替换为感谢信息。

 addEventListener("可见性改变", () _= >_ {  
 document.title = document.visibilityState === "隐藏"  
 ? “请回来！”  
 ：“呸，我们想你了”；  
 });

让它成为你自己的

虽然选项卡未处于活动状态，但您可以向用户显示的内容不多，但是当用户返回您的选项卡时，您可以对此事件执行的操作没有限制。为什么不和一些人一起庆祝他们的回归 五彩纸屑 ?

2.当用户复制一些文本时打开一个弹出窗口

复制和粘贴的键盘快捷键可能是最广为人知的，但你知道吗？ 副本 （或者 削减 ， 或者 蛋糕 ) 页面上的文本还有一个我们可以监听的事件调度？

如果您正在运营一个电子商务网站并且用户复制产品标题，他们可能希望在竞争对手的商店中以更优惠的价格找到相同的产品。您可以通过向该用户提供折扣来抢占销售损失！

 addEventListener("复制", () _= >_ {  
 openDiscountPopup()  
 });

让它成为你自己的

用户可能在您的网站上复制某些文本的原因有很多。也许他们不知道一个复杂的词义，正要谷歌它；您可以提供带有定义的工具提示。也许他们想将那篇博客文章保存在某个地方的便条中；您可以建议他们将其添加到他们的“收藏夹”中。您越了解用户的意图，就越能更好地响应他们的需求。考虑一下您的用户在从您的站点复制文本后可能会做什么，以及您现在可以做些什么来帮助他们。

3.当用户突出显示文本时显示一些社交媒体分享按钮

与复制文本类似，您的用户可能出于各种原因突出显示页面上的文本。让我们想象一下这个例子，用户想要在社交媒体上分享你的博客文章的一些片段。通过下面的代码片段，我们可以触发一个界面，通过一键式选项打开以在 Twitter、Facebook 等上分享。您甚至可以 预填充推文 使用他们为他们复制的文本（如果您觉得偷偷摸摸，还可以链接到其源代码）。

_常量_ 文章 = document.querySelector(".article");  
 article.addEventListener("mouseup", () _= >_ {  
  _常量_ text = getSelection().toString();  
 如果（文本===“”）返回；  
 显示共享按钮（文本）；  
 });

让它成为你自己的

再次想想你的用户——他们为什么要突出显示文本？一旦进入用户的脑海，您的想象力就会受到限制，因为您可以为他们提供便利。

奖励：输入 Konami 代码时奖励用户

只是为了好玩，为什么不在您的网站上放一些复活节彩蛋呢？这 科乐美代码 正如您在下面的代码段中看到的那样，这是一个显而易见的实现，并且不需要太多实现。

_常量_ 按下键 = [];  
 _常量_ konamiCode = [  
 “向上箭头”，  
 “向上箭头”，  
 “向下箭头”，  
 “向下箭头”，  
 “左箭头”，  
 “右箭头”，  
 “左箭头”，  
 “右箭头”，  
 “乙”，  
 “一个”，  
 ];  
 _让_ 暂停;  
 window.addEventListener("keyup", ( _e_ ) _= >_ {  
 清除超时（超时）；  
 超时 = setTimeout(() _= >_ {  
 pressKeys.splice(0,pressedKeys.length);  
 }, 2500);  
 按下按键.push( _e_ 。钥匙）;  
 if (pressedKeys.join("").includes(konamiCode.join(""))) {  
 清除超时（超时）；  
 alert('恭喜！请接受这个奖杯')  
 }  
 });

让它成为你自己的

JavaScript 警报可能不是庆祝用户发现这个复活节彩蛋的最有趣的方式。您可以为某些商品提供小幅折扣，在他们的个人资料中添加徽章（可能包括他们输入代码的速度？）或向他们发送一封夸大其卓越性的顶级电子邮件。

结论

构建和浏览网页应该很有趣，我希望这篇文章能给你一些新的想法，让你在下一个项目中得到启发。

如果您对如何使用这些事件有任何其他想法；或一些使用我未列出的事件的新颖方法，请在评论中分享。

如果您喜欢这篇文章，请考虑给它一个掌声并关注我以获得更多相同的内容。

谢谢阅读！

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/37736/49011818