事件——《JS高级程序设计》

ztj100 2025-08-01 22:16 5 浏览 0 评论

一、事件流

1. 事件流描述的是从页面中接收事件的顺序

2. 事件冒泡（event bubble）：事件从开始时由最具体的元素（就是嵌套最深的那个节点）开始，逐级向上传播到较为不具体的节点（就是Document）

        <!doctype html>
        <html>
 <head>
 <title>事件冒泡</title>    
 </head>
 <body>
 <div id = 'myDiv'>
 点击这里
 </div>
 </body>
        </html>
        /*
 如果点击了div元素，那么这个click事件会按如下顺序传播
 1. <div>
 2. <body>
 3. <html>
 4. document
 click事件首先在div元素上发生，也就是我们点击的元素，然后body元素发生点击事件……一层一层往上冒 
        */

3. 事件捕获：不太具体的节点（Document根节点）更早接收到事件，最具体的节点最后接收到事件，刚好与冒泡相反

4. DOM事件流三阶段：

1. 事件捕获阶段：首先发生，为截获事件提供机会

2. 处于目标阶段：事件在此触发

3. 事件冒泡阶段：在这个阶段对事件作出相应

4. 跨浏览器的事件处理函数【可复用，最好手写】：

 var EventUtil = {

 addHandler:function(element , type  , handler){
 if(element.addEventListener){
 element.addEventListener(type , handler ,false);
 }

 else if(element.attachEvent){
 element.attachEvent('on'+type , handler);
 }

 else{
 element['on'+type] = handler;
 }
 }

 removeHandler:function(element , type  , handler){
 if(element.removeEventListener){
 element.removeEventListener(type , handler ,false);
 }

 else if(element.detachEvent){
 element.detachEvent('on'+type , handler);
 }

 else{
 element['on'+type] = Null;
 }
 }

 getEvent:function(event){
 return event?event:window.event;
 },
 
 getTarget:function(event){
 return event.target||event.srcElement;
 },

 preventDefault:function(event){
 if(event.preventDefault){
 event.preventDefault;
 }else{
 event.returnValue = false;
 }
 },

 stopPropagation:function(event){
 if(event.stopPropagation){
 event.stopPropagation;
 }else{
 event.cancelBubble = true;
 }
 }
 
 };

5. 事件处理程序：响应某个事件的处理函数就是事件处理函数

1. 常用的两个方法：用于处理指定和删除事件处理函数的操作方法：
addEventListener/removeEventListener

2. 这两个方法接受3个参数：（事件名，处理函数，[,布尔值]）。布尔值默认为false，表示在冒泡阶段调用事件处理函数，true表示在捕获阶段调用事件处理函数

 btn.addEventListener('click' , function{} , false)
 //可添加多个事件处理函数
 //移除↓
 btn.removeEventListener('click' , handler [, false])//移除的事件处理函数不能是匿名函数

6. 事件对象：在触发DOM的某个事件时，会产生一个事件对象：event，这个对象包含着所有的事件信息

1. currentTarget:绑定事件处理函数的那个目标。在事件处理程序内部，this始终等于currentTarget的值

2. target:事件被触发的那个目标

3. type：事件的类型：是click，还是mouseover……当需要一个函数处理多种事件时可以：

    var handler = function(event){
 switch(event.type){
 case 'click':
 function{}
 break;
 
 case 'mouseover':
 function{}
 break;
 
 case 'mouseout':
 function{}
 break;
 
 
 }
 }

 btn.onclick = handler;
 btn.mouseover = handler;
 btn.mouseout = handler;

4. 阻止事件的默认行为，使用preventDefault方法，只有cancelable属性为true的事件，才能用此方法阻止

5. stopPropagation:停止事件传播，取消以后事件的捕获和冒泡

6. stopImmediatePropagation 的功能比stopPropagation 多一些，除了可以阻止事件冒泡之外，还可以把这个元素绑定的同类型事件函数也阻止了。

7. 主要的事件类型：

1. UI事件：用户与页面元素交互时触发

1. load事件：页面完全加载后（包括所有图像、js、css等外部资源）触发。图像上也可以触发本事件

2. unload事件：只要用户从一个页面切换到另一个页面（重新加载页面、点击某个离开页面的链接等）就会发生unload事件

3. resize事件：浏览器窗口宽高变动（包括最大化最小化）

4. scroll事件

2. 焦点事件：（最常用的）

1. focus

2. blur

3. 鼠标事件

1. click

2. dbclick

3. mousemove

4. mouseenter

5. …………

6. event.clientX/Y:事件发生时，鼠标指针位置在**客户区**的坐标

7. event.pageX/Y:事件发生时，鼠标指针位置在**页面中**的坐标

8. event。screenX/Y:事件发生时，鼠标指针位置在**整个电脑屏幕**的坐标

4. 滚轮事件

1. mousewheel

5. 文本事件

1. textInput:用户在可编辑区输入字符触发

6. 键盘事件

1. keydown:按下键盘任意键触发，按住不放重复触发

2. keypress：按下键盘字符键触发，按住不放重复触发

3. keyup:释放按键时触发

7. 合成事件：基本无用

8. 变动事件：

9. 设备事件：

1. orientationchange事件

2. devicemotion事件：设备移动

3. 触摸与手势事件

1. touchstart

2. touchmove

3. touchend：手指从屏幕移开时触发

4. gesturestart：一个手指按在屏幕上，另一个手指触摸屏幕时触发

5. gesturechange：

6. gestureend:手指从屏幕上移开

8. 事件代理【重点】：

1. 事件处理函数过多，性能势必下降，解决方法就是事件委托（代理）

2. 事件代理利用了事件冒泡原理，只指定一个事件处理程序，用来管理所有类型的所有事件。比如：可以为整个页面指定一个click事件处理函数，而不用给每个需要单击的元素分别添加事件处理函数

 <ul>
 <li id = 'li1'></li>
 <li id = 'li2'></li>
 <li id = 'li3'></li>
 </ul>
 //为每个li元素都添加一个事件处理函数，太麻烦。只需要给DOM树中尽量最高层添加事件处理函数
 EventUtil.addHandler(ul , 'click'  ,handler);
 
 function handler(event){
 switch(event.target.id){
 case 'li1':
 function{};
 break;

 case 'li2':
 function{};
 break;

 case 'li3':
 function{};
 break;
 }
 }

 ------------------解析------------------
 /*
 1. 用事件委托只为ul元素添加了一个click事件，由于所有的li元素都是ul的子节点，在li上的事件会往上冒泡，最终会冒到ul上，触发在ul上绑定的事件处理函数。
 2. 因为只为一个DOM元素，添加了一个事件处理函数，占用内存更小，速度更快
 3. 如果可行的话，可以考虑为Document添加一个事件处理函数，优点如下：
 1. Document对象访问很快，可以在页面生命周期的任何时间为它添加事件处理函数
 2. 在页面中设置事件处理函数所需的时间更少，对DOM的引用更少
 3. 最适合采用的事件包括：click、mousedown/up、keydown/up/press
 */

cancelbubble

上一篇：前端开发中79条不可忽视的知识点汇总
下一篇：Web前端必备基础知识点，百万网友:牛逼

事件——《JS高级程序设计》

相关推荐

取消回复欢迎你发表评论:

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

Vue-实现自定义插件弹窗（vue 实现弹窗）

MySQL中这14个小玩意，让人眼前一亮!

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

详解MySQL 字符串拼接之concat\concat_ws\group_concat

如何发个 npm 包?

如何快速切换node版本?利用n包快速切换nodejs版本

【Python机器学习系列】建立多层感知机模型预测心脏疾病

事件——《JS高级程序设计》

相关推荐

取消回复欢迎 你 发表评论:

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

Vue-实现自定义插件弹窗（vue 实现弹窗）

MySQL中这14个小玩意，让人眼前一亮!

旗舰机新标杆 OPPO Find X2系列正式发布 售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

详解MySQL 字符串拼接之concat\concat_ws\group_concat

如何发个 npm 包?

如何快速切换node版本?利用n包快速切换nodejs版本

【Python机器学习系列】建立多层感知机模型预测心脏疾病

取消回复欢迎你发表评论:

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起