When writing Web applications or Web Ajax functions, we often need to handle events. jquery has encapsulated events perfectly, but sometimes the event execution sequence remains slightly different.
When I was doing a city search two days ago, I bound an event to the search button. If the text in the input column does not meet the requirements, I will use a tag prompt (after the tag is displayed, I will bind a click to the document and click it to hide it.
Hide tags) and make the input column focus. I have debugged such a small function for more than three hours. In IE, the label flash, and later I found that the button clicking event and input alternate.
Multiple times, it is estimated that event rollback occurred. The problem was corrected after the preventDefault () and stopPropagation () functions were used. Although the problem is solved, it is really difficult to execute the event sequence.
Master, so I made a simple event monitoring function that can automatically record page event triggering. See the following code (jquery must be introduced first !...)
<! 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 = gbk "> <title> Untitled Document </title> <script type =" text/javascript "src =" http://www.bkjia.com/ Uploads/common/jquery-1.3.2.min.js "> </script> <script type =" text/javascript "> // 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 = "DivForLogEven Ts "> <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 (! Certificate (e.tar get). is ("# DivForLogEvents ")&&! Certificate (e.target).is($infolog={$infolog.append(e.tar get. nodeName | "") + "->" + (e.tar get. id | e.tar get. Name | "") + "" + v + "event! <Br> "); $ (" # DivForLogEvents: not (: animated )"). animate ({scrollTop: $ infolog. height ()}, 300) ;}}); else $ (window ). bind ('resize', function (e) {if (! Certificate (e.tar get). is ("# DivForLogEvents ")&&! Certificate (e.target).is($infolog={$infolog.append(e.tar get. nodeName | "") + "->" + (e.tar get. id | e.tar get. Name | "") + "" + v + "event! <Br> "); $ (" # DivForLogEvents: not (: animated )"). animate ({scrollTop: $ infolog. height () }, 300) ;}}) ;}</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>
Tip: the code can be modified before running!
Author blog: http://www.cnblogs.com/cfanseal/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
