Ext中的事件

Manual:Intro:Event Handling(事件处理) Posted 周二, 07/08/2008 - 23:59 by admin Manual:Intro:Event Handling(中文翻译) 在Javascript中，你将不得不经常进行事件的处理。这有时很难顺利进行，因为你需要进行不同的跨浏览器标准化事件处理。而ExtJs使得处理事件变得非常容易，有时候甚至还富于乐趣(!)。 非常基础的例子 想象一下这样一个例子，当用户点击一个链接时，你想向他显示一则警告信息。请继续往下看，因为在开始处理事件前你也许想知道更多。 view sourceprint?1.var el = Ext.get('somelink'); 2.el.on('click', function(){ 3. alert('you click on a link'); 4.});注意，在这里我们使用了一个匿名处理函数。另外，你应该在DOM初始化后才执行上述代码（使用Ext.onReady()方法） 处理函数的作用域 好了，我们刚刚学习了最基础的事件处理。让我们看看其他一些我们能做的事。默认情况下，处理函数内的作用域是你绑定事件的元素。 view sourceprint?1.var el = Ext.get('somelink'); 2.el.on('click', function(){ 3. alert(this.id); // 这里将显示'somelink' 4.});注意this不是Ext Element对象。如果你想使用Ext的方法你必须使用"var el = Ext.get(this);" 但如果我们想要改变处理函数内的作用域呢？你可以把那个对象作为作用域参数。 view sourceprint?01.function onClick = function(){ 02. alert(this.someProperty); // 这里将显示'someValue' 03.}; 04. 05.var scope = { 06. someProperty : 'someValue'07.} 08. 09.var el = Ext.get('somelink'); 10.el.on('click', onClick, scope);提示：更多关于作用域的信息请参见这里 传递参数 在前面的例子中我们看到了如何改变处理函数内的作用域。但如果我们仍然想访问（与之相绑定的）元素呢？我们可以使用传递给处理函数的参数来进行操作。 view sourceprint?01.function onClick = function(ev, target){ 02. alert(this.someProperty); // 这里将显示'someValue' 03. alert(target.id); // 这里将显示'somelink' 04.}; 05. 06.var scope = { 07. someProperty : 'someValue'08.} 09. 10.var el = Ext.get('somelink'); 11.el.on('click', onClick, scope);如你所见，在这个例子中我们使用了第二个参数（target）。第一个参数是Ext Event对象，我们可以使用此对象来做很多事情。 使用事件 传递到事件处理器的Ext的事件对象有多个方便的属性和方法，下面有几个例子： view sourceprint?1.onClick = function(ev, target){ 2. ev.preventDefault(); // 阻止浏览器对事件的默认处理行为 3. ev.stopPropagation(); // 阻止事件的传播 4. ev.stopEvent() // preventDefault + stopPropagation 5. 6. var target = ev.getTarget() // 取得事件的目标 (和参数target是一样的)，返回的是一个Ext,Element对象 7. var relTarget = ev.getRelatedTarget(); // 取得相关的目标;想知道更多关于EventObject的用法，请参考文档 事件参数 事件有很多可配置的参数，下面给出一个例子： view sourceprint?01.Delayed Listeners (delayed event firing) 02. 03.el.on('click', this.onClick, this, {delay: 250});Buffered Listeners (buffers an event so it only fires once in the defined interval) 04. 05.el.on('click', this.onClick, this, {buffer: 100});"Handler" Listeners (prevents default and optionally stops propagation) 06. 07.// prevent default 08.el.on('click', this.onClick, this, {preventDefault: true}); 09. 10.// only stop propagation 11.el.on('click', this.onClick, this, {stopPropagation: true}); 12. 13.// prevent default and stop propagation 14.el.on('click', this.onClick, this, {stopEvent: true});Other options 15. 16.el.on('click', this.onClick, this, { 17. single: true, // removed automatically after the first fire: 18. delegate: 'li.some-class' // Automatic event delegation! 19.});自定义的参数 你也可以传递自定义的参数到事件处理器。当你想在事件处理代码内部使用一个变量，而不想改变作用域的时候这个功能就很有用了。要这样做基本上你只要将自定义参数添加到options对象就行了，请看下面的例子。 view sourceprint?1.function onClick(ev, target, options){ 2. alert(options.someProperty); // alerts 'someValue' 3.} 4. 5.var el = Ext.get('somelink'); 6.el.on('click', onClick, null, {someProperty: 'someValue'});添加多个事件处理器 如果你想在一个元素上添加多个事件处理器可以这样一次搞定。 view sourceprint?01.el.on({ 02. 'click' : { 03. fn: this.onClick, 04. scope: this, 05. delay: 100 06. }, 07. 'mouseover' : { 08. fn: this.onMouseOver, 09. scope: this10. }, 11. 'mouseout' : { 12. fn: this.onMouseOut, 13. scope: this14. } 15.});总结 正如你看到的，Ext提供了很多功能使得你可以更容易处理事件。这篇文章我们讨论的所有基本的内容，如果你想学习更多，看看这个