最近在用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();
})
});
分享到:
相关推荐
this和event.target的相同点this和event.target都是dom对象,如果要使用jquey中的方法可以将他们转换为jquery对象:$(this)和$(event.target); 这使我想起了以前写的一个例子: 代码如下: //del event $(“.del”)...
2.this和event.target都是dom对象,使用jQuey中的方法可以将他们转换为jquery对象:$(this)和$(event.target). 比如,一个很简单的例子. $(event.target)指向触发事件的元素. 当点击蓝色小方框时, 蓝色小方框会变成...
该版本主要修复之前两个版本中的一些bug和性能衰退...Event:使用委托事件和伪类时的性能衰退问题 Misc:修复了一些兼容问题,并进行了优化 Offset:在BlackBerry5和iOS3上使用会抛出一个错误 修复了选择器的多个bug
比如得到触发事件的元素引用在IE浏览器下是:...现在jQuery为我们提供了统一兼容处理函数$.event.fix(e),这个函数官方并没有在文档中说明用法,是我在阅读框架代码的时候发现可以这样使用。 一、如何使用 使用jQuery的
该版本主要修复之前两个版本中的一些bug和...•Event:使用委托事件和伪类时的性能衰退问题 •Misc:修复了一些兼容问题,并进行了优化 •Offset:在BlackBerry5和iOS3上使用会抛出一个错误 •修复了选择器的多个bug
JQuery读书笔记–Event属性说明 JQuery事件中的Event属性是经常性的被忽略的。大多数时间你的确不怎么用它,但有些时候它还是它还是有作用的。如获知触发时用户的环境(是否按了shift etc)。每个浏览器对event都有...
jQuery则通过统一event对象,让我们可以在所有浏览器中使用event.target获取事件对象. 3.实现丰富的UI jQuery可以实现比如渐变弹出, 图层移动等动画效果, 让我们获得更好的用户体验. 单以渐变效果为例, 从前我...
IE用户无法在线查看本文档,请下载jQuery API Version1.5 中文版AIR客户端查看,或者使用chrome,safari,firefox,opera等浏览器查看!!! jQuery 1.5 API Cheat Sheet来源 Selectors Basics #id element .class, ...
据jQuery官方博客5月3日的最新消息,jQuery 1.6 正式版已经可以下载使用。jQuery 1.6 版本包括了对属性(Attribute)模型的重要重写,还有诸多性能优化。借此机会感谢jQuery开发团队和jQuery错误分类团队的成员。 ...
jQuery是JavaScript语言的一个新的资源库(框架) 为方便大家使用将jquery1.7 中文手册打包到里面了 jQuery能快速,简洁的使用HTML documents, handle events, perform animations,并且能把Ajax交互应用到网页,jQuery...
代码如下: $(function(){ $(“ul”).click(function(event){ var tar = event.target; if(tar.tagName == “STRONG”){ alert(tar.tagName); } }); }) 上面是原生JS判断; 代码如下: $(function(){ $(“ul...
使用事件自然少不了事件对象. 因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导致我们很难跨浏览器使用...jQuery事件对象将不同浏览器的差异进行了合并, 比如可以在所有浏览器中通过 event.target
效果图 代码部分 代码如下: // JavaScript Document (function($){... //点击document隐藏下拉层 $(document).click(function(event){ if($(event.target).attr(“class”) == value.divTip || $(event.target).is(“li
某Html元素有onclick方法:onclick=’... //这时obj就是触发事件的对象,可以使用它的各个属性 //还可以将obj转换成jquery对象,方便选用其他元素 var $obj = $(obj); alert($obj.parent().attr(“href”));
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中: $(document).ready(function(){ --- jQuery functions go here ---- }); 这是为了防止文档在完全加载(就绪)之前运行 jQuery...
弹出层在实际应用中我们经常会碰到大量的弹出层效果,下面我来做一个基于jquery的简单的弹出层效果实例,各位朋友有兴趣可参考。 效果代码如下 在弹出层中下面是核心代码 [removed] // 渐变弹出层 $(document)....
未来元素选择器使用不带jQuery的jQuery的Future Elements Selector的替代品。 ###用法在您的项目中包括future.js: < script src =" ./future.js " > </ script > 传递参数以绑定功能: bind ( ...
弹出层在实际应用中我们经常会碰到大量的弹出层效果,下面我来做一个基于jquery的简单的弹出层效果实例,各位朋友有兴趣可参考。 效果代码如下: 在 弹出层 中下面是核心代码 代码如下:[removed]// 渐变弹出层$...
本文实例讲述了jQuery获取单击节点对象的方法。分享给大家供大家参考,具体如下: event.target属性: [removed] $("document").ready(function ... var NodeType = event.target.nodeName; if (NodeType == "DIV") {