jquery event execution detection code_jquery

When doing city search two days ago, I bound an event to the search button. If the text in the input field does not meet the requirements, I will use a label prompt (bind click to the document after the label is displayed, and hide the label after clicking) and make the input The column gets focus. I debugged such a small function for more than 3 hours. IE showed that the label flashed by. Later, I found that the button click event and the input were alternately triggered multiple times. It is estimated that the event rollback occurred. Use The problem was corrected after adding the preventDefault() and stopPropagation() functions. Although the problem is solved, the execution order of events is really difficult to master, so I made a simple event monitoring function that can automatically record page event triggers, see the following code (jquery must be introduced first!...)

Copy code The code is as follows:

//Event execution monitoring
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">

').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!
");
$("#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!
");
$("#DivForLogEvents:not(:animated)").animate({scrollTop:$infolog.height() },300);
}
});
});
}

Example of calling method

Copy code The code is as follows:

< ;head>


< ;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">





Hello world


ffffffff

Screenshot of effect

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn