WEB前端第三十四课——js事件对象this、event

  • A+
所属分类:Web前端
摘要

1.this对象  this 是在函数运行时,自动生成的一个用来“指代函数调用者”的对象

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

WEB前端第三十四课——js事件对象this、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> 

  WEB前端第三十四课——js事件对象this、event

 

 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);

       };