-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathevent.html
78 lines (73 loc) · 2.95 KB
/
event.html
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>事件获取</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script src="http://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
<link href="" rel="stylesheet">
<style type="text/css">
ul {
list-style: none;
}
li {
border:1px solid;
padding:5px;
}
.editer {
border:1px solid;
display:inline-block;
float:right;
width: 86px;
height: 17px;
}
</style>
</head>
<body>
<ul id="ul">
<li name="张三" age="12">第一个<span class="editer" sex="女">内容</span> <span class="last">最后1<span></li>
<li name="李四" age="18">第一个<span class="editer" sex="女" >测试2</span><span class="last">最<span></li>
<li name="王五" age="29">第一个<span class="editer" sex="男">测试3</span><span class="last">最2312<span></li>
<li name="张三" age="21">第一个<span class="editer" sex="男">测试5</span><span class="last">12323<span></li>
<li name="张三" age="89">第一个<span class="editer" sex="男">测试56</span><span class="last">12312323<span></li>
</ul>
<script>
// 好好看一下，阮一峰的“事件”的讲解（3.2事件代理）
// http://javascript.ruanyifeng.com/dom/event.html
$("#ul>li").on("tap",function(event) {
var target = event.target;
console.log(target); // 看看target是什么，当前点击事件触发的node
if(target.className =="editer") {
var sex = $(target).attr("sex");
alert(sex);
alert($(target).html());
// 关于节点的处理和获取（节点父、子和同胞）
// http://www.w3school.com.cn/htmldom/dom_nodes.asp
// 获取和处理相邻的dom节点
var parentNode = target.parentNode; //先获取父节点
console.log("父节点");
console.log(parentNode);
console.log("子节点数组");
console.log(parentNode.children);
var lastChildNode = parentNode.lastChild; // 同 var lastChildNode = parentNode.children[1]; 取父节点的子节点数组你想取哪个都可以
console.log("父节点的最后一个子节点");
console.log(lastChildNode);
debugger;
var className = $(lastChildNode).attr("class");
alert("获取点击事件的最后一个类名"+className);
console.log("获取点击的父节点的父节点");
var ulNode = target.parentNode.parentNode;
alert("顶级父节点的id名字："+ulNode.id);
return; // 你思考一下为什么加 return ，不加会怎么样
}
var name = $(target).attr("name");
alert(name);
});
</script>
</body>
</html>