|
1.this对象 this 是在函数运行时，自动生成的一个用来“指代函数调用者”的对象 this只能在函数内部使用 2.event对象 当DOM Tree中某个事件被触发的时候，会同时自动产生一个用来描述事件所有相关信息（如触发事件的元素、事件类型等）的对象，这个对象就是event（事件对象） 获取方式： ① 直接通过 event来获取 ② 通过函数传参数的形式来使用，一般使用形参“e或 eve”来代替 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； <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.图片验证案例 <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兼容性问题参考代码 var Event={
stopBubble:function () {
if (event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
},
cancelDefault:function () {
if (event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
}
}
|
|
|
