jquery中使用event.target的几点
来源:互联网 发布:接口数据完整性校验 编辑:程序博客网 时间:2024/04/28 02:44
jquery中使用event.target的几点
1.this和event.target的区别:
js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素;
2.this和event.target都是dom对象,如果要使用jquey中的方法可以将他们转换为jquery对象:$(this)和$(event.target);
比如:event.target和$(event.target)的使用:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
< !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
type
=
"text/javascript"
src
=
"http://www.css88.com/tool/css3Preview/jquery-1.4.2.min.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:20px; background:#FFFFFF"
>
<
li
>第一行
<
ul
>
<
li
>这是公告标题1</
li
>
<
li
>这是公告标题2</
li
>
<
li
>这是公告标题3</
li
>
<
li
>这是公告标题4</
li
>
</
ul
>
</
li
>
</
ul
>
</
body
>
</
html
>
上面的例子如果改成使用this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
< !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
type
=
"text/javascript"
src
=
"http://www.css88.com/tool/css3Preview/jquery-1.4.2.min.js"
></
script
>
<
script
type
=
"text/javascript"
>
$(function(){
$("li").live("click",function(event){
$("#temp").html("clicked: " + event.target.nodeName);
$(this).css("color","#FF3300");
event.stopPropagation();
})
});
</
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
>
注意这里的event.stopPropagation();这个是阻止事件冒泡的!
声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《jquery中使用event.target的几点》
- jquery中使用event.target的几点
- jquery中使用event.target的几点说明
- jquery中使用event.target的几点说明
- jquery中使用event.target的几点
- jquery中使用event.target的几点
- jquery中使用event.target的几点
- jquery中使用event.target的几点
- jquery 关于event.target使用的几点说明介绍
- jquery event.target的几点说明
- jquery中如何使用event.target
- jquery 中event target
- jQuery的event.target
- flex中 event.target与 event.currentTarget的使用
- JQuery中this和event.target的区别
- jQuery中 this与event.target区别
- 浅谈jQuery使用this和event.target
- jQuery event.target属性
- jQuery中event.target和this的区别——冒泡
- 树莓派轮盘游戏机设计实现
- search dialog
- 学习OpenCV:滤镜系列(4)——波浪:正弦
- shell脚本:test
- Similar Word 变序词代码
- jquery中使用event.target的几点
- 笔试小题
- Linux之CGI编程小结
- 实时游戏的设计及实现
- linux Crontab 使用
- Qt中的tr()
- shell脚本:if语句
- jQuery为iframe的body添加click事件
- 进程的基础知识