chi*_*igk 4 javascript events dojo
我有dojo Custom小部件.
我需要从自定义小部件发出一个事件,这是我添加了事件监听器的代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
var dojoConfig = {
async: true,
parseOnLoad: true,
isDebug : true,
packages:[
{ name:"custom",
location:"/Test/js"
}
]
};
</script>
<script src="//localhost:8080/dojo1.9.0/dojo/dojo.js"></script>
</head>
<body>
<script>
require(["custom/MyWidget","dojo/on","dojo/dom-construct","dojo/_base/window","dojo/domReady!"],function(MyWidget,on,domconstruct,window){
var mywidget = new MyWidget();
mywidget.startup();
domconstruct.place(mywidget.domNode,window.body(),"after");
on(mywidget,"customevent",function(data){
console.log( " received notification "+data );
});
});
</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
和小部件如下
define([
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_OnDijitClickMixin",
"dijit/_TemplatedMixin",
"dojo/text!./widget.html",
"dojo/on",
"dojo/_base/lang"
], function (declare, _WidgetBase, _OnDijitClickMixin, _TemplatedMixin, template,on,lang) {
return declare([_WidgetBase, _OnDijitClickMixin, _TemplatedMixin], {
templateString: template,
// your custom code goes here
_onClick:function()
{
},
postCreate : function ()
{
on(this.searchtextbox,"click",lang.hitch(this,"sendEvent"));
},
sendEvent : function(event)
{
console.log( "Click event in widget "+event );
this.emit("customevent",event.x)
}
});
});
Run Code Online (Sandbox Code Playgroud)
//Widget.html
<div class="${baseClass}" data-dojo-attach-point="searchtextbox">
<p>
here your widget
</p>
</div>
Run Code Online (Sandbox Code Playgroud)
问题就在于此
this.emit("customevent",event.x) 投掷错误
您不应该使用dojo/on向窗口小部件添加事件处理程序,它仅适用于DOM节点.如果你从dijit/_WidgetBase(像你一样)延伸,那么on()你可以使用一种方法,例如:
myWidget.on("customevent", function(data) {
console.log( " received notification "+data );
});
Run Code Online (Sandbox Code Playgroud)
我不确定这个emit()函数是做什么的,但似乎这就是问题所在.根据文档,您应该使用普通函数编写扩展点.例如:
postCreate : function () {
on(this.searchtextbox,"click",lang.hitch(this, "_onClick"));
},
_onClick: function(event) {
// This is where you put your code
console.log( "Click event in widget "+event );
this.onCustomEvent(event.x);
},
onCustomEvent: function() {
// This can be left empty, it will be used as the extension point
}
Run Code Online (Sandbox Code Playgroud)
在这种情况下,您将click事件绑定到_onClick()函数,而函数又onCustomEvent()使用正确的参数调用.此函数供公众使用,可用于绑定自定义事件处理程序.
这是完整的例子.