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中最常用的继承模式 组合继承
Aug 12 Javascript
基于jQuery实现动态数字展示效果
Aug 12 Javascript
AngularJS基础 ng-src 指令简单示例
Aug 03 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
Mar 10 Javascript
简单谈谈js的数据类型
Sep 25 Javascript
详解react内联样式使用webpack将px转rem
Sep 13 Javascript
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
JS实现的碰撞检测与周期移动完整示例
Sep 02 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 09 Javascript
vue 给数组添加新对象并赋值
Apr 20 Vue.js
为指定元素增加样式的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
新52大事件
2020/03/03 欧美动漫
linux php mysql数据库备份实现代码
2009/03/10 PHP
PHP扩展编写点滴 技巧收集
2010/03/09 PHP
laravel 数据验证规则详解
2019/10/23 PHP
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
Script标签与访问HTML页面详解
2014/01/10 Javascript
javascript删除字符串最后一个字符
2014/01/14 Javascript
js获取IP地址的方法小结
2014/07/01 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
JQuery Ajax WebService传递参数的简单实例
2016/11/02 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
详解nuxt路由鉴权(express模板)
2018/11/21 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
jQuery 动态粒子效果示例代码
2020/07/07 jQuery
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
2020/12/02 Vue.js
小程序实现列表倒计时功能
2021/01/29 Javascript
[02:02]特效爆炸!DOTA2珍宝之瓶待你开启
2018/08/21 DOTA
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
canvas实现滑动验证的实现示例
2020/08/11 HTML / CSS
西班牙在线光学:Visual-Click
2020/06/22 全球购物
小松树教学反思
2014/02/11 职场文书
酒店保安领班职务说明书
2014/03/04 职场文书
班主任评语大全
2014/04/26 职场文书
国际贸易本科毕业生求职信
2014/09/26 职场文书
大国崛起日本观后感
2015/06/02 职场文书
单位同意报考证明
2015/06/17 职场文书
2016年学校十一国庆节活动总结
2016/04/01 职场文书