JS adds events to DOM
In the native environment, it is DOM There are many ways to add event handlers:
<input type="button" name ="btn" value="Click..." id="btn" onclick="btnClick" />
Or use the following method:
<input type="button " name="btn" value="click..." id="btn" /> < script type="text/javascript"> function btnClick() {alert( "I was clicked");} document.getElementById(< /span>"btn< span style="margin:0px; padding:0px; line-height:1.5!important; background-color:rgb(245,245,245)">").onclick = btnClick;script>
the above two The method has obvious drawbacks: each event can only specify one event processing function, in addition, if you want to remove an event processing function, it seems that you can only use:
document.getElementById("btn").onclick = null;
or
< div class="cnblogs_code" style="margin:5px 0px; padding:5px; border:1px solid rgb(204,204,204); overflow:auto; font-family:'Courier New'!important; background-color:rgb(245,245,245) ">
document.getElementById("btn").onclick = "";
This approach is extremely unfavorable for modular programming. The W3C DOM Level2 standard has a new event model. The new event model allows multiple processing methods to be added to the event and adds an event bubbling mechanism.
<input type="button" name="btn " value="Click..." id="btn" /> <script type="text/javascript "> function btnClick() {alert("I was clicked span >");} document.getElementById("btn").addEventListener("click", btnClick); script>
document.getElementById("btn ").removeEventListener("click", btnClick);
Dojo uses the connect method to add event handlers to the DOM.
<script typ e="text/javascript"> function btnClick() {alert(" I was clicked");} var btn = dojo.byId("btn"); dojo.connect(btn, "onclick", btnClick ); script>
< /d iv>
The official explanation of the dojo.connect method: dojo.connect is the core event handling and delegation method in Dojo. It allows one function to “listen in” on the execution of any other, triggering the second whenever the first is called. Many listeners may be attached to a function, and source functions may be either regular function calls or DOM events.
The translation is probably: dojo.connect is the core of the event handling and delegation methods in dojo. It allows a method to “monitor” the execution of another method, and trigger the monitoring method when the monitored method is called. A method can have many listeners attached, and the source method can be a regular method or a DOM event.
In this way, connect can also monitor the execution of other methods. Let’s do a test:
< img src="/wp-content/uploadshttp:/img.voidcn.com/vcimg/static/loading.png" alt="copy code" style="margin:0px; padding:0px; max-width:100%; border:none!important" d="5338" s="48f_eef" t="gif">
<input type="button" name="btn" value="click..." id="btn" /> <script type="text/javascript"> function sayHello() {alert("Hello ");} function sayWorld() {alert("world~");} dojo.addOnLoad(function () {var btn =< span style="margin:0px; padding:0px; line-height:1.5!important; background-color:rgb(245,245,245)"> dojo.byId("btn"); btn.addEventListener("click", sayHello) ; dojo.connect("sayHello", sayWorld); }); script>
The execution effect of this code is that when the button is clicked, a Hello string will pop up first, and when the dialog box is closed , Another world dialog box will pop up.
Not everyone likes this approach, but in this way, the code will be easier to read.
If you need to remove an event, you need to call the dojo.disconnect method, this method requires a dojo.connect method return value as a parameter:< /p>
var handle = dojo.connect(btn, "onclick", btnClick); dojo.disconnect(handle);
Subscribe and publish
This is a feature of dojo that is worth paying attention to, which makes it easy to interact with each dojo component . This function is very convenient to use:
<input type="text" name="txtMessage" value="" id="txtMessage" /> <input type="button" name="btn" value="发布…" id="btnPublish" /> <script type="text/javascript"> dojo.addOnLoad(function () { //订阅MesagePublish主题 dojo.subscribe("MessagePublish", function (msg) { alert(msg); }); var btnPublish = dojo.byId("btnPublish"); dojo.connect(btnPublish, "onclick", function () { dojo.publish("MessagePublish", dojo.byId("txtMessage").value); }); }); script>
以上代码的运行效果如图：
如要取消一个订阅，需要使用dojo.unsubscribe方法，这个方法需要一个由dojo.subscribe返回的句柄，其处理方式和dojo.connect、dojo.disconnect 的方式一样。
<input type="button" name="btn" value="点击…" id="btn" onclick="btnClick" />
<input type="button" name="btn" value="点击…" id="btn" /> <script type="text/javascript"> function btnClick() { alert("我被点击了"); } document.getElementById("btn").onclick = btnClick;script>
document.getElementById("btn").onclick = null;
document.getElementById("btn").onclick = "";
<input type="button" name="btn" value="点击…" id="btn" /> <script type="text/javascript"> function btnClick() { alert("我被点击了"); } document.getElementById("btn").addEventListener("click", btnCli ck); script>
document.getElementById("btn").removeEventListener("click", btnClick);
<script type="text/javascript"> function btnClick() { alert("我被点击了"); } var btn = dojo.byId("btn"); dojo.connect(btn, "onclick", btnClick); script>
<input type="button" name="btn" value="点击…" id="btn" /> <script type="text/javascript"> function sayHello() { alert("Hello "); } function sayWorld() { alert("world~"); } dojo.addOnLoad(function () { var btn = dojo.byId("btn"); btn.addEventListener("click", sayHello); dojo.connect("sayHello", sayWorld); }); script>
var handle = dojo.connect(btn, "onclick", btnClick); dojo.disconnect(handle);
<input type="text" name="txtMessage" value="" id="txtMessage" /> <input type="button" name="btn" value="发布…" id="btnPublish" /> <script type="text/javascript"> dojo.addOnLoad(function () { //订阅MesagePublish主题 dojo.subscribe("MessagePublish", function (msg) { alert(msg); }); var btnPublish = dojo.byId("btnPublish"); dojo.connect(btnPublish, "onclick", function () { dojo.publish("MessagePublish", dojo.byId("txtMessage").value); }); }); script>
