jQuery的event.target
2016-03-16 13:38
489 查看
<!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/html; charset=utf-8" /> <title>无标题文档</title> <script language="JavaScript" type="text/JavaScript" src="http://www.w3school.com.cn/jquery/jquery.js"></script> <script type="text/javascript"> $(function(){ $("li").live("click",function(data){ $("#temp").html("clicked: " + data.target.nodeName); //$(this).css("color","#FF3300");//效果与下面不一样(原因是js冒泡事件) $(data.target).css("color","#FF3300"); }) }); </script> </head> <body> <div id="temp"></div> <ul class="JQ-content-box" style="padding:20px; background:#FFFFFF"> <li>第一行 <ul> <li>这是公告标题1</li> <li>这是公告标题2</li> <li>这是公告标题3</li> <li>这是公告标题4</li> </ul> </li> </ul> </body> </html>
直接拷贝,在html文件中查看效果
target属性用于返回最初触发事件的DOM元素。属性的返回值是Element类型。
<div id="n1" style="height: 100px; background: #eee;" > <br> <p id="n2" style="background: #999;" >段落文本...段落文本...<br> <span id="n3" style="background: #fff;" >专注于编程开发技术分享</span> </p> </div>
js
$("div").click( function(event) { alert("最初触发事件的是:" + event.target.tagName + "#" + event.target.id); } ); // 点击span元素区域,弹出:"最初触发事件的是:SPAN#n3" // 点击p元素自身区域,弹出:"最初触发事件的是:P#n2" // 点击div元素自身区域,弹出:"最初触发事件的是:DIV#n1"
相关文章推荐
- jquery validate --转载
- jquery validate 对隐藏的元素不进行验证
- 微信视频开发jquery mobile
- jquery 中获取所有选中的checkbox的用法
- 基于jQuery Tipso插件实现消息提示框特效
- 简单的jQuery表单正则验证和提交
- Jquery技巧(必须掌握)
- JQUERY 插件开发——LAZYLOADIMG(预加载和延迟加载图片)
- Jquery轮播图片
- 精心挑选的12款优秀 jQuery Ajax 分页插件和教程
- jQuery插件开发的模式和结构
- Struts2+JQuery+Json实例
- jQuery插件开发精品教程,让你的jQuery提升一个台阶
- 锋利的JQuery 学习笔记
- jquery.qrcode笔记
- jquery uploadify上传文件404,500错误
- jQuery 遍历 each()方法
- django用jquery的ajax提交表单,中间件的CsrfViewMiddleware问题
- JQuery概述和一个简单案例
- 利用jquery控制checkbox被选中