📄 the event system the dojo toolkit.mht
字号:
connecting=20
your functions. In the core package, you have both simple events (which =
use a=20
signal and slot system, similar to Qt's) and topics. In this section, =
you'll=20
learn the following:</P>
<UL>
<LI>how to connect functions to one another with =
<CITE>dojo.connect</CITE>,=20
<LI>what comes with an event object=20
<LI>how to connect functions with topics and even publish your own =
objects to=20
the topic=20
<LI>how to enjoy event-based programming </LI></UL>
<DIV class=3Dbook-navigation>
<UL class=3Dmenu>
<LI class=3Dleaf><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dij=
it-and-dojo/event-system/simple-connections-dojo-connect">Simple=20
Connections with dojo.connect</A>
<LI class=3Dcollapsed><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dij=
it-and-dojo/event-system/event-object">Event=20
Object</A>
<LI class=3Dleaf><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dij=
it-and-dojo/event-system/page-load-unload">Page=20
Load / Unload</A>
<LI class=3Dleaf><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dij=
it-and-dojo/event-system/publish-and-subscribe-events">Publish=20
and Subscribe Events</A></LI></UL>
<DIV class=3D"page-links clear-block"><A class=3Dpage-previous=20
title=3D"Go to previous page"=20
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dij=
it-and-dojo/writing-your-own-widget-class/testing-widgets-">=E2=80=B9=20
Testing Widgets for Accessibility</A><A class=3Dpage-up title=3D"Go to =
parent page"=20
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dij=
it-and-dojo-0">up</A><A=20
class=3Dpage-next title=3D"Go to next page"=20
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dij=
it-and-dojo/event-system/simple-connections-dojo-connect">Simple=20
Connections with dojo.connect =E2=80=BA</A></DIV></DIV></DIV>
<DIV class=3Dlinks>
<UL class=3D"links inline">
<LI class=3D"first book_printer"><A class=3Dbook_printer=20
title=3D"Show a printer-friendly version of this book page and its =
sub-pages."=20
href=3D"http://dojotoolkit.org/book/export/html/1179">Printer-friendly =
version</A>=20
<LI class=3Dcomment_forbidden><SPAN class=3Dcomment_forbidden><A=20
=
href=3D"http://dojotoolkit.org/user/login?destination=3Dnode/1179%2523com=
ment-form">Login</A>=20
or <A=20
=
href=3D"http://dojotoolkit.org/user/register?destination=3Dnode/1179%2523=
comment-form">register</A>=20
to post comments</SPAN>=20
<LI class=3D"last subscriptions_del_node"><A =
class=3Dsubscriptions_del_node=20
title=3D"Stop receiving an e-mail whenever a new comment is posted to =
this Book page."=20
=
href=3D"http://dojotoolkit.org/subscriptions/del/node/1179">Unsubscribe =
post</A>=20
</LI></UL></DIV></DIV>
<DIV id=3Dcomments><A id=3Dcomment-7452></A>
<DIV class=3Dcomment>
<H3 class=3Dtitle><A class=3Dactive=20
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dij=
it-and-dojo/event-system#comment-7452">Connecting=20
Dijit events versus Dojo events.</A></H3>
<DIV class=3Dsubmitted>Submitted by sjs on Fri, 10/19/2007 - =
01:12.</DIV>
<DIV class=3Dcontent>
<P>Using dojo.connect with Dijit widgets can be frustrating because of =
the (IMHO=20
subtle) distinction between dojo.byId and dijit.byId.<BR>Often dijit =
creates new=20
DOM nodes with a distinct id and events are attached to these nodes =
instead of=20
the intended node. In some case a DOM node of id=3D'id' doesn't exist in =
which=20
case dojo.byId returns null and dojo.connect attached the event to =
nothing (all=20
without complaint).</P>
<P>In the example=20
below<BR>dojo.connect(dijit.byId('middle'),'onclick',<I>function to=20
connect</I>);<BR>connects to the div labeled widgetid=3D'middle' which =
is where=20
mouse events are connected for a dojo.form.button<BR>where=20
as:<BR>dojo.connect(dojo.byId('middle'),'onclick',<I>function to=20
connect</I>);<BR>connects to the actual HMTL button (id=3D'middle') =
which will=20
never be called since the surrounding "div" (widgetid=3D"middle") =
intercepts the=20
mouse events.</P>
<P>Example HTML code:</P>
<P>
<DIV class=3Dgeshifilter><SPAN class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/div.html"><SPAN=20
class=3Dkw2><div</SPAN></A> dojotype=3D<SPAN =
class=3Dst0>"dijit.form.Button"</SPAN>=20
iconclass=3D<SPAN class=3Dst0>"mylIcon myInfo"</SPAN> <SPAN=20
class=3Dkw3>id</SPAN>=3D<SPAN class=3Dst0>"middle"</SPAN><SPAN=20
class=3Dkw2>></SPAN></SPAN><SPAN class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/span.html"><SPAN=20
class=3Dkw2><span></SPAN></A></SPAN><BR><SPAN class=3Dsc2><SPAN=20
class=3Dkw2></span></SPAN></SPAN><SPAN class=3Dsc2><SPAN=20
class=3Dkw2></div></SPAN></SPAN></DIV>
<P>Produces this html:</P>
<P>
<DIV class=3Dgeshifilter><SPAN class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/div.html"><SPAN=20
class=3Dkw2><div</SPAN></A> baseclass=3D<SPAN =
class=3Dst0>"dijitButton"</SPAN>=20
<SPAN class=3Dkw3>class</SPAN>=3D<SPAN class=3Dst0>"dijit dijitLeft =
dijitInline=20
dijitButton"</SPAN> dojoattachevent=3D<SPAN=20
class=3Dst0>"onclick:_onButtonClick,onmouseover:_onMouse,onmouseout:_onMo=
use,onmousedown:_onMouse"</SPAN>=20
<SPAN class=3Dkw3>style</SPAN>=3D<SPAN class=3Dst0>""</SPAN> =
widgetid=3D<SPAN=20
class=3Dst0>"middle"</SPAN><SPAN =
class=3Dkw2>></SPAN></SPAN><BR> =20
<SPAN class=3Dsc2><A =
href=3D"http://december.com/html/4/element/div.html"><SPAN=20
class=3Dkw2><div</SPAN></A> <SPAN class=3Dkw3>class</SPAN>=3D<SPAN=20
class=3Dst0>"dijitRight"</SPAN><SPAN =
class=3Dkw2>></SPAN></SPAN><BR> =20
<SPAN class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/button.html"><SPAN=20
class=3Dkw2><button</SPAN></A> <SPAN class=3Dkw3>class</SPAN>=3D<SPAN =
class=3Dst0>"dijitStretch dijitButtonNode dijitButtonContents"</SPAN> =
<SPAN=20
class=3Dkw3>disabled</SPAN>=3D<SPAN class=3Dst0>"false"</SPAN> =
dojoattachpoint=3D<SPAN=20
class=3Dst0>"focusNode,titleNode"</SPAN> <BR> =
=20
<SPAN class=3Dkw3>id</SPAN>=3D<SPAN class=3Dst0>"middle"</SPAN>=20
labelledby=3D<SPAN class=3Dst0>"middle_label"</SPAN> <SPAN=20
class=3Dkw3>name</SPAN>=3D<SPAN class=3Dst0>""</SPAN> role=3D<SPAN=20
class=3Dst0>"wairole:button"</SPAN> <SPAN =
class=3Dkw3>tabindex</SPAN>=3D<SPAN=20
class=3Dst0>"0"</SPAN> <SPAN class=3Dkw3>type</SPAN>=3D<SPAN =
class=3Dst0>"button"</SPAN>=20
<BR> valuenow=3D<SPAN =
class=3Dst0>""</SPAN>=20
wairole=3D<SPAN class=3Dst0>"button"</SPAN> waistate=3D<SPAN=20
class=3Dst0>"labelledby-middle_label"</SPAN><SPAN=20
class=3Dkw2>></SPAN></SPAN><BR> =
=20
<SPAN class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/div.html"><SPAN=20
class=3Dkw2><div</SPAN></A> <SPAN class=3Dkw3>class</SPAN>=3D<SPAN=20
class=3Dst0>"dijitInline myIcon myInfo"</SPAN><SPAN=20
class=3Dkw2>></SPAN></SPAN><BR> =
=20
<SPAN class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/span.html"><SPAN=20
class=3Dkw2><span</SPAN></A> <SPAN class=3Dkw3>class</SPAN>=3D<SPAN=20
class=3Dst0>"dijitButtonText"</SPAN> dojoattachpoint=3D<SPAN=20
class=3Dst0>"containerNode"</SPAN> <SPAN class=3Dkw3>id</SPAN>=3D<SPAN=20
class=3Dst0>"middle_label"</SPAN><SPAN =
class=3Dkw2>></SPAN></SPAN><BR> =20
=
=20
<SPAN class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/span.html"><SPAN=20
class=3Dkw2><span></SPAN></A></SPAN><BR> =
=20
<SPAN class=3Dsc2><SPAN =
class=3Dkw2></span></SPAN></SPAN><BR> =
=20
<SPAN class=3Dsc2><SPAN=20
class=3Dkw2></span></SPAN></SPAN><BR> =
=20
<SPAN class=3Dsc2><SPAN=20
class=3Dkw2></div></SPAN></SPAN><BR> =
<SPAN=20
class=3Dsc2><SPAN class=3Dkw2></button></SPAN></SPAN><BR> =
<SPAN=20
class=3Dsc2><SPAN class=3Dkw2></div></SPAN></SPAN><BR><SPAN =
class=3Dsc2><SPAN=20
class=3Dkw2></div></SPAN></SPAN></DIV>
<P>I believe this is the source of the "dijit" verus "dojo" event =
confusion.=20
Unless the user studies the source and the output html extensively this =
is=20
confusing. </P>
<P>Rule of thumb always identify dijit objects with dijit.byId and =
non-dijit=20
objects (dojo objects or DOM nodes) with dojo.byId </P>
<P>Regards<BR>Steve</P></DIV>
<DIV class=3Dlinks>
<UL class=3Dlinks>
<LI class=3D"first last comment_forbidden"><SPAN =
class=3Dcomment_forbidden><A=20
=
href=3D"http://dojotoolkit.org/user/login?destination=3Dnode/1179%2523com=
ment-form">Login</A>=20
or <A=20
=
href=3D"http://dojotoolkit.org/user/register?destination=3Dnode/1179%2523=
comment-form">register</A>=20
to post comments</SPAN> </LI></UL></DIV></DIV>
<DIV class=3Dindented><A id=3Dcomment-7465></A>
<DIV class=3Dcomment>
<H3 class=3Dtitle><A class=3Dactive=20
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dij=
it-and-dojo/event-system#comment-7465">When=20
you think about it...</A></H3>
<DIV class=3Dsubmitted>Submitted by Karl on Fri, 10/19/2007 - =
14:44.</DIV>
<DIV class=3Dcontent>
<P>dojo.byId() has always been shorthand for document.getElementById(), =
it has=20
nothing to do with Dojo really other than that we also allow full =
domNodes to be=20
passed to dojo.byId() (it just returns what you passed it in that =
case)... </P>
<P>To summarize how things have been since dojo 0.1/0.2 time....<BR>-- =
use=20
dojo.byId if you would have normally used =
document.getElementById()<BR>-- use=20
dijit.byId if you need the access any functions/properties of a =
widget<BR>-- dom=20
events are lowercase, all dojo/dijit events/functions are camelCased =
(ie:=20
'onClick' =3D=3D dijit onClick stub 'onclick' =3D=3D dom node onclick =
stub</P>
<P>-Karl</P></DIV>
<DIV class=3Dlinks>
<UL class=3Dlinks>
<LI class=3D"first last comment_forbidden"><SPAN =
class=3Dcomment_forbidden><A=20
=
href=3D"http://dojotoolkit.org/user/login?destination=3Dnode/1179%2523com=
ment-form">Login</A>=20
or <A=20
=
href=3D"http://dojotoolkit.org/user/register?destination=3Dnode/1179%2523=
comment-form">register</A>=20
to post comments</SPAN> </LI></UL></DIV></DIV></DIV></DIV><!-- =
/main_content region --></DIV></DIV>
<DIV class=3D"col-c content-region-container">
<DIV id=3Dsidebar-right-container></DIV></DIV><BR class=3Dclear></DIV>
<DIV class=3Dcols-a50b50 id=3Dafter-content-block>
<DIV class=3D"col-a content-region-container" =
id=3Dafter-content-block-1></DIV>
<DIV class=3D"col-b content-region-container" =
id=3Dafter-content-block-2><BR=20
class=3Dclear></DIV><BR class=3Dclear></DIV><BR clear=3Dall></DIV>
<DIV class=3Dcontent-region-container>
<DIV id=3Dnavigation-block>
<DIV id=3Dbreadcrumb-block>
<DIV id=3Dbreadcrumbs>
<DIV class=3Dbreadcrumb><A href=3D"http://dojotoolkit.org/">Home</A> =
=C2=BB <A=20
href=3D"http://dojotoolkit.org/book/dojo-book-0-9-0">The Book of =
Dojo</A> =C2=BB <A=20
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dij=
it-and-dojo-0">Part=20
3: JavaScript With Dojo and Dijit</A> =C2=BB The Event =
System</DIV></DIV></DIV>
<DIV class=3Dcols-abcd id=3Dmain-menu-block><!-- Block: menu -->
<DIV class=3D"block block-menu" id=3Dblock-menu-573>
<DIV class=3Dcontent>
<UL class=3Dmenu>
<LI class=3Dleaf id=3Dmenu-item-574><A title=3D"See the Dojo Toolkit =
in action!"=20
href=3D"http://dojotoolkit.org/demos">Demos</A>=20
<LI class=3Dexpanded id=3Dmenu-item-575><A=20
title=3D"Get started with the Dojo Toolkit, fast"=20
href=3D"http://dojotoolkit.org/docs/quickstart">Quick Start</A>=20
<UL class=3Dmenu>
<LI class=3Dleaf id=3Dmenu-item-576><A title=3D"Get the toolkit"=20
href=3D"http://dojotoolkit.org/downloads">Downloads</A>=20
<LI class=3Dleaf id=3Dmenu-item-577><A title=3D"See examples of the =
Dojo Toolkit"=20
href=3D"http://dojotoolkit.org/demos">Examples</A>=20
<LI class=3Dleaf id=3Dmenu-item-639><A=20
href=3D"http://dojotoolkit.org/spotlight">Spotlight</A> </LI></UL>
<LI class=3Dexpanded id=3Dmenu-item-578><A=20
href=3D"http://dojotoolkit.org/about">About</A>=20
<UL class=3Dmenu>
<LI class=3Dleaf id=3Dmenu-item-579><A=20
href=3D"http://dojotoolkit.org/about">Overview</A>=20
<LI class=3Dleaf id=3Dmenu-item-580><A=20
href=3D"http://dojotoolkit.org/about/features">Features</A>=20
<LI class=3Dleaf id=3Dmenu-item-581><A=20
href=3D"http://dojotoolkit.org/about/press">Press</A>=20
<LI class=3Dleaf id=3Dmenu-item-582><A=20
href=3D"http://dojotoolkit.org/about/contact">Contact</A>=20
</LI></UL></LI></UL></DIV></DIV><!-- Block: menu -->
<DIV class=3D"block block-menu" id=3Dblock-menu-589>
<DIV class=3Dcontent>
<UL class=3Dmenu>
<LI class=3Dexpanded id=3Dmenu-item-583><A=20
href=3D"http://dojotoolkit.org/downloads">Downloads</A>=20
<UL class=3Dmenu>
<LI class=3Dleaf id=3Dmenu-item-584><A=20
href=3D"http://dojotoolkit.org/downloads">Current releases</A>=20
<LI class=3Dleaf id=3Dmenu-item-585><A=20
href=3D"http://archive.dojotoolkit.org/nightly/">Nightly builds</A>=20
<LI class=3Dleaf id=3Dmenu-item-586><A=20
href=3D"http://archive.dojotoolkit.org/">Archives</A>=20
<LI class=3Dleaf id=3Dmenu-item-587><A=20
href=3D"http://trac.dojotoolkit.org/roadmap?show=3Dall">Change =
logs</A>=20
<LI class=3Dleaf id=3Dmenu-item-588><A=20
href=3D"http://dojotoolkit.org/downloads/releasenotes">Release =
notes</A>=20
</LI></UL>
<LI class=3Dexpanded id=3Dmenu-item-590><A=20
href=3D"http://dojotoolkit.org/news">News</A>=20
<UL class=3Dmenu>
<LI class=3Dleaf id=3Dmenu-item-591><A=20
href=3D"http://dojotoolkit.org/blog">Blogs</A>=20
<LI class=3Dleaf id=3Dmenu-item-592><A=20
=
href=3D"http://dojotoolkit.org/topics/news/announcements">Announcements</=
A>=20
<LI class=3Dleaf id=3Dmenu-item-593><A=20
href=3D"http://dojotoolkit.org/aggregator">Planet Dojo</A>=20
</LI></UL></LI></UL></DIV></DIV><!-- Block: menu -->
<DIV class=3D"block block-menu" id=3Dblock-menu-594>
<DIV class=3Dcontent>
<UL class=3Dmenu>
<LI class=3Dexpanded id=3Dmenu-item-595><A=20
href=3D"http://dojotoolkit.org/docs">Documentation</A>=20
<UL class=3Dmenu>
<LI class=3Dleaf id=3Dmenu-item-596><A=20
href=3D"http://dojotoolkit.org/docs/quickstart">Quick Start</A>=20
<LI class=3Dleaf id=3Dmenu-item-597><A=20
href=3D"http://dojotoolkit.org/book/dojo-book-0-9-0">The Book of =
Dojo</A>=20
<LI class=3Dleaf id=3Dmenu-item-598><A=20
href=3D"http://dojotoolkit.org/docs/portingguides">Porting =
Guides</A>=20
<LI class=3Dleaf id=3Dmenu-item-599><A =
href=3D"http://dojotoolkit.org/api">API=20
Reference</A>=20
<LI class=3Dleaf id=3Dmenu-item-632><A=20
href=3D"http://dojotoolkit.org/developer">Developer notes</A> =
</LI></UL>
<LI class=3Dexpanded id=3Dmenu-item-601><A=20
href=3D"http://dojotoolkit.org/support">Support</A>=20
<UL class=3Dmenu>
<LI class=3Dleaf id=3Dmenu-item-602><A=20
href=3D"http://dojotoolkit.org/support">General Information</A>=20
<LI class=3Dleaf id=3Dmenu-item-600><A=20
href=3D"http://dojotoolkit.org/support/faq">FAQ</A>=20
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -