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 相关文章推荐
jquery JSON的解析方式示例介绍
Jul 27 Javascript
jquery处理json对象
Nov 03 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
Aug 16 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
Oct 24 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
利用PM2部署node.js项目的方法教程
May 10 Javascript
原生JS写Ajax的请求函数功能
Dec 22 Javascript
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
微信小程序常用的3种提示弹窗实现详解
Sep 19 Javascript
javascript设计模式之迭代器模式
Jan 30 Javascript
关于javascript中的promise的用法和注意事项(推荐)
Jan 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
Linux下 php5 MySQL5 Apache2 phpMyAdmin ZendOptimizer安装与配置[图文]
2008/11/18 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
豆瓣网的jquery代码实例
2008/06/15 Javascript
javaScript 简单验证代码(用户名,密码,邮箱)
2009/09/28 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
javascript setTimeout和setInterval计时的区别详解
2013/06/21 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
js实现的点击数量加一可操作数据库
2014/05/09 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
jQuery实现TAB选项卡切换特效简单演示
2016/03/04 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
jQuery 选择同时包含两个class的元素的实现方法
2016/06/01 Javascript
js获取一组日期中最近连续的天数
2017/05/25 Javascript
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
Python中使用socket发送HTTP请求数据接收不完整问题解决方法
2015/02/04 Python
python生成器表达式和列表解析
2016/03/10 Python
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
基于python及pytorch中乘法的使用详解
2019/12/27 Python
小橄榄树:Le Petit Olivier
2018/04/23 全球购物
自我评价个人范文
2013/12/16 职场文书
培训讲师邀请函
2014/01/10 职场文书
社区活动邀请函范文
2014/01/29 职场文书
中学生英语演讲稿
2014/04/26 职场文书
志愿者活动总结
2014/04/28 职场文书
个人综合鉴定材料
2014/05/23 职场文书
住房抵押登记委托书
2014/09/27 职场文书
建国大业观后感600字
2015/06/01 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
小学班级口号大全
2015/12/25 职场文书
对象析构函数__del__在Python中何时使用
2022/03/22 Python