Skip to content

Commit b06fd9a

Browse files
JsAaronJsAaron
committed
更新事件绑定
1 parent 03fd444 commit b06fd9a

File tree

3 files changed

+118
-36
lines changed

3 files changed

+118
-36
lines changed

‎慕课网教程案例/jQuery入门教程/事件的绑定与解绑/on事件1.html

Lines changed: 38 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<style>
88
.left div,
99
.right div {
10-
width: 500px;
10+
width: 100%;
1111
height: 50px;
1212
padding: 5px;
1313
margin: 5px;
@@ -28,33 +28,49 @@
2828

2929
<body>
3030
<h2>on绑定多事件</h2>
31-
<div class="left">
32-
on('mousedown mouseup')
33-
<div class="aaron"></div>
34-
</div>
35-
<div class="right">
36-
on(mousedown:fn1,mouseup:fn2)
37-
<div class="aaron"> </div>
31+
32+
<h4>测试一</h4>
33+
<div class="left">
34+
点击触发：on('click',fn)
35+
<div id="test1"></div>
3836
</div>
3937
<script type="text/javascript">
38+
//事件绑定一
39+
$("#test1").on('click', function(e) {
40+
$(this).text('触发事件：' + e.type)
41+
})
42+
</script>
4043

41-
//多事件绑定一
42-
$(".aaron:first").on('mousedown mouseup',function(e){
43-
$(this).text('触发事件：'+e.type)
44-
})
45-
46-
//多事件绑定二
47-
$(".aaron:last").on({
48-
mousedown:function(e){
49-
$(".aaron:last").text('触发事件：'+e.type)
50-
},
51-
mouseup:function(e){
52-
$(".aaron:last").text('触发事件：'+e.type)
53-
}
54-
})
5544

45+
<h4>测试二</h4>
46+
<div class="left">
47+
点击触发：on('mousedown mouseup')
48+
<div id="test2"></div>
49+
</div>
50+
<script type="text/javascript">
51+
//多事件绑定一
52+
$("#test2").on('mousedown mouseup', function(e) {
53+
$(this).text('触发事件：' + e.type)
54+
})
5655
</script>
5756

57+
58+
<h4>测试三</h4>
59+
<div class="right">
60+
点击触发：on(mousedown:fn1,mouseup:fn2)
61+
<div id="test3"></div>
62+
</div>
63+
<script type="text/javascript">
64+
//多事件绑定二
65+
$("#test3").on({
66+
mousedown: function(e) {
67+
$(this).text('触发事件：' + e.type)
68+
},
69+
mouseup: function(e) {
70+
$(this).text('触发事件：' + e.type)
71+
}
72+
})
73+
</script>
5874
</body>
5975

6076
</html>

‎慕课网教程案例/jQuery入门教程/事件的绑定与解绑/on事件2.html

Lines changed: 34 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<style>
88
.left div,
99
.right div {
10-
width: 500px;
10+
width: 100%;
1111
height: 50px;
1212
padding: 5px;
1313
margin: 5px;
@@ -28,30 +28,50 @@
2828

2929
<body>
3030
<h2>删除事件</h2>
31+
32+
33+
<h4>测试一</h4>
3134
<div class="left">
32-
off('mousedown')
33-
<div class="aaron"></div>
34-
</div>
35-
<div class="right">
36-
off()
37-
<div class="aaron"> </div>
35+
on('mousedown mouseup')
36+
<div class="aaron">点击触发</div>
3837
</div>
38+
<button>点击删除mousedown事件</button>
3939
<script type="text/javascript">
40-
41-
//多事件删除
42-
var a = 0;
40+
var n = 0;
41+
//绑定事件
4342
$(".aaron:first").on('mousedown mouseup', function(e) {
44-
$(this).text( '触发次数' + (++a))
43+
$(this).text( '触发类型:' + (e.type) + ",次数" + n)
44+
++n;
45+
})
46+
47+
//删除事件
48+
$("button").click(function() {
4549
$(".aaron:first").off('mousedown')
4650
})
51+
52+
</script>
4753

4854

49-
//多事件删除
50-
var b = 0;
55+
56+
<h4>测试一</h4>
57+
<div class="left">
58+
on('mousedown mouseup')
59+
<div class="aaron">点击触发</div>
60+
</div>
61+
<button>点击销毁所有事件off</button>
62+
<script type="text/javascript">
63+
var n = 0;
64+
//绑定事件
5165
$(".aaron:last").on('mousedown mouseup', function(e) {
52-
$(this).text( '触发次数' + (++b))
66+
$(this).text( '触发类型:' + (e.type) + ",次数" + n)
67+
++n;
68+
})
69+
70+
//删除事件
71+
$("button").click(function() {
5372
$(".aaron:last").off()
5473
})
74+
5575
</script>
5676
</body>
5777

‎慕课网教程案例/jQuery入门教程/事件的绑定与解绑/on高级用法.html

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
6+
<title></title>
7+
<style>
8+
.left div,
9+
.right div {
10+
width: 500px;
11+
height: 50px;
12+
padding: 5px;
13+
margin: 5px;
14+
float: left;
15+
border: 1px solid #ccc;
16+
}
17+
18+
.left div {
19+
background: #bbffaa;
20+
}
21+
22+
.right div {
23+
background: yellow;
24+
}
25+
</style>
26+
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
27+
</head>
28+
29+
<body>
30+
<h2>on事件委托</h2>
31+
<div class="left">
32+
<div class="aaron">
33+
<a>点击这里</a>
34+
</div>
35+
</div>
36+
<script type="text/javascript">
37+
//给body绑定一个click事件
38+
//没有直接a元素绑定点击事件
39+
//通过委托机制，点击a元素的时候，事件触发
40+
$('body').on('click', 'a', function(e) {
41+
alert(e.target.textContent)
42+
})
43+
</script>
44+
</body>
45+
46+
</html>

0 commit comments

Comments
 (0)