jQuery事件
jQuery事件注册
单个事件注册element.事件(function(){.....})
事件绑定 on () 方法
在匹配元素上绑定一个或多个事件的事件处理函数
语法：element.on(events,[selector],fn)
events:一个或多个用空格分割的事件类型，比如click 或 keydown
[selector]:元素的子元素选择器
fn:回调函数，即绑定在元素身上的侦听函数
（1）on ( ) 实现多个事件注册：
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13// 1. on ( ) 实现多个事件注册： $("div").on({ mouseenter: function() { $(this).stop().css("background", "green") }, click: function() { $(this).stop().css("background", "yellow") }, mouseleave: function() { $(this).stop().css("background", "red") } })
复制代码
1
2
3
4$("div").on("mouseover mouseleave", function() { $(this).toggleClass("current") })
（2) on( ) 实现事件委托（委派）
复制代码
1
2
3
4
5
6//2.on( ) 实现事件委托（委派） $("ul").on("click", "li", function() { $(this).css("color", "red"); //click 是绑定在 ul 身上的，但触发的对象是 ul 里面的 li })
（3）on ( ) 可以给未来动态创建的元素绑定事件
复制代码
1
2
3
4
5
6
7
8//3.on ( ) 可以给未来动态创建的元素绑定事件 $("ol").on("click", 'li', function() { $(this).css("color", "red"); //这个li是后来创建的 用普通的注册事件不能实现 ) var li = $("<li>新添加的</li>"); $("ol").append(li);
案例：微博发布效果
复制代码
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
79
80
81<style> .box { position: relative; width: 700px; height: 300px; margin: 100px auto; border: 1px solid #000; } p { position: absolute; top: 175px; left: 10px; } textarea { position: absolute; top: 60px; left: 85px; width: 500px; } button { position: absolute; top: 190px; left: 600px; } .show { position: absolute; top: 200px; left: 70px; } .show ul li { border-bottom: 1px dashed rgb(121, 112, 112); display: none; width: 480px; } .show ul li a { float: right; } </style> <script src="jquery.min.js"></script> </head> <body> <div class="box"> <p>微博发布</p> <textarea name="" id="" cols="30" rows="10" class="txt"></textarea> <button class="btn">发布</button> <div class="show"> <ul> </ul> </div> </div> </body> <script> $(function() { //1.点击发布按钮，动态创建一个li 放入文本框的内容和删除按钮，并添加到ul中 $(".btn").on("click", function() { var li = $("<li></li>"); li.html($(".txt").val() + "<a href='javascript:;'>删除</a>") $('ul').prepend(li); li.slideDown(); //让li滑动处理 $(".txt").val(""); //发布后清空文本框的内容 }) //2.点击删除按钮，就删除当前的li $("ul").on("click", "a", function() { //on 可以给动态创建的元素绑定事件 $(this).parent().slideUp(function() { //上拉完毕后删除 $(this).remove(); }); }) }) </script>
复制代码
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
79
80
81<style> .box { position: relative; width: 700px; height: 300px; margin: 100px auto; border: 1px solid #000; } p { position: absolute; top: 175px; left: 10px; } textarea { position: absolute; top: 60px; left: 85px; width: 500px; } button { position: absolute; top: 190px; left: 600px; } .show { position: absolute; top: 200px; left: 70px; } .show ul li { border-bottom: 1px dashed rgb(121, 112, 112); display: none; width: 480px; } .show ul li a { float: right; } </style> <script src="jquery.min.js"></script> </head> <body> <div class="box"> <p>微博发布</p> <textarea name="" id="" cols="30" rows="10" class="txt"></textarea> <button class="btn">发布</button> <div class="show"> <ul> </ul> </div> </div> </body> <script> $(function() { //1.点击发布按钮，动态创建一个li 放入文本框的内容和删除按钮，并添加到ul中 $(".btn").on("click", function() { var li = $("<li></li>"); li.html($(".txt").val() + "<a href='javascript:;'>删除</a>") $('ul').prepend(li); li.slideDown(); //让li滑动处理 $(".txt").val(""); //发布后清空文本框的内容 }) //2.点击删除按钮，就删除当前的li $("ul").on("click", "a", function() { //on 可以给动态创建的元素绑定事件 $(this).parent().slideUp(function() { //上拉完毕后删除 $(this).remove(); }); }) }) </script>
事件解绑 off()方法
如果括号内为空，对应元素上面的所有事件都被解除
复制代码
1
2
3
4
5//事件解绑 off()方法 $("div").off();//如果括号内为空，div上面的所有事件都被解除 $("div").off("click");//解除div的点击事件 $("ol").off("click", 'li');//解除事件委托
如果有的事件只想触发一次，可以使用one()来绑定事件
复制代码
1
2
3
4
5//如果有的事件只想触发一次，可以使用one()来绑定事件 $("ul").one("click", 'li', function() { $(this).css("color", "red"); })
自动触发事件 triggle()
1.element.事件()
2.element.trigger(“事件”)
3.element.triggerHandler事件() 最大的区别就是不会触发元素的默认行为
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17//自动触发事件 trigger() $("div").on("click", function() { alert(11); }) //自动触发事件 //1.element.事件() $("div").click(); //2.element.trigger("事件") $("div").trigger("click"); //3.element.triggerHandler事件() 最大的区别就是不会触发元素的默认行为 $("div").triggerHandler("click"); $("input").on("focus",function(){ $(this).val("你好吗") }) $("input").triggerHandler("foucus") //输入框有一个默认行为是光标闪烁，利用triggerHandler就不会出现光标闪烁现象
jQuery事件对象
事件被触发，就会有事件对象的产生
复制代码
1
2
3
4
5
6
7
8
9
10//jQuery事件对象 $(document).on("click", function(e) { console.log("点击了document"); }) $("div").on("click", function(e) { console.log("点击了div"); e.stopPropagation();//协商这个，就可以阻止其冒泡行为 }) //点击后由于事件冒泡会先后出现 点击了div 点击了document
最后
以上就是感性野狼最近收集整理的关于jQuery事件-on () 方法/off()方法/ triggle()/事件对象的全部内容，更多相关jQuery事件-on内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复