关键词：
【中文标题】如何使用 javascript/jquery 编写 onshow 事件？【英文标题】：How to write onshow event using javascript/jquery? 【发布时间】：2010-11-28 18:16:14 【问题描述】：我的页面上有一个锚标记，我想要一个附加到它的事件，该事件将在此元素的显示发生变化时触发。
我该如何编写这个活动？并在此元素的显示发生变化时捕获？
【问题讨论】：
【参考方案1】：这是我在 onShow 上做的方式，作为一个 jQuery 插件。但是，它可能会也可能不会完全执行您正在执行的操作。
(function($)
$.fn.extend(
onShow: function(callback, unbind)
return this.each(function()
var _this = this;
var bindopt = (unbind==undefined)?true:unbind;
if($.isFunction(callback))
if($(_this).is(':hidden'))
var checkVis = function()
if($(_this).is(':visible'))
callback.call(_this);
if(bindopt)
$('body').unbind('click keyup keydown', checkVis);
$('body').bind('click keyup keydown', checkVis);
else
callback.call(_this);
);
);
)(jQuery);
您可以在 $(document).ready() 函数中调用它，并使用回调在元素显示时触发，就像这样。
$(document).ready(function()
$('#myelement').onShow(function()
alert('this element is now shown');
);
);
它通过将 click、keyup 和 keydown 事件绑定到 body 来检查元素是否显示，因为这些事件最有可能导致元素显示并且用户非常频繁地执行这些事件。这可能不是非常优雅，但可以完成工作。此外，一旦显示元素，这些事件就会与主体解除绑定，以免继续触发并降低性能。
【讨论】：
我不得不将 :visible 替换为if($(obj).is(':visible')) 中的 :hidden，但除此之外效果很好。
将 callback.call() 改为 callback.call(obj);其中注入了元素。如果我错了，请告诉我。【参考方案2】：
您不能直接在 JavaScript 中获得 onshow 事件。请记住，以下方法是非标准。
在 IE 中你可以使用
onpropertychange event
在元素的属性之后触发 变化
对于 Mozilla
你可以使用
watch
监视要分配的属性 一个值并在那个时候运行一个函数 发生。
【讨论】：
这个的标准是什么？【参考方案3】：你也可以覆盖 jQuery 的默认显示方法：
var orgShow = $.fn.show;
$.fn.show = function()
$(this).trigger( 'myOnShowEvent' );
orgShow.apply( this, arguments );
return this;
现在只需将您的代码绑定到事件：
$('#foo').bind( "myOnShowEvent", function()
console.log( "SHOWN!" )
);
【讨论】：
如果您知道您将使用.show()，这是一个非常酷的解决方案。但是，它不适用于所有显示元素的情况，无论是通过设置display:block、fadeIn()、slideDown() 等...虽然仍然是独一无二的。【参考方案4】：
此链接中的代码对我有用：http://viralpatel.net/blogs/jquery-trigger-custom-event-show-hide-element/
(function ($)
$.each(['show', 'hide'], function (i, ev)
var el = $.fn[ev];
$.fn[ev] = function ()
this.trigger(ev);
return el.apply(this, arguments);
;
);
)(jQuery);
$('#foo').on('show', function()
console.log('#foo is now visible');
);
$('#foo').on('hide', function()
console.log('#foo is hidden');
);
但是，首先调用回调函数，然后显示/隐藏元素。所以如果你有一些与同一个选择器相关的操作，需要在显示或隐藏后进行，临时的解决方法是添加几毫秒的超时。
【讨论】：
如何使用 Javascript/jQuery 确定图像是不是已加载？
】如何使用Javascript/jQuery确定图像是不是已加载？【英文标题】：HowcanIdetermineifanimagehasloaded,usingJavascript/jQuery?如何使用Javascript/jQuery确定图像是否已加载？【发布时间】：2010-09-2018:32:19【问题描述】：我正在编写一些Javascript来调... 查看详情
如何使用 jquery/javascript 将文本插入 json [重复]
】如何使用jquery/javascript将文本插入json[重复]【英文标题】：howtoinserttextintojsonusingjquery/javascript[duplicate]【发布时间】：2013-05-3002:03:43【问题描述】：如何使用jquery/javascript将文本插入json数组。假设我有数据文本文件格式123、456... 查看详情
如何使用 JavaScript/JQuery 创建一个简单的地图 [重复]
】如何使用JavaScript/JQuery创建一个简单的地图[重复]【英文标题】：HowtocreateasimplemapusingJavaScript/JQuery[duplicate]【发布时间】：2011-05-1322:00:06【问题描述】：如何创建此Java代码的JavaScript/JQuery等效项：Mapmap=newHashMap();//Doesn\'tnothavetobe... 查看详情
如何使用 JavaScript/jQuery 滚动到页面顶部？
】如何使用JavaScript/jQuery滚动到页面顶部？【英文标题】：HowtoscrolltotopofpagewithJavaScript/jQuery?【发布时间】：2011-05-1118:44:38【问题描述】：有没有办法用JavaScript/jQuery控制浏览器滚动？当我将页面向下滚动一半，然后触发重新加载... 查看详情
Rails如何检测是不是使用javascript / jQuery插入了部分
】Rails如何检测是不是使用javascript/jQuery插入了部分【英文标题】：Railshowtodetectifapartialwasinsertedusingjavascript/jQueryRails如何检测是否使用javascript/jQuery插入了部分【发布时间】：2012-10-0722:04:49【问题描述】：如何在javascript中检测当... 查看详情
如何使用 PHP 或 JavaScript/jQuery 禁用地址栏？
】如何使用PHP或JavaScript/jQuery禁用地址栏？【英文标题】：HowtodisableaddressbarusingPHPorJavaScript/jQuery?【发布时间】：2014-06-2906:59:38【问题描述】：如何禁用PHP或JavaScript/jQuery中的地址栏/url文本框？这可能吗？【问题讨论】：一般不... 查看详情
如何使用 Javascript/jQuery 使用新对象制作其他表单？
】如何使用Javascript/jQuery使用新对象制作其他表单？【英文标题】：HowtomakeadditionalformswithwithnewobjectsusingJavascript/jQuery?【发布时间】：2019-05-0200:11:48【问题描述】：在初始页面加载时，将收集当前用户的所有亮点并将每个亮点放... 查看详情
如何使用 javascript / jQuery 获取数据 ajax api 数组？
】如何使用javascript/jQuery获取数据ajaxapi数组？【英文标题】：howgetdataajaxapiarrayusingjavascript/jQuery?【发布时间】：2021-10-1421:36:03【问题描述】：如何使用javascript从列表api获取数据？我有列表使用json数据的api..但是当我从列表一中... 查看详情
如何使用 javascript/jquery 设置用户输入的样式
】如何使用javascript/jquery设置用户输入的样式【英文标题】：Howtolive-styleanuserinputusingjavascript/jquery【发布时间】：2012-02-1617:49:30【问题描述】：我正在寻找在javascript/jquery中制作实时样式器的库或建议。这个想法是我的用户有一... 查看详情
如何找出使用 javascript/jquery 调用函数的次数？
】如何找出使用javascript/jquery调用函数的次数？【英文标题】：HowdoIfindouthowmanytimesafunctioniscalledwithjavascript/jquery?【发布时间】：2022-01-2210:57:54【问题描述】：也许是一个奇怪的问题，但它是这样的：我有一个定期调用的函数，在... 查看详情
如何使用 Javascript (jQuery) 判断图像是不是具有特定的宽度/高度？ [复制]
】如何使用Javascript(jQuery)判断图像是不是具有特定的宽度/高度？[复制]【英文标题】：Howtotellifanimagehasbeengivenaspecificwidth/heightwithJavascript(jQuery)?[duplicate]如何使用Javascript(jQuery)判断图像是否具有特定的宽度/高度？[复制]【发布时... 查看详情
如何使用 Javascript/JQuery 在移动浏览器中限制点运算符（'.'）
】如何使用Javascript/JQuery在移动浏览器中限制点运算符（\\\'.\\\'）【英文标题】：Howtorestrictdotoperator(\'.\')inmobilebrowserusingJavascript/JQuery如何使用Javascript/JQuery在移动浏览器中限制点运算符（\'.\'）【发布时间】：2017-02-2212:14:18【问... 查看详情
如何使用 javascript/jquery/AJAX 调用 Django REST API？
】如何使用javascript/jquery/AJAX调用DjangoRESTAPI？【英文标题】：HowtocallDjangoRESTAPIsusingjavascript/jquery/AJAX?【发布时间】：2016-10-2306:31:02【问题描述】：我想使用Javascript、jQuery、AJAX在前端调用DjangoRestAPI。请求方法是POST但是当我看到API... 查看详情
如何使用 javascript/jquery 将大型 html 块附加到刀片文件？
】如何使用javascript/jquery将大型html块附加到刀片文件？【英文标题】：HowtoAppendlargehtmlblocktobladefilewithjavascript/jquery?【发布时间】：2019-03-1103:27:19【问题描述】：通过单击一个按钮，我想使用javascript/jquery将一大块HTML（例如表单... 查看详情
如何使用 Javascript、jQuery 对提交按钮应用多个操作？
】如何使用Javascript、jQuery对提交按钮应用多个操作？【英文标题】：HowToApplyMultipleActionsToASUBMITButtonWithJavascript,jQuery?【发布时间】：2019-05-0215:34:39【问题描述】：我目前有一个带有3个提交按钮的表单，这些按钮通过URL传递“FULLN... 查看详情
如何使用 javascript/jquery 在时间字符串中添加一秒
】如何使用javascript/jquery在时间字符串中添加一秒【英文标题】：Howtoaddonesecondtoatimestringwithjavascript/jquery【发布时间】：2012-10-0918:21:12【问题描述】：我正在尝试使用Javascript创建一个计时器，但我不知道如何在时间字符串中添加... 查看详情
如何使用 javascript/jquery 禁用表单中的所有内容？
】如何使用javascript/jquery禁用表单中的所有内容？【英文标题】：howcanIdisableeverythinginsideaformusingjavascript/jquery?【发布时间】：2011-03-2403:37:53【问题描述】：我有一个在层内弹出的表单，我需要将该表单内的所有内容设置为只读，... 查看详情
如何使用Javascript / jquery设置浏览器的时区[重复]
】如何使用Javascript/jquery设置浏览器的时区[重复]【英文标题】：Howtosetbrowser\'stimezoneusingJavascript/jquery[duplicate]【发布时间】：2016-12-1617:47:25【问题描述】：我在这方面经历了很多线程，看起来我们无法以编程方式更改浏览器的时... 查看详情