笔记 Ext.lib.Event中的getTarget方法使用
2011-03-17 17:19
344 查看
首先看下这getTarget个函数的源码, google 了一下在该函数的作用 在事件传播路径上查找满足指定选择条件的元素
以下是这个函数的几个例子
example one: finding the clicked element
给warpper绑定click事件,当单击其内部的两个链接时候,根据W3C dom 事件处理机制,则会触发其click事件,当鼠标单击第一个链接click 1时候,firebug的控制台打印出如下消息
图(1)
同样的当单击第二个链接click 2的时候,firebug的控制台打印出如下消息
图(2)
example two: finding the parent element
此时的页面呈现如下图所示
图(3)
当单击图片的时候,firebug的控制台打印出如下消息
图(4)
从控制台打印出的消息很容易明白up方法,找其父元素
example three:Corresponding Record Reference
此时单击第一链接click 1时,firebug控制台打印出如下消息
图(5)
当有一组的相同的元素时候,参照上面的代码就可以区别出不同的元素。
Ext.lib.Event = function() { //... var pub={ //... getTarget : function(ev) { ev = ev.browserEvent || ev; return this.resolveTextNode(ev.target || ev.srcElement); }, resolveTextNode : Ext.isGecko ? function(node){ if(!node){ return; } // work around firefox bug, https://bugzilla.mozilla.org/show_bug.cgi?id=101197 var s = HTMLElement.prototype.toString.call(node); if(s == '[xpconnect wrapped native prototype]' || s == '[object XULElement]'){ return; } return node.nodeType == 3 ? node.parentNode : node; } : function(node){ return node && node.nodeType == 3 ? node.parentNode : node; } //... }; //... return pub; }();
以下是这个函数的几个例子
example one: finding the clicked element
<div id="wrapper"> <a href="javascript:;" title="click 1">click 1</a> <a href="javascript:;" title="click 2">click 2</a> </div>
<script type="text/javascript"> Ext.onReady(function () { Ext.fly('wrapper').on('click', function (evt) { var target = evt.getTarget(); console.log('You clicked on',target.innerHTML); }); }); </script>
给warpper绑定click事件,当单击其内部的两个链接时候,根据W3C dom 事件处理机制,则会触发其click事件,当鼠标单击第一个链接click 1时候,firebug的控制台打印出如下消息
图(1)
同样的当单击第二个链接click 2的时候,firebug的控制台打印出如下消息
图(2)
example two: finding the parent element
<div id="wrapper"> <a href="javascript:;" title="error_tips" id="error_tips"><img src="/html3/error_tips.gif" alt="error_tips" style="border:1px solid green"/></a> </div>
<script type="text/javascript"> Ext.onReady(function () { Ext.fly('wrapper').on('click', function (evt) { var targetEl = Ext.fly(evt.getTarget()); var anchor = targetEl.up("a"); console.log(anchor.getAttribute('id')); }); }); </script>
此时的页面呈现如下图所示
图(3)
当单击图片的时候,firebug的控制台打印出如下消息
图(4)
从控制台打印出的消息很容易明白up方法,找其父元素
example three:Corresponding Record Reference
<div id="wrapper"> <a href="javascript:;" title="click 1" ext:recordId="1">click 1</a> <a href="javascript:;" title="click 2" ext:recordId="2">click 2</a> </div>
<script type="text/javascript"> Ext.onReady(function () { Ext.fly('wrapper').on('click', function (evt) { var target =Ext.fly(evt.getTarget()); console.log("You clicked on record: ", target.getAttributeNS('ext', 'recordId')); }); }); </script>
此时单击第一链接click 1时,firebug控制台打印出如下消息
图(5)
当有一组的相同的元素时候,参照上面的代码就可以区别出不同的元素。
相关文章推荐
- JAVA学习笔记_使用Servlet3.0上传图片,无法使用part.getSubmittedFileName()方法解决
- Android getevent/sendevent/input使用方法
- php学习笔记(二十一)使用GET方法将值从一个页面传递到另一个页面
- [学习笔记]java web ServletContext.getRealPath(String str)方法的使用
- 使用方法GetPostBackEventReference 得到回发脚本
- 2.5.1 Ext.get方法的使用
- delegate和event的使用方法(收藏笔记)
- Ext.Ajax.request和Ext.lib.Ajax.getConnectionObject() 2种Ext的交互方法
- 关于 Ext.EventObject中的getWheelDelta()方法无效的说明
- Sencha Touch 之 Ext.ComponentManager.get方法使用
- NodeJS学习系列课程笔记(NodeJs EventEmitter相关使用方法)
- 使用 Iisext.vbs 添加Web服务扩展文件的方法
- 学习笔记---if和switch的使用方法和要点
- 详解php的魔术方法__get()和__set()使用介绍
- 使用getParameterValues方法接收参数的两种方法
- Android HTTP实例 使用GET方法和POST方法发送请求
- 发送使用其他编码的参数的get请求的方法
- 使用ASIHTTPRequest 编译提示找不到"libxml/HTMLparser.h"的解决方法
- IOS学习笔记(十)之UIImageView图片视图的基本概念和使用方法
- <转载>SpringMVC(7): 对Class.getResourceAsStream和ClassLoader.getResourceAsStream方法所使用的资源路径的解释