1、前言
在Web界面中，用户点击按钮、选择下拉选项、移动鼠标都涉及到dom元素的事件机制。下面就来介绍一下Dojo中的事件绑定操作。
2、dojo/on模块绑定事件
我们就从最简单的按钮click事件入手，Dojo中的dojo/on模块可以实现dom元素的事件绑定，第一个参数为dom元素，第二个参数为事件名称，第三个参数为回调函数，dojo/on模块对于绑定单个dom元素的事件很方便，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>demo</title>
<script src="http://localhost/arcgis_js_api/library/4.15/dojo/dojo.js"></script>
</head>
<body>
<button id="btn">按钮</button>
<script>
require(['dojo/on', 'dojo/dom', 'dojo/domReady!'], function (on, dom) {
var button = dom.byId('btn');
on(button, 'click', function () {
window.alert('绑定了button的click事件');
})
});
</script>
</body>
</html>
运行结果如下图所示：
3、dojo/query模块绑定事件
除了使用dojo/on模块外，我们也可以使用dojo/query模块实现事件绑定。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>demo</title>
<script src="http://localhost/arcgis_js_api/library/4.15/dojo/dojo.js"></script>
</head>
<body>
<button id="btn">按钮</button>
<script>
require(['dojo/query', 'dojo/domReady!'], function (query) {
query('#btn').on('click', function () {
window.alert('绑定了button的click事件');
})
});
</script>
</body>
</html>
运行结果如下图所示：
使用dojo/query模块的好处就是可以实现事件的批量绑定，下面代码批量绑定了按钮的click事件：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>demo</title>
<script src="http://localhost/arcgis_js_api/library/4.15/dojo/dojo.js"></script>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<script>
require(['dojo/query', 'dojo/domReady!'], function (query) {
query('button').on('click', function () {
console.log(this.innerText);
})
});
</script>
</body>
</html>
依次点击四个按钮，控制台输出结果如下所示：
按钮1
按钮2
按钮3
按钮4
4、html窗口事件的绑定
窗口事件主要有获得焦点(onfocus)、失去焦点(onblur)等，下面代码演示了判断文本框是否获取焦点：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<script src="http://localhost/arcgis_js_api/library/4.15/dojo/dojo.js"></script>
</head>
<body>
<input id="userName" type="text" name="userName" />
<script>
require(['dojo/on', 'dojo/dom', 'dojo/domReady!'], function (on, dom) {
var element = dom.byId('userName');
on(element, 'focus', function () {
console.log('获取焦点');
})
on(element, 'blur', function () {
console.log('失去焦点');
})
});
</script>
</body>
</html>
运行结果如下图所示：
5、html鼠标事件的绑定
鼠标事件主要有mouseout、mouseover、mousedown、mouseup等，下面代码演示了监听div的mouseout和mouseover事件：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<script src="http://localhost/arcgis_js_api/library/4.15/dojo/dojo.js"></script>
</head>
<body>
<div id="box" style="width: 100px; height: 100px; border:1px solid black"></div>
<script>
require(['dojo/on', 'dojo/dom', 'dojo/domReady!'], function (on, dom) {
var box = dom.byId('box');
on(box, 'mouseout', function () {
box.innerHTML = '鼠标移出div';
})
on(box, 'mouseover', function () {
box.innerHTML = '鼠标移入div';
})
});
</script>
</body>
</html>
运行结果如下所示：
6、html表单事件的绑定
6.1、select表单
select表单下拉选项变化的change事件代码如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>demo</title>
<script src="http://localhost/arcgis_js_api/library/4.15/dojo/dojo.js"></script>
</head>
<body>
<select id="fruit">
<option value="橘子">橘子</option>
<option value="菠萝">菠萝</option>
<option value="西瓜">西瓜</option>
</select>
<script>
require(['dojo/on', 'dojo/dom', 'dojo/domReady!'], function (on, dom) {
var element = dom.byId('fruit');
on(element, 'change', function (e) {
window.alert('选择了：' + e.target.value);
})
});
</script>
</body>
</html>
运行结果如下图所示：
6.2、radio表单
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<script src="http://localhost/arcgis_js_api/library/4.15/dojo/dojo.js"></script>
</head>
<body>
<input type="radio" name="gender" value="男" checked />男
<input type="radio" name="gender" value="女" />女
<script>
require(['dojo/query', 'dojo/domReady!'], function (query) {
query('input[name=gender]').on('change', function (e) {
window.alert('性别为：' + e.target.value);
})
});
</script>
</body>
</html>
运行结果如下图所示：
6.3、checkbox表单
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<script src="http://localhost/arcgis_js_api/library/4.15/dojo/dojo.js"></script>
</head>
<body>
<input type="checkbox" name="remember" value="记住密码" />记住密码
<script>
require(['dojo/query', 'dojo/domReady!'], function (query) {
query('input[name=remember]').on('change', function (e) {
if (e.target.checked) {
window.alert('操作：记住密码');
} else {
window.alert('操作：不记住密码');
}
})
});
</script>
</body>
</html>
运行结果如下图所示：
7、结语
本文主要介绍了Dojo中的事件绑定操作，合理使用Dojo中的事件绑定机制可以帮助开发者创建交互性良好的Web界面。
