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

最新推荐文章于 2017-07-25 00:12:23 发布

爸爸去哪了2之熊猫三胞胎

最新推荐文章于 2017-07-25 00:12:23 发布

阅读量605

点赞数 1

本文链接：https://blog.csdn.net/u014785563/article/details/53435101

版权

web前端同时被 3 个专栏收录

99 篇文章 1 订阅

订阅专栏

JavaScript

86 篇文章 0 订阅

订阅专栏

dojo

15 篇文章 0 订阅

订阅专栏

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里面的参数一一赋值。

爸爸去哪了2之熊猫三胞胎

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端之dojo实际应用及开发二：事件处理（附有源码）

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
复制链接

扫一扫

专栏目录