码迷,mamicode.com
首页 > Web开发 > 详细

jsDOM事件流

时间:2020-09-17 15:43:09      阅读:26      评论:0      收藏:0      [点我收藏+]

标签:跳转   委派   标准   属性   事件冒泡   else   dde   ret   功能   

 1 DOM事件流:
 2     事件流描述的是从页面中接受事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播,这个过程即DOM事件流。
 3     DOM事件流分为三个阶段:
 4         1,捕获阶段
 5         2,当前目标阶段
 6         3,冒泡阶段
 7     事件冒泡:IE最早提出,事件开始是由最具体的元素接收,然后逐级向上传播到DOM最顶层的阶段
 8     事件捕获:网景最早提出,由DOM最顶层节点开始,然后逐级向下传播到最具体的元素接收的过程
 9     注意:
10         1,js代码中只能执行捕获或者冒泡其中的一个阶段;
11         2,onclick和attachEvent只能得到冒泡阶段;
12         3,addEventListener(type,listener[,useCapture])第三个参数如果是true,表示事件捕获阶段调用事件处理程序,如果是false或者不写,表示事件冒泡阶段调用事件处理程序;
13         4,onblur,onfocus,onmouseenter,onmouseleave没有冒泡的;
14     事件对象:event对象代表事件的状态,事件发生后,跟事件的一系列信息数据集合都会在这个对象里面
15         eventTarget.onclick = function(event){}
16         eventTarget.addEventListener(click,function(event){})
17         //event就是事件对象,可以写成e或者evt
18         ie兼容写法:
19             e = e || window.e;
20     常见事件对象的属性和方法:
21         返回触发事件的对象:
22             e.target    //返回触发事件的对象 
23             e.srcElement    //返回触发事件的对象,IE678使用
24         返回事件的类型
25             e.type    //返回事件的类型,比如click,mouseover,不带on
26         阻止默认事件
27             e.returnValue    //该属性阻止默认事件非标准ie678使用,比如不让链接跳转
28             e.preventDefault() //该方法阻止默认事件,标准,比如不让链接跳转,表单提交;
29         阻止冒泡
30             e.stopPropagation()    //阻止冒泡,标准
31             e.cancelBubble    //该属性阻止冒泡,非标准,ie678使用 window.event.cancelBubble = true;
32         阻止冒泡事件兼容性问题:
33             if( e && e.stopPropagation){
34                 e.stopPropagation();
35             }else{
36                 widow.event.cancelBubble = true;
37             }
38     注意:
39         this返回的是绑定事件的对象;
40         e.target返回的是触发事件的对象(元素)
41         currentTarget返回的也是绑定事件的对象,ie678不兼容;
42         return false; 也可以阻止默认行为,没有兼容性问题;return后面的代码也不会执行,addEventListener方法里面没有效果,只在传统方法里面有用;
43     事件委派(代理,委派)
44         事件委派也称事件处理,在jQuery里面也称事件委派
45         事件委托的原理:
46             不是每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点上;
47     常用的鼠标事件:
48         鼠标事件对象:MouseEvent;
49         e.clientX    //返回鼠标对于浏览器窗口可视区的x坐标
50         e.clentY    //返回鼠标对于浏览器窗口可视区的Y坐标
51         e.pageX        //返回鼠标相对于文档页面的X坐标,IE9+支持
52         e.pageY        //返回鼠标相对于文档页面的Y坐标,IE9+支持
53         e.screenX    //返回鼠标相对于电脑屏幕的X坐标
54         e.screenY    //返回鼠标相对于电脑屏幕的Y坐标
55     常用的键盘事件:
56         onkeyup        //按键弹起触发
57         onkeydown    //按键按下触发
58         onkeypress    //某个键按下触发,不能识别功能键,Ctrl,shift,箭头等等;
59             document.addEventListener(keyup,function(){    //不能加on
60                 /* 函数体 */
61             })
62             /* 三个事件的执行顺序,keydown-keypress-keyup;     */
63         键盘事件对象:
64             keyCode:    //返回按下键的ASCII码值;
65             keyup&&keydown事件不区分字母大小写,可以press区分大小写;

 

jsDOM事件流

标签:跳转   委派   标准   属性   事件冒泡   else   dde   ret   功能   

原文地址:https://www.cnblogs.com/UnfetteredMan/p/13619666.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!