1881人阅读
Javascript（34）
jQuery（4）
&span style=&color:#ff0000;&&target:目标阶段对象&br/&
currentTarget:冒泡阶段的DOM对象&br/&&/span&
&!DOCTYPE html&
&meta http-equiv=&content-type& content=&text/charset=UTF-8&/&
&title&target currentTarget&/title&
&script type=&text/javascript& src=&../../../core/libs/jquery-2.0.3.js&&&/script&
&div&原生：&/div&
&div id=&outer& style=&background:#099&&
click outer
&p id=&inner& style=&background:#9C0&&click inner&/p&
&div&jQuery&/div&
&div id=&outer2& style=&background:#099&&
click outer
&p id=&inner2& style=&background:#9C0&&click inner&/p&
jquery Event时间属性：&br/&
target:目标阶段对象&br/&
currentTarget:冒泡阶段的DOM对象&br/&
&script type=&text/javascript&&
function G(id) {
return document.getElementById(id);
function addEvent(obj, ev, handler) {
if (window.attachEvent) {
obj.attachEvent(&on& + ev, handler);
} else if (window.addEventListener) {
obj.addEventListener(ev, handler, false);
function test(e) {
console.log('------原生 target currentTarget');
console.log(e);
console.log(&e.target.tagName : & + e.target.tagName);
console.log('e.currentTarget.tagName : ' + e.currentTarget.tagName);
var outer = G(&outer&);
var inner = G(&inner&);
//addEvent(inner, &click&, test);
addEvent(outer, &click&, test);
&script type=&text/javascript&&
$(function () {
$('#outer2').click(function (e) {
console.log('------jquery Event target currentTarget');
console.log(e);
console.log(&e.target.tagName : & + e.target.tagName);
console.log('e.currentTarget.tagName : ' + e.currentTarget.tagName);
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：812636次
积分：8886
积分：8886
排名：第1550名
原创：200篇
转载：32篇
评论：123条
(1)(1)(1)(1)(2)(15)(7)(2)(5)(14)(1)(5)(3)(4)(6)(1)(3)(3)(1)(1)(5)(1)(8)(9)(9)(8)(4)(1)(23)(64)(25)jquery 关于event.target使用的几点说明介绍
字体：[ ] 类型：转载 时间：
本篇文章介绍了，jquery中关于event.target使用的几点说明。需要的朋友参考下
event.target说明：引发事件的DOM元素。this和event.target的区别js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；
this和event.target的相同点this和event.target都是dom对象，如果要使用jquey中的方法可以将他们转换为jquery对象：$(this)和$(event.target);
这使我想起了以前写的一个例子： 代码如下:&&& //del event&&& $(".del").bind("click",function(event){&&&&&&& var _tmpQuery=$(this);//为什么要加上这一句？&&&&&&& var id=$("input[name='id']",$(this).parents("form:first")).attr("value");&&&&&&& art.dialog.confirm('你确认删除该日志吗？',function(){&&&&&&&&&&& $.post("myRun/managerlog_del.php",{id:id},function(tips){&&&&&&&&&&&&&&& if(tips=='ok'){&&&&&&&&&&&&&&&&&&& art.dialog.tips('成功删除');&&&&&&&&&&&&&&&&&&& $(_tmpQuery.parents('tr:first')).hide();//如果不加第一句，这里用$($(this).parents('tr:first')).hide();则不会隐藏&&&&&&&&&&&&&&&&&&& //因为这里的this，并不是当前的class="del"这个DOM对象了。而是jQuery的AJAX配置对象ajaxSettings。测试：alert(this.url);&&&&&&&&&&&&&&& }else{&&&&&&&&&&&&&&&&&&& art.dialog.tips(tips,5);&&&&&&&&&&&&&&& }&&&&&&&&&&& });&&&&&&&&&&&&&&&&&& });&&& });那么现在我可以将上面代码通过$(event.target)这个方式来实现隐藏tr，而不用通过$(_tmpQuery.parents('tr:first')).hide();这样的方式，具体代码如下：
代码如下:$(".del").bind("click",function(event){&&& //var _tmpQuery=$(this);这行代码可以删除&&& var id=$("input[name='id']",$(this).parents("form:first")).attr("value");&&& art.dialog.confirm('你确认删除该日志吗？',function(){&&&&&&& $.post("myRun/managerlog_del.php",{id:id},function(tips){&&&&&&&&&&& if(tips=='ok'){&&&&&&&&&&&&&&& art.dialog.tips('成功删除');&&&&&&&&&&&&&&& $(event.target).parents('tr:first').hide();&&&&&&&&&&& }else{&&&&&&&&&&&&&&& art.dialog.tips(tips,5);&&&&&&&&&&& }&&&&&&& });&&&&&&&&&& });});event.target和$(event.target)的使用 代码如下:&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&&html xmlns="http://www.w3.org/1999/xhtml"&&head&&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&&title&无标题文档&/title&&script language="JavaScript" type="text/JavaScript" src=".cn/jquery/jquery.js"&&/script&&script type="text/javascript"&$(function(){& & $("li").live("click",function(event){& & & & $("#temp").html("clicked: " + event.target.nodeName);& & & & $(event.target).css("color","#FF3300");& & })});&/script&&/head&
&body&& & &div id="temp"&&/div&& & &ul class="JQ-content-box" style="padding:20 background:#FFFFFF"&& & & & &li&第一行& & & & & & &ul&& & & & & & & & &li&这是公告标题1&/li&& & & & & & & & &li&这是公告标题2&/li&& & & & & & & & &li&这是公告标题3&/li&& & & & & & & & &li&这是公告标题4&/li&& & & & & & &/ul&& & & & &/li&& & &/ul&&/body&&/html&上面的例子如果改成使用this
代码如下:&script type="text/javascript"&$(function(){&&& $("li").live("click",function(event){&&&&&&& $("#temp").html("clicked: " + event.target.nodeName);&&&&&&& $(this).css("color","#FF3300");&&&&&&& event.stopPropagation();&&& })});&/script&在看一个例子 代码如下:&!DOCTYPE html&&html&&head&
&script language="JavaScript" type="text/JavaScript" src=".cn/jquery/jquery.js"&&/script&&script&$(document).ready(function(){&&& function handler(event) {&&&&& var $target = $(event.target);&&&&& if( $target.is("li") ) {&&&&&&& $target.children().toggle();&&&&& }&&& }&&& $("ul").click(handler).find("ul").hide();//从这里也看出find只在后代中遍历，不包括自己。});&/script&&/head&&body&
&ul&& &li&item 1&&& &ul&&&&&& &li&sub item 1-a&/li&&&&&& &li&sub item 1-b&/li&&&& &/ul&& &/li&& &li&item 2&&& &ul&&&&&& &li&sub item 2-a&/li&&&&&& &li&sub item 2-b&/li&&&& &/ul&& &/li&&/ul&
&/body&&/html&toggle()不带参数的作用：
toggle有两种作用：toggle()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
toggle(fn,fn)每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。可以使用unbind("click")来删除。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具jQuery.event兼容各浏览器的event详细解析
字体：[ ] 类型：转载 时间：
jQuery在遵循W3C规范的情况下，对事件的常用属性进行了封装，使得事件处理在各大浏览器下都可以正常的运行而不需要进行浏览器类型判断
介绍之前先介绍jQuery的一个方法 jQuery.event.fix(event || window.event); 此方法个浏览器的event对象转换为 jQuery. 如果您的事件是通过jQuery方法绑定的，就不需要进行转换了！
jQuery在遵循W3C规范的情况下，对事件的常用属性进行了封装，使得事件处理在各大浏览器下都可以正常的运行而不需要进行浏览器类型判断。
1.event.type属性该方法作用是可以获取到时间的类型 代码如下:$("a").click(function(event){&&& alert(event.type); //获取时间类型&&& //阻止链接跳转})以上代码运行后会返回：“click”。
2.event.preventDefault()方法该方法的作用是阻止默认的事件行为。JavaScript中符合W3C规范的preventDefault()方法在IE浏览器中无效。jQuery对其进行了封装，使之能兼容各种浏览器。
3.event.stopPropagation()方法该方法是阻止事件的冒泡。JavaScript中符合W3C规范的stopPropagation()方法在IE浏览器中无效。jQuery对其进行封装，使之能兼容各种浏览器。
4.event.target属性event.target属性的作用是获取到出发事件的元素。jQuery对其封装后，避免了W3C、IE和safari浏览器不同标准的差异。 代码如下:$("a[href=http://www.jb51.net]").click(function(event){&&& alert(event.target.href); //获取触发事件的&a&元素的href属性值&&& alert(event.target.tagName); //获取触发事件的元素的标签名称&&& //阻止链接跳转})5.event.relatedTarget属性在标准DOM中，mouseover和mouseout所发生的元素可以通过event.target()方法来访问，相关元素是通过event.relatedTarget属性来访问的。event.relatedTarget属性在mouseover中相当于IE浏览器的event.fromElement属性，在mouseout中相当于IE浏览器的event.toElement,jQuery对其进行了封装，使之能兼容各种浏览器。
6.event.pageX/event.pageY属性该方法的作用是获取到光标相对页面的x坐标和y坐标。如果没有使用jQuery时，那么IE浏览器中是用event/event.y方法，而在Firefox浏览器中用event.pageX/event.pageY方法。如果页上有滚动条，则还要加上滚动条的宽度和高度。在IE浏览器中还应该减去默认的2px的边框。 代码如下:$(function() {&&& $("a").click(function(event) {&&&&&&& alert("Current mouse position:" + event.pageX + "," + event.pageY);&&&&&&& //获取鼠标当前相对于页面的坐标&&&&&&& //阻止链接跳转&&& });})7.event.which属性该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按钮。 代码如下:$(function() {&&& $("body").mousedown(function(e) {&&&&&&& alert(e.which); //1 = 鼠标左键；2 = 鼠标中键；3 = 鼠标右键。&&& })})以上代码加载到页面中，用鼠标单击页面时，单击左、中、右键分别返回1、2、3.
8.event.metaKey属性针对不同浏览器对键盘中的&ctrl&按键解释不同，jQuery也进行了封装，并规定event.metaKey()方法为键盘事件中获取&ctrl&按键。
9.event.originalEvent属性。该方法的作用是指向原始的事件对象。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具}