首页 > 网站开发 > JavaScript教程 >
-
WEB前端第三十四课——js事件对象this、event
1.this对象
this 是在函数运行时,自动生成的一个用来“指代函数调用者”的对象
this只能在函数内部使用
2.event对象
当DOM Tree中某个事件被触发的时候,会同时自动产生一个用来描述事件所有相关信息(如触发事件的元素、事件类型等)的对象,这个对象就是event(事件对象)
获取方式:
① 直接通过 event来获取
② 通过函数传参数的形式来使用,一般使用形参“e或 eve”来代替
1
2
3
|
div.onclick= function (e) { console.log(e);} div.onmousedown= function (eve) { console.log(eve);} div.onmouseup= function () { console.log(event);} |
3.event常用属性
event对象中提供了一系列的属性和方法用以获取发生事件的相关信息
① type,
用于获取当前事件的类型,为只读属性,依赖于事件的触发而存在
语法:event .type;
② bubbles,
用于获取当前触发的事件的类型是否支持 冒泡,如果支持则返回 true,否则返回 false
注意,bubbles属性指的是该属性是否支持冒泡,和事件的处理机制无关!
语法:event .bubbles;
③ eventPhase,
用于获取事件传导至当前节点时所处的状态(用如下编号表示):
1,代表事件处于捕获状态
2,代表事件处于真正的触发者
3,代表事件处于冒泡状态
语法:event .eventPhase; //返回值为只读属性
④ target 和 currentTarget
target,返回事件的真正触发者(事件的触发节点)
currentTarget,返回事件的监听者(事件的绑定节点)
语法:
event .target;
event .currentTarget;
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
|
<body> <div class = "div2" style= "width: 500px;height: 600px;background-color: lightgreen;" >div2 <div class = "div1" style= "width:200px;height:300px;background-color:#df5000;" >div1</div> </div> <script> var div1=document.querySelector( '.div1' ); var div2=document.querySelector( '.div2' ); // 冒泡机制 div1.onclick= function (e) { console.log( 'div1:' , '状态' +event.eventPhase, '触发者' ,e.target.textContent, '监听者' +e.currentTarget.innerHTML,event.type); }; div2.onclick= function (e) { console.log( 'div2:' , '状态' +event.eventPhase, '触发者' +e.target.textContent, '监听者' +e.currentTarget,event.type); }; document.body.onclick= function (e) { console.log( 'body:' , '状态' +event.eventPhase, '触发者' +e.target.textContent, '监听者' ,e.currentTarget,event.type); } // 捕获机制 div1.addEventListener( 'mouseup' , function (e) { console.log( 'div1:' , '状态' +e.eventPhase, '触发者' +e.target.textContent, '监听者' +e.currentTarget.textContent,e.type); }, true ); div2.addEventListener( 'mouseup' , function (e) { console.log( 'div2:' , '状态' +e.eventPhase, '触发者' +e.target.textContent, '监听者' +e.currentTarget,e.type); }, true ); document.body.addEventListener( 'mouseup' , function (e) { console.log( 'body:' , '状态' +e.eventPhase, '触发者' +e.target.textContent, '监听者' ,e.currentTarget,e.type); }, true ); </script> </body> |
4.event常用方法
① stopPropagation(),
该方法用于阻止事件从当前节点传播到下一个节点
语法:event .stopPropagation();
注意,stopPropagation()方法虽然可以阻断事件的传播,但并不会影响同一节点上其他事件句柄!
② preventDefault(),
该方法用于取消当前节点的默认行为(比如超链接的点击跳转行为),该方法没有返回值
语法:event .preventDefault();
③ cancelable,
该属性用于判断当前节点能否使用 preventDefault()方法来取消默认行为,如果可以返回 true,否则返回 false
语法:event .cancelable;
5.图片验证案例
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
<html lang= "en" > <head> <meta charset= "UTF-8" > <title>图片验证</title> <style> .div1{ margin: 100px auto 0px; width: 500px; height: 500px; background-image: url( "Images/ButterflyPart1.jpg" ); background-size: contain; position: relative; } .div2{ width: 152px; height: 138.6px; background-image: url( "Images/ButterflyPart2.jpg" ); background-size: contain; box-shadow: 1px 1px 2px 2px aqua; position: absolute; } .freshBtn{ position: absolute; bottom: 0; right: 0; color:darkgreen; font-weight: bold; letter-spacing: 2px; background-color: rgba(90,35,20,.3); outline: none; } </style> </head> <body> <div class = "div1" > <div class = "div2" ></div> <button class = "freshBtn" >重新验证</button> </div> <script> var idtPic=document.querySelector( '.div1' ); var subPic=document.querySelector( '.div2' ); var freshBtn=document.querySelector( '.freshBtn' ); var flag= false ; var refresh= true ; subPic.onmousedown= function () { if (refresh== true ){ flag= true ; } console.log(flag); }; subPic.onmousemove= function (e) { if (flag== true ){ var moveLeft=e.clientX-533.5-76; var moveTop=e.clientY-100-69.3; console.log(moveLeft,moveTop); switch ( true ){ case moveLeft<0:moveLeft=0; break ; case moveLeft>348:moveLeft=348; break ; case moveLeft>=0&&moveLeft<=348:subPic.style.left=moveLeft+ 'px' ; break ; } switch ( true ){ case moveTop<0:moveTop=0; break ; case moveTop>361.7:moveTop=361.7; break ; case moveTop>=0&&moveTop<=361.7:subPic.style.top=moveTop+ 'px' ; break ; } /* subPic.style.left=moveLeft+'px'; subPic.style.top=moveTop+'px';*/ } if (moveLeft>80&&moveLeft<175&&moveTop>170&&moveTop<260){ subPic.style.boxShadow= '0 0 0' ; } else { subPic.style.boxShadow= '1px 1px 2px 2px aqua' ; } }; subPic.onmouseup= function () { flag = false ; refresh= false ; subPic.style.boxShadow= '1px 1px 2px 2px aqua' ; var locationLeft=parseInt(subPic.style.left); var locationTop=parseInt(subPic.style.top); if (locationLeft>110&&locationLeft<150&&locationTop>200&&locationTop<235){ alert( '验证通过!' ) } else { alert( '验证失败!' ) } }; freshBtn.onclick= function () { refresh= true ; }; </script> </body> </html> |
① 设置元素移动时的 Left和 Top值需使用“style”属性,
语法:元素节点 .style .left | top = ' 数值 ';
注意,style 属性的值必须是“字符串形式”,因此通常使用例如 clientX+'px'这种形式进行赋值
② 将 字符串类型的数值 转换为 数字形式的数值,使用 parseInt()方法
语法:parseInt(string,radix);
参数radix表示数字的基数(取值为 2~36之间),默认为 10
parseInt()方法的特点:
parseInt()方法用于解析一个字符串,并返回一个整数,示例:parseInt('12.34'); // 12
当参数 radix为 0、null、undefined时,parseInt()会根据 string自动判断基数:
如果 string是以“0~9”的数字开头,parseInt()将其解析为十进制的整数,示例:parseInt('011'); // 11
如果 string是以“0x”开头,parseInt()会将 string的其余部分解析为十六进制的整数,示例:parseInt('0x10'); // 16
如果 string的开头或结尾有空格,在转换时会自动被去除
在字符转换过程中,是逐个字符一次转换,遇到不能转换为数字的字符时就会停止继续转换,返回已转换好的部分
只有 string中的第一个数字会被返回(不是第一位数字),示例:parseInt('15e2'); // 15
如果 string的第一个字符不能转换为数字,则 parseInt()会返回 NaN,示例:parseInt('.3'); // NaN
如果 string不是字符串(包括数字),则该方法会先将其转换为字符串,然后再进行数字转换,示例:parseInt(12.3) 等同于 parseInt('12.3')
③ parseFloat(),将一个字符串转换为浮点数
用法与 parseInt()类似,但 parseFloat()方法计算科学计数法符号(e)
另外,用于数字转换的还有 Number()方法
6.IE环境中的Event事件
IE与非 IE中Event的区别:
① 非IE下的Event事件的默认值为 undefined,而IE中 Event的默认值为null
② 非 IE下可以随意通过 DOM0或 DOM2中的参数来调用 event对象,而 IE中 DOM0级无法通过传参的形式调用 event(DOM2可以)
由于 event本身归属于 window的一个属性,因此,可以在函数中通过下面声明方式解决 event对象的兼容性问题
语法:var eve = e || window .event;
示例:元素节点 .onclick=function(eve){
var e = eve || window .event; // 在非IE环境下 e=eve,在IE下时为 window .event
console .log(e);
};
7.IE中Event对象常用属性
① srcElement,代表事件的真正触发者,等同于非 IE下的 target属性
为了解决不同浏览器下获取 target的兼容性问题,可以使用如下声明方式:
语法:var target = eve .target || eve .srcElement;
② cancelBubble,用于阻止事件在当前节点上的冒泡行为,类似于非 IE下的 stopPropagation()方法
语法:event .cancelBubble = false;(默认值)
event .cancelBubble = true;(取消冒泡)
注意,stopPropagation表示阻断事件传递,而 cancelBubble属性则仅阻断事件冒泡,对捕获无效!
③ returnValue,用于设置是否取消当前节点的默认行为,类似于非 IE下的 preventDefault()方法
语法:event .returnValue = false;(取消默认行为)
event .returnValue = true;(默认值)
④ 阻断冒泡和取消默认行为,解决IE与非IE兼容性问题参考代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
var Event={ stopBubble: function () { if (event.stopPropagation){ event.stopPropagation(); } else { event.cancelBubble= true ; } }, cancelDefault: function () { if (event.preventDefault){ event.preventDefault(); } else { event.returnValue= false ; } } } |
出处:https://www.cnblogs.com/husa/p/13593611.html