Dojo learning notes (8. dojo. Event & dojo. event. Topic & dojo. event. browser)

Dojo learning notes (8. dojo. Event & dojo. event. Topic & dojo. event. browser)

Module: dojo. Event

I finally got into the learning of the famous dojo event processing system. Before learning, I suggest you first study the relevant knowledge of AOP.

Dojo. event. Connect

Bind the specified method to the method of the specified object

Usage example:

Simple binding 1

Function doonclick1 ()
{
Alert ("clicked! ");
}
Dojo. event. Connect (Dojo. byid ("inputtest"), "onclick", "doonclick1 ");

Simple binding 2

OBJ = {doonclick2: function () {alert ("clicked! ");}}
Dojo. event. Connect (Dojo. byid ("inputtest"), "onclick", OBJ, "doonclick2 ");

If you need to bind multiple events, you will see the convenience of dojo.

Obj2 = {doonclick2: function () {alert ("clicked! ");}}
Dojo. event. Connect (Dojo. byid ("inputtest"), "onclick", OBJ, "doonclick2 ");
Dojo. event. Connect (Dojo. byid ("inputtest"), "onclick", obj2, "doonclick2 ");

Connect can bind methods of any object instead of DOM objects.

Dojo. event. Connect (OBJ, "doonclick2", "doonclick1"); // call doonclick1 () after obj. doonclick2 () is called ()

Dojo. event. connectbefore

By default, dojo. event. Connect is post-bound, while connectbefore is pre-bound. The binding method is executed before the specified method. The usage is consistent with that of connect.

Dojo. event. connectaround

Usage example:

Function aroundtest (Invocation ){
// Added hereCodeFor example, check parameters (Invocation. ARGs)
VaR result = invocation. Proceed ();
// Code can be added here, such as the result)
Return result;
}
Dojo. event. connectaround (Dojo. byid ("inputtest"), "onclick", "aroundtest ");

Dojo. event. connectonce
Speaking of this function, I really thought about it for a long time. intuitively, I thought of it as executeonce, and the results of the test made me almost confused.
Connectonce means to ensure only one binding, to avoid repeated execution problems caused by repeated binding.

Dojo. event. Disconnect

Unbind. The call parameters are the same as those of connect to unbind the previous binding operation.

Dojo. event. Log

Logs are automatically recorded after the specified method of the specified object is executed.

Usage example:

Dojo. event. Log (OBJ, "doonclick"); // logs are recorded when obj. doonclick is called. "Debug: ([object]). doonclick :"

You can also write:

Dojo. event. Log ({srcobj: OBJ, srcfunc: "doonclick "});

Dojo. event. kwconnect

Kwconnect supports more flexible binding, for example, delayed execution binding.

Usage example:

Dojo. event. kwconnect ({
Srcobj: dojo. byid ("inputtest "),
Srcfunc: "onclick ",
Adviceobj: OBJ,
Advicefunc: "doonclick2 ",

Type: "before", // The default value is "after". Optional: "before", "around". Note: type is used to determine advicefunc behavior, if it is "und", aroundfunc will be invalid
Aroundobj: NULL,
Aroundfunc: NULL, // If aroundfunc is specified, it will intercept advicefunc, but when the type is "around", aroundfunc will not execute
Once: false, // The default value is false. Repeated binding is allowed.
Delay: 3000, // after a delay of 3 seconds, execute advicefunc
Rate: 0, // the slaveSource codeWhat does it do?
Advicemsg: false // The Source Code does not understand the role
});

Dojo. event. kwdisconnect

Used to unbind from the specified kwconnect

Module: dojo. event. Topic

Both the topic mechanism and the advice mechanism can bind events, but it is clear that topics are more suitable for handling multiple bindings.
Publish a topic. The user-subscribed mechanism is a typical observer model.

Dojo. event. Topic. registerpublisher

Register the topic publisher

Usage example:

Dojo. event. Topic. registerpublisher ("mytopic", OBJ, "doonclick2 ");

Dojo. event. Topic. subscribe

Subscribe topic

Usage example:

Dojo. event. Topic. subscribe ("mytopic", "test"); // After obj. doonclick2 () is executed, test () is automatically executed ()

Dojo. event. Topic. Unsubscribe

Unsubscribe topic

Usage example:

Dojo. event. Topic. Unsubscribe ("mytopic", "test ");

Dojo. event. Topic. Destroy

Delete a topic. All subscriptions to this topic are invalid.

Usage example:

Dojo. event. Topic. Destroy ("mytopic ");

Module: dojo. event. Browser

Dojo. event. browser. addlistener

Add listener

Usage example:

Function listener ()
{
Alert ("OK ");
}
Dojo. event. browser. addlistener (document, 'mousedown ', listener); // you can add "on" to the event name, or "on" to the event name"
Dojo. event. browser. addlistener (document, 'onmousedown', listener, true); // true indicates that the event is not controlled by the upper-layer element.

Dojo. event. browser. removelistener

Clear listener (this method seems to be invalid)

Dojo. event. browser. calllistener

Call listener

Usage example:

Dojo. event. browser. calllistener (listener, document );

Dojo. event. browser. stoppropagation

Prevent event Propagation

Usage example:

Dojo. event. browser. stoppropagation ();

Dojo. event. browser. preventdefault

Set the return value of the current event to false.

Usage example:

Dojo. event. browser. preventdefault ();

Dojo. event. browser. Keys

Key definition:
Key_backspace: 8,
Key_tab: 9,
Key_enter: 13,
Key_shift: 16,
Key_ctrl: 17,
Key_alt: 18,
Key_pause: 19,
Key_caps_lock: 20,
Key_escape: 27,
Key_space: 32,
Key_page_up: 33,
Key_page_down: 34,
Key_end: 35,
Key_home: 36,
Key_left_arrow: 37,
Key_up_arrow: 38,
Key_right_arrow: 39,
Key_down_arrow: 40,
Key_insert: 45,
Key_delete: 46,
Key_left_window: 91,
Key_right_window: 92,
Key_select: 93,
Key_f1: 112,
Key_f2: 113,
Key_f3: 114,
Key_f4: 115,
Key_f5: 116,
Key_f6: 117,
Key_f7: 118,
Key_f8: 119,
Key_f9: 120,
Key_f10: 121,
Key_f11: 122,
Key_f12: 123,
Key_num_lock: 144,
Key_scroll_lock: 145

Dojo. event. browser. currentevent

The last event has the following attributes:

Altkey // check the status of the Alt key. The value is true when the Alt key is pressed.
Button // check the pressed mouse key. 0: No buttons, 1: left-click, 2: Right-click, 3: left/right, 4: Center, 5: Left and middle, 6. Right-click and select the intermediate key. 7. Press all keys.
// This attribute is only used for onmousedown, onmouseup, and onmousemove events. For other events, no matter the mouse status, 0 (such as onclick) is returned)
Clientx // return the X coordinates of the mouse in the client area of the window
Clienty // return the Y coordinate of the mouse in the client area of the window
Ctrlkey // check the status of the ctrl key. The value is true when the ctrl key is pressed.
Fromelement // detects the elements that the mouse leaves when the onmouseover and onmouseout events occur.
Keycode // detects the internal code corresponding to the keyboard event. It is valid only when the type is keydown, keyup, or keypress.
Offsetx // check the horizontal coordinates of the mouse position relative to the object that triggers the event
Offsety // check the vertical coordinates of the mouse position relative to the trigger event object
Propertyname // set or return the name of the attribute changed by the element. You can use the onpropertychange event to obtain the value of propertyname.
Screenx // detect the horizontal position of the mouse relative to the user's screen
Screeny // detect the vertical position of the mouse relative to the user's screen
Shiftkey // check the status of the shift key. When the Shift key is pressed, the value is true.
Srcelement // return the element of the trigger event
Srcfilter // returns the filter that triggers the onfilterchange event.
Toelement // detects the elements that the mouse enters when the onmouseover and onmouseout events occur.
Type // return the event name without the "on" prefix, such as click and mousedown.
X // returns the X axis coordinate of the upper-level element of the position attribute relative to the CSS attribute. If there is no upper-level element with the position attribute in the CSS attribute, the body element is used as the reference object by default.
Y // return the Y axis coordinate of the parent element of the position attribute relative to the CSS attribute. If there is no upper-level element with the position attribute in the CSS attribute, the body element is used as the reference object by default.
Target // same as srcelement
Currenttarget
Layerx // same as offsetx
Layery // same as offsety
Pagex // The same as clientx when no horizontal scroll bar exists
Pagey // The same as clienty in the case of no horizontal scroll bar
Relatedtarget // valid only when type is Mouseover or mouseout
Keys // The same as Dojo. event. browser. Keys. It is valid only when the type is keydown, keyup, or keypress.
Charcode // key value, valid only when type is keypress

Dojo. event. browser. isevent

Determines whether the specified object is an event object.

Usage example:

Dojo. event. browser. isevent (Dojo. event. browser. currentevent); // returns true if the value of dojo. event. browser. currentevent is not null.