- A+
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);
};
