jquery 事件执行检测代码


Posted in Javascript onDecember 09, 2009

前两天做城市搜索的时候,我对搜索按钮绑定了事件,如果输入栏内的文字不符合要求就用标签提示(标签展示出来后对document绑定click,点击后隐藏标签)并使输入栏获得焦点。就这样一个小功能我调试了、3个多小时,IE 里表现的是标签一闪而过,后来发现是按钮的点击事件和input的交替出发了多次,估计是事件回退发生的,用了preventDefault() 和 stopPropagation()两个函数后修正了问题。虽然问题解决了,但是事件的执行顺序真是很难掌握呀,于是我做了个简单的事件监测函数,可以自动记录页面事件触发,见如下代码(首先肯定要引入jquery!...)

//事件执行监测 
function eventsMonitor(op){ 
var defaultSetting = { 
eventsStr: "click focus blur", 
splitStr: " ", 
css:{ 
"border":"1px red solid", 
"z-index":9000000, 
"background":"white", 
"position":"absolute", 
width:400, 
height:200, 
"overflow-x":"hidden", 
"overflow-y":"auto" 
} 
}; 
var ops = $.extend(true,defaultSetting,op); 
$('<div id="DivForLogEvents"><div></div><div>').appendTo("body").css(ops.css); 
var $infolog = $("#DivForLogEvents div:eq(0)"); 
$.each(ops.eventsStr.split(ops.splitStr),function(i,v){ 
if(v != 'resize') 
$("*:not('#DivForLogEvents')").bind(v, function(e){ 
if(!$(e.target).is("#DivForLogEvents") && !$(e.target).is($infolog)){ 
$infolog.append((e.target.nodeName||" ") + "->" + (e.target.id||e.target.Name||" ") + " "+v+" event!<br>"); 
$("#DivForLogEvents:not(:animated)").animate({scrollTop:$infolog.height()},300); 
} 
}); 
else 
$(window).bind('resize', function(e){ 
if(!$(e.target).is("#DivForLogEvents") && !$(e.target).is($infolog)){ 
$infolog.append((e.target.nodeName||" ") + "->" + (e.target.id||e.target.Name||" ") + " "+v+" event!<br>"); 
$("#DivForLogEvents:not(:animated)").animate({scrollTop:$infolog.height()},300); 
} 
}); 
}); 
}

调用方法示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Untitled Document</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><!--Google CDN--> 
<script type="text/javascript" src="eventsMonitor.js"></script><!--Google CDN--> 
<script type="text/javascript"> $(document).ready(function(){ 
eventsMonitor({ 
css:{top:0,right:20}, 
eventsStr:"click blur focus select scroll mousewheel resize" 
}); 
$("#info").click(function(){$(this).text($("#DivForLogEvents").outerHeight());}); 
}); 
</script> 
</head> 
<body> 
Hello world 
<img src="/upload/2009-12/20091209042029557.gif" /> 
<input type="text" id="name" value="测试" /> 
<span id="info">ffffffff</span> 
</body> 
</html>

效果截图

jquery 事件执行检测代码

Javascript 相关文章推荐
javascript onmouseout 解决办法
Jul 17 Javascript
javascript时区函数介绍
Sep 14 Javascript
jquery定时滑出可最小化的底部提示层特效代码
Oct 02 Javascript
可恶的ie8提示缺少id未定义
Mar 20 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
Apr 04 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
Jun 17 Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 Javascript
微信小程序 五星评分的实现实例
Aug 04 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
Oct 24 Javascript
通过微信公众平台获取公众号文章的方法示例
Dec 25 Javascript
小程序自动化测试的示例代码
Aug 11 Javascript
JS创建自定义对象的六种方法总结
Dec 15 Javascript
为指定元素增加样式的js代码
Dec 09 #Javascript
javascript setTimeout和setInterval 的区别
Dec 08 #Javascript
javascript OFFICE控件测试代码
Dec 08 #Javascript
JavaScript Cookie 直接浏览网站分网址
Dec 08 #Javascript
JavaScript Cookie显示用户上次访问的时间和次数
Dec 08 #Javascript
JavaScript 利用Cookie记录用户登录信息
Dec 08 #Javascript
JavaScript Cookie的读取和写入函数
Dec 08 #Javascript
You might like
ZF等常用php框架中存在的问题
2008/01/10 PHP
那些年我们错过的魔术方法(Magic Methods)
2014/01/14 PHP
php实现的CSS更新类实例
2014/09/22 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
laravel unique验证、确认密码confirmed验证以及密码修改验证的方法
2019/10/16 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
js的闭包的一个示例说明
2008/11/18 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
AngularJS  ng-repeat遍历输出的用法
2017/06/19 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
python连接oracle数据库实例
2014/10/17 Python
python实现抖音点赞功能
2019/04/07 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
Pycharm如何运行.py文件的方法步骤
2020/03/03 Python
Python hashlib模块的使用示例
2020/10/09 Python
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
实体的生命周期
2013/08/31 面试题
英语道歉信范文
2014/01/09 职场文书
《黄河颂》教学反思
2014/02/07 职场文书
婚礼答谢宴主持词
2014/03/14 职场文书
求职信模板
2014/05/23 职场文书
党的群众教育实践活动实施方案
2014/06/12 职场文书
横幅标语大全
2014/06/17 职场文书
敬老院标语
2014/06/27 职场文书
爱牙日活动总结
2014/08/29 职场文书
八一建军节营销活动方案
2014/08/31 职场文书
2015年保险公司内勤工作总结
2015/05/23 职场文书
如何正确理解python装饰器
2021/06/15 Python
python opencv检测直线 cv2.HoughLinesP的实现
2021/06/18 Python
Java 超详细讲解数据结构中的堆的应用
2022/04/02 Java/Android