事件绑定方式
1 <script src="jquery.js"></script>
2 <script>
3 //方式1
4 // $('#d1').click(function () {
5 // $(this).css({'background-color':'green'});
6 // });
7 //方式2
8 $('#d1').on('click',function () {
9 $(this).css({'background-color':'green'});
10 })
11
12 </script>
常用事件
1 click 左键点击事件
2 //获取光标触发的事件
3 $('[type="text"]').focus(function () {
4 $('.c1').css({'background-color':'black'});
5 });
6 //失去光标(焦点)触发的事件
7 $('[type="text"]').blur(function () {
8 $('.c1').css({'background-color':'purple'});
9 });
10
11 //域内容发生改变时触发的事件
12 $('select').change(function () {
13 $('.c1').toggleClass('cc');
14 });
15
16 //鼠标悬浮触发的事件
17 // $('.c1').hover(
18 // //第一步:鼠标放上去
19 // function () {
20 // $(this).css({'background-color':'blue'});
21 // },
22 // //第二步,鼠标移走
23 // function () {
24 // $(this).css({'background-color':'yellow'});
25 // }
26 // )
27
28 // 鼠标悬浮 等同于hover事件
29 // 鼠标进入
30 // $('.c1').mouseenter(function () {
31 // $(this).css({'background-color':'blue'});
32 // });
33 // 鼠标移出
34 // $('.c1').mouseout(function () {
35 // $(this).css({'background-color':'yellow'});
36 // });
37
38 // $('.c2').mouseenter(function () {
39 // console.log('得港绿了');
40 // });
41 // 鼠标悬浮事件
42 // $('.c2').mouseover(function () {
43 // console.log('得港绿了');
44 // });
45 // mouseover 和 mouseenter的区别是：mouseover事件是如果该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发，mmouseenter事件不管有没有子标签都只触发一次，表示鼠标进入这个对象
46
47
48 //键盘按下触发的事件 e\event事件对象
49 $(window).keydown(function (e) {
50 // console.log(e.keyCode); //每个键都有一个keyCode值,通过不同的值来触发不同的事件
51 if (e.keyCode === 37){
52 $('.c1').css({'background-color':'red'});
53 }else if(e.keyCode === 39){
54 $('.c1').css({'background-color':'green'});
55 }
56 else {
57 $('.c1').css({'background-color':'black'});
58 }
59 })
60 // 键盘抬起触发的事件
61 $(window).keyup(function (e) {
62 console.log(e.keyCode);
63 })
64
65
66 input事件:
67 22期百度:<input type="text" id="search">
68 <script src="jquery.js"></script>
69 <script>
70 $('#search').on('input',function () {
71 console.log($(this).val());
72 })
73
74 </script>
事件冒泡
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 #d1{
8 background-color: red;
9 height: 200px;
10 }
11 #d2{
12 background-color: green;
13 height: 100px;
14 width: 100px;
15 }
16
17 </style>
18
19 </head>
20 <body>
21
22 <div id="d1">
23 <div id="d2"></div>
24
25 </div>
26
27
28 <script src="jquery.js"></script>
29 <script>
30 $('#d1').click(function () {
31 alert('父级标签');
32 });
33 $('#d2').click(function () {
34 alert('子级标签');
35 });
36
37
38 </script>
39
40 </body>
41 </html>
阻止后续事件发生
1 $('#d1').click(function () {
2 alert('父级标签');
3 });
4 $('#d2').click(function (e) {
5 alert('子级标签');
6 return false;
7 // e.stopPropagation();
8 });
事件委托
1 事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件，将未来添加进来的某些子标签自动绑定上事件。
2
3 <!DOCTYPE html>
4 <html lang="en">
5 <head>
6 <meta charset="UTF-8">
7 <title>Title</title>
8 </head>
9 <body>
10
11 <div id="d1">
12 <button class="c1">爱的魔力转圈圈</button>
13
14 </div>
15
16 <script src="jquery.js"></script>
17 <script>
18 // $('.c1').on('click',function () {
19 // alert('得港被雪飞调教了,大壮很难受!');
20 // var btn = document.createElement('button');
21 // $(btn).text('爱的魔力转圈圈');
22 // $(btn).addClass('c1');
23 // console.log(btn);
24 // //添加到div标签里面的后面
25 // $('#d1').append(btn);
26 //
27 // });
28
29 #将'button' 选择器选中的标签的点击事件委托给了$('#d1');
30 $('#d1').on('click','button',function () {
31 alert('得港被雪飞调教了,大壮很难受!');
32 var btn = document.createElement('button');
33 $(btn).text('爱的魔力转圈圈');
34 $(btn).addClass('c1');
35 console.log(btn);
36 console.log($(this)) //还是我们点击的那个button按钮
37 //添加到div标签里面的后面
38 $('#d1').append(btn);
39
40 });
41
42
43 </script>
44 </body>
45 </html>
