`
kylines
  • 浏览: 86198 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

jquery中如何使用event.target

阅读更多
最近在用jquery做一个项目的前端,遇到了一个问题需要用event来得到触发元素的id,查了一些资料,看到一篇这方面的blog,虽然字数不多但很是受用,跟大家分享下!
引用
1.this和event.target的区别:
js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素;
2.this和event.target都是dom对象,如果要使用jquey中的方法可以将他们转换为jquery对象:$(this)和$(event.target);

eg:
  
  $(function(){  
  $("li").live("click",function(event){  
      $("#temp").html("clicked: " + event.target.nodeName);  
      $(event.target).css("color","#FF3300");  
   })
  }); 

等同于:
  $(function(){  
  $("li").live("click",function(event){  
    $("#temp").html("clicked: " + event.target.nodeName);  
    $(this).css("color","#FF3300");  
    event.stopPropagation();  
  })  
}); 
分享到:
评论
1 楼 yaohuiye 2012-09-10  
不错不错,解决了问题,可以让我安心的吃饱去咯

相关推荐

    jquery 关于event.target使用的几点说明介绍

    this和event.target的相同点this和event.target都是dom对象,如果要使用jquey中的方法可以将他们转换为jquery对象:$(this)和$(event.target); 这使我想起了以前写的一个例子: 代码如下: //del event $(“.del”)...

    jQuery中event.target和this的区别详解

     2.this和event.target都是dom对象,使用jQuey中的方法可以将他们转换为jquery对象:$(this)和$(event.target). 比如,一个很简单的例子. $(event.target)指向触发事件的元素. 当点击蓝色小方框时, 蓝色小方框会变成...

    jquery-1.8.2.min.js

    该版本主要修复之前两个版本中的一些bug和性能衰退...Event:使用委托事件和伪类时的性能衰退问题 Misc:修复了一些兼容问题,并进行了优化 Offset:在BlackBerry5和iOS3上使用会抛出一个错误 修复了选择器的多个bug

    利用jQuery的$.event.fix函数统一浏览器event事件处理

    比如得到触发事件的元素引用在IE浏览器下是:...现在jQuery为我们提供了统一兼容处理函数$.event.fix(e),这个函数官方并没有在文档中说明用法,是我在阅读框架代码的时候发现可以这样使用。 一、如何使用 使用jQuery的

    最新jquery.min.js

    该版本主要修复之前两个版本中的一些bug和...•Event:使用委托事件和伪类时的性能衰退问题 •Misc:修复了一些兼容问题,并进行了优化 •Offset:在BlackBerry5和iOS3上使用会抛出一个错误 •修复了选择器的多个bug

    jquery中event对象属性与方法小结

    JQuery读书笔记–Event属性说明 JQuery事件中的Event属性是经常性的被忽略的。大多数时间你的确不怎么用它,但有些时候它还是它还是有作用的。如获知触发时用户的环境(是否按了shift etc)。每个浏览器对event都有...

    从零开始学习JQuery

    jQuery则通过统一event对象,让我们可以在所有浏览器中使用event.target获取事件对象. 3.实现丰富的UI jQuery可以实现比如渐变弹出, 图层移动等动画效果, 让我们获得更好的用户体验. 单以渐变效果为例, 从前我...

    jQuery 1.5 API 中文版

    IE用户无法在线查看本文档,请下载jQuery API Version1.5 中文版AIR客户端查看,或者使用chrome,safari,firefox,opera等浏览器查看!!! jQuery 1.5 API Cheat Sheet来源 Selectors Basics #id element .class, ...

    jquery 最新版框架下载(1.32-1.8.2)

    据jQuery官方博客5月3日的最新消息,jQuery 1.6 正式版已经可以下载使用。jQuery 1.6 版本包括了对属性(Attribute)模型的重要重写,还有诸多性能优化。借此机会感谢jQuery开发团队和jQuery错误分类团队的成员。 ...

    jquery 最新版框架下载(1.32-1.8.3)

    jQuery是JavaScript语言的一个新的资源库(框架) 为方便大家使用将jquery1.7 中文手册打包到里面了 jQuery能快速,简洁的使用HTML documents, handle events, perform animations,并且能把Ajax交互应用到网页,jQuery...

    JQuery 返回布尔值Is()条件判断方法代码

    代码如下: $(function(){ $(“ul”).click(function(event){ var tar = event.target; if(tar.tagName == “STRONG”){ alert(tar.tagName); } }); }) 上面是原生JS判断; 代码如下: $(function(){ $(“ul...

    jquery 事件对象属性小结

    使用事件自然少不了事件对象. 因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导致我们很难跨浏览器使用...jQuery事件对象将不同浏览器的差异进行了合并, 比如可以在所有浏览器中通过 event.target

    基于jQuery的input输入框下拉提示层(自动邮箱后缀名)

    效果图 代码部分 代码如下: // JavaScript Document (function($){... //点击document隐藏下拉层 $(document).click(function(event){ if($(event.target).attr(“class”) == value.divTip || $(event.target).is(“li

    js获取事件源及触发该事件的对象

    某Html元素有onclick方法:onclick=’... //这时obj就是触发事件的对象,可以使用它的各个属性 //还可以将obj转换成jquery对象,方便选用其他元素 var $obj = $(obj); alert($obj.parent().attr(“href”));

    jQuery详细教程

    您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中: $(document).ready(function(){ --- jQuery functions go here ---- }); 这是为了防止文档在完全加载(就绪)之前运行 jQuery...

    jQuery实现鼠标点击弹出渐变层的方法

    弹出层在实际应用中我们经常会碰到大量的弹出层效果,下面我来做一个基于jquery的简单的弹出层效果实例,各位朋友有兴趣可参考。 效果代码如下 在弹出层中下面是核心代码 [removed] // 渐变弹出层 $(document)....

    Future-Elements-Selector:使用不带jQuery的jQuery的Future Elements Selector的替代品

    未来元素选择器使用不带jQuery的jQuery的Future Elements Selector的替代品。 ###用法在您的项目中包括future.js: < script src =" ./future.js " > </ script > 传递参数以绑定功能: bind ( ...

    jquery实现点击弹出层效果的简单实例

    弹出层在实际应用中我们经常会碰到大量的弹出层效果,下面我来做一个基于jquery的简单的弹出层效果实例,各位朋友有兴趣可参考。 效果代码如下: 在 弹出层 中下面是核心代码 代码如下:[removed]// 渐变弹出层$...

    jQuery获取单击节点对象的方法

    本文实例讲述了jQuery获取单击节点对象的方法。分享给大家供大家参考,具体如下: event.target属性: [removed] $("document").ready(function ... var NodeType = event.target.nodeName; if (NodeType == "DIV") {

Global site tag (gtag.js) - Google Analytics