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 相关文章推荐
js文件Cookie存取值示例代码
Feb 20 Javascript
JS+CSS实现的拖动分页效果实例
May 11 Javascript
jquery实现简单的二级导航下拉菜单效果
Sep 07 Javascript
JS弹出窗口插件zDialog简单用法示例
Jun 12 Javascript
JS转换HTML转义符的方法
Aug 24 Javascript
js中事件对象和事件委托的介绍
Jan 21 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
Apr 22 Javascript
layui插件表单验证提交触发提交的例子
Sep 09 Javascript
vue-i18n实现中英文切换的方法
Jul 06 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 Javascript
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
JavaScript实现前端网页版倒计时
Mar 24 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
PHP生成带有雪花背景的验证码
2006/10/09 PHP
利用PHP和AJAX创建RSS聚合器的代码
2007/03/13 PHP
url decode problem 解决方法
2011/12/26 PHP
PHP和JavaScrip分别获取关联数组的键值示例代码
2013/09/16 PHP
PHP在linux上执行外部命令的方法
2017/02/06 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
JS动态获取当前时间,并写到特定的区域
2013/05/03 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
2014/04/29 Javascript
ECMAScript 5中的属性描述符详解
2015/03/02 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
webuploader分片上传的实现代码(前后端分离)
2018/09/10 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
python利用微信公众号实现报警功能
2018/06/10 Python
python将list转为matrix的方法
2018/12/12 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
简单了解python元组tuple相关原理
2019/12/02 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
python实现五子棋程序
2020/04/24 Python
python 实现 hive中类似 lateral view explode的功能示例
2020/05/18 Python
Django多数据库联用实现方法解析
2020/11/12 Python
CSS3 RGBA色彩模式使用实例讲解
2016/04/26 HTML / CSS
GetYourGuide台湾:预订旅游活动、景点和旅游项目
2019/06/10 全球购物
化妆师职业生涯规划书
2014/02/16 职场文书
我们的节日清明节活动方案
2014/03/05 职场文书
幼儿园母亲节活动方案
2014/03/10 职场文书
食品安全承诺书
2014/05/22 职场文书
水浒传读书笔记
2015/06/25 职场文书
你会写请假条吗?
2019/06/26 职场文书
PostgreSQL数据库创建并使用视图以及子查询
2022/04/11 PostgreSQL
PostgreSQL聚合函数介绍以及分组和排序
2022/04/12 PostgreSQL
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server