事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2024-06-10 20:10:10
一、事件冒泡定义
事件冒泡是指在一个对象触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，甚至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层级的最顶层，即document对象（有些浏览器是window）.。
二、事件冒泡的作用
事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。
三、阻止事件冒泡
事件冒泡机制有时候是不需要的，需要阻止掉，通过event.stopPropagation（）来阻止
四、阻止默认行为
如：阻止右键菜单
五、合并阻止操作
实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法如下：
六、事件委托
事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。
1、一般绑定事件的写法：
2、事件委托的写法：（实际开发中，如果是对大量子元素进行操作时，应该用事件委托的方式，提高性能）
七、取消事件委托
用法：$("委托对象").undelegate()
八、jQuery元素节点操作
1、创建节点
2、插入节点
a、append()和appendTo() 在现存元素的内部，从后面插入元素
输出结果为：
b、prepend()和prependTo() 在现存元素的内部，从前面插入元素
输出结果：
c、after()和insertAfter() 在现存元素的外部，从后面插入元素
输出结果：
d、before()和insertBefore() 在现存元素的外部，从前面插入元素
输出结果：
3、删除节点
$(selector).remove();
4、to do list（计划列表）实例
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <link rel="stylesheet" href="../css/reset.css">
6 <style>
7 .con{ 8 width:360px;
9 margin:30px auto;
10 }
11 .con > h3{ 12 margin-bottom:15px;
13 }
14 .con input{ 15 width:290px;
16 height:30px;
17 }
18 .con button{ 19 width:60px;
20 height:34px;
21 border:0;
22 }
23 .con ul li{ 24 display: flex;
25 margin-top:15px;
26 border-bottom:1px solid #ccc;
27 justify-content: space-between;
28 }
29 .con li p{ 30 /*清除a元素之间的间隙*/
31 font-size:0;
32 }
33 .con li p a{ 34 color:#1b5fdd;
35 font-size:16px;
36 margin-left:10px;
37 }
38 /*弹框样式*/
39 .pop_con{ 40 position:fixed;
41 top:0;
42 right:0;
43 bottom:0;
44 left:0;
45 background:#000;
46 display: none;
47 }
48 .pop{ 49 width:400px;
50 height:220px;
51 position:absolute;
52 left:50%;
53 margin-left:-200px;
54 top:50%;
55 margin-top:-150px;
56 background:#fff;
57 }
58 .pop .pop_title{ 59 padding:15px;
60 display: flex;
61 justify-content: space-between;
62 }
63 .pop .pop_title a{ 64 width:36px;
65 height:36px;
66 line-height:36px;
67 border-radius:50%;
68 background:#c7254e;
69 color:#fff;
70 text-align: center;
71 position:absolute;
72 top:-18px;
73 right:-18px;
74 transition: all 1s ease;
75 }
76 .pop_title h3{ 77 letter-spacing: 2px;
78 font-weight: normal;
79 }
80 .pop_title a:hover{ 81 transform: rotate(360deg);
82 }
83 .pop_message{ 84 height:110px;
85 line-height:110px;
86 text-align: center;
87 }
88 .pop_confirm{ 89 height:36px;
90 text-align: center;
91 }
92 .pop_confirm button{ 93 height:36px;
94 line-height: 36px;
95 padding:0 15px;
96 background: #c7254e;
97 border:none;
98 color:#fff;
99 outline: none;
100 }
101 </style>
102 <script src="../js/jquery-1.12.4.min.js"></script>
103 <script>
104 $(function(){
105 //声明变量
106 var $input = $("#input");
107 $(".pop").click(function(){
108 return false;
109 });
110 $(".pop_confirm").click(function(){
111 $(".pop_con").fadeOut();
112 });
113 $(".close").click(function(){
114 $(".pop_con").fadeOut();
115 });
116 $(".pop_con").click(function(){
117 $(this).fadeOut();
118 });
119 //点击增加按钮，新增元素
120 $("#add").click(function(){
121 var $inputVal = $input.val();
122 //如果输入值为空，出现弹框提示
123 if($inputVal == ""){
124 $(".pop_con").fadeIn();
125 return false
126 }
127 $input.val("");
128 var $li = $("<li><h3>"+$inputVal+"</h3><p><a class='delete' href='javascript:void(0);'>删除</a><a class='prev' href='javascript:void(0);'>上移</a><a class='next' href='javascript:void(0);'>下移</a></p></li>");
129 $("ul").append($li);
130 });
131 //使用事件委托写在一起，提高性能
132 $("ul").delegate("li a","click",function(){
133 //首先判断点击的是哪个a
134 if($(this).attr("class") == "prev"){
135 //判断是否存在该元素
136 if($(this).closest("li").prev().length ==0){
137 $(".pop_message").html("已到顶部!");
138 $(".pop_con").fadeIn();
139 return false
140 }
141 $(this).closest("li").prev().before($(this).closest("li"));
142 }else if($(this).attr("class") == "next"){
143 if($(this).closest("li").next().length ==0){
144 $(".pop_message").html("已到底部!");
145 $(".pop_con").fadeIn();
146 }
147 $(this).closest("li").next().after($(this).closest("li"));
148 }else{
149 $(this).closest("li").remove();
150 }
151 })
152 })
153 </script>
154 </head>
155 <body>
156 <div class="con">
157 <h3>To do list</h3>
158 <input type="text" id="input">
159 <button id="add">增加</button>
160 <ul class="ul">
161 <li>
162 <h3>学习html</h3>
163 <p>
164 <a href="javascript:void(0);" class="delete">删除</a>
165 <a href="javascript:void(0);" class="prev">上移</a>
166 <a href="javascript:void(0);" class="next">下移</a>
167 </p>
168 </li>
169 <li>
170 <h3>学习css</h3>
171 <p>
172 <a href="javascript:void(0);" class="delete">删除</a>
173 <a href="javascript:void(0);" class="prev">上移</a>
174 <a href="javascript:void(0);" class="next">下移</a>
175 </p>
176 </li>
177 <li>
178 <h3>学习ps</h3>
179 <p>
180 <a href="javascript:void(0);" class="delete">删除</a>
181 <a href="javascript:void(0);" class="prev">上移</a>
182 <a href="javascript:void(0);" class="next">下移</a>
183 </p>
184 </li>
185 </ul>
186 </div>
187 <div class="pop_con">
188 <div class="pop">
189 <div class="pop_title">
190 <h3>提示信息</h3>
191 <a href="javascript:void(0);" class="close">X</a>
192 </div>
193 <div class="pop_message">输入框不能为空</div>
194 <div class="pop_confirm">
195 <button>朕知道了</button>
196 </div>
197 </div>
198 </div>
199 </body>
200 </html>to do list
九、滚轮事件与函数节流
1、jquery.mousewheel插件使用
jquery中没有滚轮事件，原生js中的鼠标滚轮事件不兼容，可以使用jquery的滚轮事件插件jquery.nousewheel.js。
2、函数节流
javascript中有些事件的触发频率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件，在短时间内多次触发执行绑定的函数可以巧妙的使用定时器来减少触发的次数，实现函数节流。
3、整屏滚动实例
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>整屏滚动</title>
6 <link rel="stylesheet" href="../css/reset.css">
7 <style>
8 .page_con{ 9 width:100%;
10 /*必须是固定定位，否则会有问题*/
11 position:fixed;
12 top:0;
13 left:0;
14 overflow: hidden;
15 }
16 .page{ 17 position:relative;
18 }
19 .page .main_con{ 20 width:900px;
21 height:400px;
22 position:absolute;
23 left:50%;
24 top:50%;
25 margin-top:-200px;
26 margin-left:-450px;
27 }
28 .page .main_con .left_img{ 29 width:363px;
30 height:400px;
31 }
32 .page .main_con .left_img,.page .main_con .right_img{ 33 opacity: 0;
34 position: relative;
35 filter:alpha(opacity = 0);
36 transition:all 1s ease 300ms;
37 }
38 .page .main_con .right_info{ 39 width:500px;
40 height:300px;
41 }
42 .page .main_con .right_info,.page .main_con .left_info{ 43 font-size:20px;
44 line-height:50px;
45 color:#666;
46 text-indent:2em;
47 text-align:justify;
48 position:relative;
49 opacity:0;
50 filter:alpha(opacity=0);
51 transition:all 1000ms ease 300ms;
52 }
53 .main_con .right_img{ 54 width:522px;
55 height:400px;
56 top:-50px;
57 }
58
59 .main_con .left_info{ 60 width:350px;
61 height:300px;
62 bottom:-50px;
63 }
64 .main_con .left_img,.main_con .left_info{ 65 left:-50px;
66 }
67 .main_con .right_img,.main_con .right_info{ 68 right:-50px;
69 }
70 .main_con .center_img{ 71 opacity: 0;
72 filter:alpha(opacity = 0);
73 text-align: center;
74 transition: all 1s ease 300ms;
75 }
76 .moving .main_con .left_img,.moving .main_con .left_info,.moving .main_con .center_img{ 77 left:0;
78 opacity: 1;
79 filter:alpha(opacity = 100);
80 }
81 .moving .main_con .center_img{ 82 transform: scale(0.8);
83 }
84 .moving .main_con .right_info,.moving .main_con .right_img{ 85 margin-top:50px;
86 right:0;
87 opacity: 1;
88 filter:alpha(opacity = 100);
89 }
90 .moving .main_con .right_img{ 91 /*top:25px;*/
92 }
93 .page1{ 94 background:orange;
95 }
96
97 .page2{ 98 background:lightgreen;
99 }
100 .page3{101 background:cyan;
102 }
103 .page4{104 background:pink;
105 }
106 .page5{107 background:lightblue;
108 }
109 .points{110 width:16px;
111 height:176px;
112 position:fixed;
113 top:50%;
114 right:20px;
115 margin-top:-88px;
116 }
117 .points li{118 width:16px;
119 height:16px;
120 line-height:16px;
121 margin-top:15px;
122 border:1px solid #666;
123 border-radius:50%;
124 }
125 .points li:hover,.points li.active{126 width:6px;
127 height:6px;
128 cursor: pointer;
129 border:6px solid #fff70c;
130 }
131 </style>
132 <script src="../js/jquery-1.12.4.min.js"></script>
133 <script src="../js/jquery.mousewheel.min.js"></script>
134 <script>
135 $(function(){
136 $(".page1").addClass("moving");
137 var page = $(".page");
138 var len = page.length;
139 var currentPage = 0;
140 var timer = null;
141 //获取显示区域的高度
142 var $h = $(window).height();
143 page.css({height:$h});
144 $(window).mousewheel(function(event,dat){
145 //向下滑dat为-1,向上滑dat为1
146 //清除前面开的定时器，实现函数节流
147 clearTimeout(timer);
148 timer = setTimeout(function(){
149 if(dat == -1){
150 currentPage++;
151 if(currentPage>len-1){
152 //如果大于4的话，就不往下滑
153 currentPage=len-1;
154 }
155 }else{
156 currentPage--;
157 //判断当前所在页是否小于0，如果小于就不往上滑。
158 if(currentPage<0){
159 currentPage=0;
160 }
161 }
162 $(".page").eq(currentPage).addClass("moving").siblings().removeClass("moving");
163 $("ul li").eq(currentPage).addClass("active").siblings().removeClass("active");
164 $(".page_con").animate({top:-$h*currentPage},300);
165 },200);
166
167 });
168 $(".points").delegate("li","click",function (){
169 $(".page").eq($(this).index()).addClass("moving").siblings().removeClass("moving");
170 $(this).addClass("active").siblings().removeClass("active");
171 currentPage = $(this).index()+1;
172 //首先判断下点击的元素在当前选中的元素的上面还是下面，如果是在上面的话，top值为正值，否则为负值。
173 if($(this).index()<$(".active").index()){
174 $(".page_con").animate({top:$h*$(this).index()});
175 }else{
176 $(".page_con").animate({top:-$h*$(this).index()});
177 }
178 })
179 })
180 </script>
181 </head>
182 <body>
183 <div class="page_con">
184 <div class="page page1">
185 <div class="main_con clearfix">
186 <div class="page_img float_left left_img">
187 <img src="../images/001.png" alt="">
188 </div>
189 <div class="page_content float_right right_info">
190 Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，那是网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。
191 </div>
192 </div>
193 </div>
194 <div class="page page2">
195 <div class="main_con clearfix">
196 <div class="page_content float_left left_info">
197 2005年以后，互联网进入web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端有此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上的软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
198 </div>
199 <div class="page_img float_right right_img">
200 <img src="../images/002.png" alt="">
201 </div>
202 </div>
203 </div>
204 <div class="page page3">
205 <div class="main_con clearfix">
206 <div class="page_img float_left left_img">
207 <img src="../images/004.png" alt="">
208 </div>
209 <div class="page_content float_right right_info">
210 Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，那是网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。
211 </div>
212 </div>
213 </div>
214 <div class="page page4">
215 <div class="main_con clearfix">
216 <div class="page_content float_left left_info">
217 2005年以后，互联网进入web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端有此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上的软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
218 </div>
219 <div class="page_img float_right right_img">
220 <img src="../images/003.png" alt="">
221 </div>
222 </div>
223 </div>
224 <div class="page page5">
225 <div class="main_con">
226 <div class="page_img center_img">
227 <img src="../images/005.png" alt="">
228 </div>
229 </div>
230 </div>
231 </div>
232 <ul class="points">
233 <li class="active"></li>
234 <li></li>
235 <li></li>
236 <li></li>
237 <li></li>
238 </ul>
239 </body>
240 </html>整屏滚动
转载于:https://www.cnblogs.com/qijunjun/p/7215426.html
事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流相关推荐
- jquery元素节点操作
jquery元素节点操作 创建节点 var $div = $('<div>'); var $div2 = $('<div>这是一个div元素</div>'); 插入 ...
- jquery 元素节点操作 - 创建节点、插入节点、删除节点
jquery的节点操作说明 前面的篇章对于jquery的元素操作大部分是使用html()的方式来操作,这种直接使用字符串创建的方式也是性能最高的. 使用html()操作节点 首先编写一个div包含一个 ...
- 13前端学习之WebAPI(三):节点操作、事件高级、DOM事件流、事件委托冒泡
文章目录 一.节点操作: 1. 删除节点: 1.2. 案例:删除留言 2. 赋值(克隆)节点: 3. 案例:动态生成表格: 3.1 案例分析: 3.2 实现: 4. 创建元素的三种方式: 4.1 区别 ...
- js day04DOM节点操作、事件对象与BOM
DOM节点操作.事件对象与BOM V1.2 一.复习提问 js中目前学到的事件由哪些 如何阻止a链接 设置表单例如disabled selected checked的正确方式是什么? ...
- jQuery DOM节点操作
开发工具与关键技术:Adobe Dreamweaver JavaScript 作者:执~漠 撰写时间:2020年4月22日 在 HTML DOM 中,所有事物都是节点. jQuery创建节点 jQue ...
- 属性操作与元素节点操作和onscroll
属性操作 input的name,value img的src a的href等属性都属于天生自带的属性 id,class,style,title属性也都是天生自带的属性 属性节点包含属性,元素节点包含属性 ...
- web前端(5)：了解jQuery(常见选择器+相关尺寸+元素/节点操作)
文章目录 一.jQuery是什么 二.JQuery的常见选择器 三.JQuery的元素操作 四.相关尺寸函数 五.常用的事件方法 1. 绑定事件的两种方式 2.解除绑定 六.节点操作 七.经典案例 1 ...
- jQuery DOM 节点操作
DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的"M".页面中的元 素结构就是通过这种节点模型来互相对应着的,我们只需要通过这些节点关系,可以创建. 插入.替换. ...
- 第十节：委托和事件(2)(泛型委托、Func和Action、事件及与委托的比较)
一. 泛型委托 所谓的泛型委托,即自定义委托的参数可以用泛型约束,同时内置委托Func和Action本身就是泛型委托. 将上一个章节中的Calculator类中的方法用自定义泛型委托重新实现一下. 1 ...
最新文章
- 模块化、层次化网络监控平台
- JavaWeb上传图片到服务器，存储到数据库，并在页面显示
- Sitecore® 8.2 Professional Developer考试心得
- DC使用教程系列1-.synopsys.dc.setup的建立
- 用VuePress来搭建一个极简的静态网站
- 自编码器深度分析+定制特征描述子构建初探
- nginx——location 优先级
- css 宋体_Java前端基础(一)之html/css
- 《JavaScript设计模式与开发实践》——第3章 闭包和高阶函数
- 希望不要T我~~哈哈...
- 基于linux 的2048
- (王道408考研数据结构)第五章树-第一节：树的定义、基本用语和常考性质
- 陈年牵手徐静蕾之一箭双雕
- 向量距离计算 java_在机器学习中扮演着极为重要角色的向量
- 寒冬之下，移动开发没人要了， iOS 开发者该 何去何从？
- mysql表空间不足_MySQL Innodb表空间不足的处理方法 风好大
- UVA 10765 Doves and bombs 割点
- Volume Manager for mac 详细教程
- 组织化视角的智慧城市
- cad相对坐标快捷键_CAD快捷键及命令大全