使用这 3 个未充分利用的 HTML 事件为您的网站添加一些风格
使用这 3 个未充分利用的 HTML 事件为您的网站添加一些风格
在网络上脱颖而出变得越来越困难，同时这样做也越来越重要。在这里，我收集了 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 版权协议，转载请附上原文出处链接和本声明
