web前端之dojo实际应用及开发二：事件处理（附有源码）

来源：互联网发布：淘宝评价时间是多久编辑：程序博客网时间：2024/05/16 09:26

web前端之dojo实际应用及开发二：事件处理（附有源码）

现在我们开始学习dojo 中的事件处理：

附加函数到 DOM 事件（dojo.connect）：

<html><head>    <title>dojo</title></head><body><h1>dojo</h1><div id="message">This is a DIV element with id attribute message.</div><ul id="list">    <li>This is the first item in a list</li>    <li class="highlight">This is the second item in a list</li>    <li>This is the third item in a list</li></ul><script src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"></script><script>var message = dojo.byId("message");dojo.connect(message, "onclick", function() {    alert(message.innerHTML);});</script></body></html>

不知道如何配置的查看上一篇

dojo.connect(哪个元素，对应的鼠标动作, function() {    需要运行的事件});

<html><head>    <title>dojo</title></head><body><h1>dojo</h1><div id="message">This is a DIV element with id attribute message.</div><ul id="list">    <li>This is the first item in a list</li>    <li class="highlight">This is the second item in a list</li>    <li>This is the third item in a list</li></ul><script src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"></script><script>dojo.query("#list li").forEach(function(item) {//对每一个li进行下面操作    dojo.connect(item, "onclick", function() {//当前li被点击之后运行下面方法        dojo.style(item, {            fontWeight: "bold"         });        //也可以使用下面这种方式改变css样式        // dojo.query(item).style({        //     fontWeight: "bold"         // });    });});</script></body></html>

也可以书写成这样：

<html><head>    <title>dojo</title></head><body><h1>dojo</h1><div id="message">This is a DIV element with id attribute message.</div><ul id="list">    <li>This is the first item in a list</li>    <li class="highlight">This is the second item in a list</li>    <li>This is the third item in a list</li></ul><script src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"></script><script>dojo.query("#list li").onclick(function(e) {    dojo.style(e.target, {        fontWeight: "bold"    });});</script></body></html>

e.target不知道什么意思，学习资料上没有说，等我后续查到了，再来补充。如果有小伙伴知道的，请留言，我进行相应的修改。

dojo.connect连接其他函数：

<html><head>    <title>dojo</title></head><body><h1>dojo</h1><div id="message">This is a DIV element with id attribute message.</div><ul id="list">    <li>This is the first item in a list</li>    <li class="highlight">This is the second item in a list</li>    <li>This is the third item in a list</li></ul><script src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"></script><script>function toggleImage() {}function callAjax() {}function handleResponse() {}dojo.connect(callAjax, toggleImage);dojo.connect(handleResponse, toggleImage);//这种书写相当于,以下：function toggleImage() {}function callAjax() {    toggleImage();}function handleResponse() {    toggleImage();}</script></body></html>

这样书写，一来方便后续开发的时候进行对应的修改，二来清晰明了，便于加强开发的逻辑

订阅与发布主题(dojo.subscribe、dojo.publish)：

<html><head>    <title>dojo</title></head><body><h1>dojo</h1><div id="message">This is a DIV element with id attribute message.</div><ul id="list">    <li>This is the first item in a list</li>    <li class="highlight">This is the second item in a list</li>    <li>This is the third item in a list</li></ul><script src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"></script><script>dojo.subscribe("printName", function(msg) {    console.log("The person's name is: "+msg.first_name+" "+msg.last_name);});dojo.publish("printName", [    {        first_name: "Joe",        last_name: "Lennon"    }]);</script></body></html>

首先dojo.subscribe订阅一个叫做“printName”的主题，其里面的内容为function(msg){}。然后dojo.publish进行发布“printName”的主题，dojo.subscribe传递里面相应的格式，dojo.publish针对于此对dojo.subscribe里面的参数一一赋值。

相关学习：
web前端之dojo实际应用及开发六：页面布局（附有源码）
web前端之dojo实际应用及开发五：丰富的用户界面（附有源码）
web前端之dojo实际应用及开发四：面向对象开发[关键]（附有源码）
web前端之dojo实际应用及开发三：dojo.xhr* 增强 Ajax（附有源码）
web前端之dojo实际应用及开发二：事件处理（附有源码）
web前端之dojo实际应用及开发一：开始dojo（附有源码）
web前端之Dojo与jQuery综合比较分析
web前端之dojo(用javascript语言实现的开源DHTML工具包)

1 0