Js 事宜

一:js中常见得事宜

 

(1) : 鼠标事宜         click :点击事宜         dblclick :双击事宜         contextmenu : 右键单击事宜         mousedown :鼠标左键按下事宜         mouseup :鼠标左键抬起事宜         mousemove :鼠标移动         mouseover :鼠标滑入事宜         mouseout :鼠标滑出事宜         mouseenter :鼠标移入事宜         mouseleave :鼠标移出事宜
(2):键盘事宜         keyup : 键盘抬起事宜         keydown : 键盘按下事宜         keypress : 键盘按下事宜
(3):表单事宜         change : 表单内容改变事宜         input : 表单内容输入事宜         blur : 表单失去焦点         focus: 表单获取焦点  
二:事宜侦听历程详解
  
  1:事宜侦听 – 就是给事宜源(dom元素)绑定一个事宜
         给DOM元素添加一个事宜侦听(监听),这个DOM元素只能收到对应事宜类型的新闻     
语法
DOM元素.addEventListener(事宜类型,事宜回调函数,是否捕捉时执行)   – addEventListener这个就是用来侦听事宜得关键字    侦听事宜addEventListenerd的三个参数参数:                  
参数1:事宜类型 – 必须是字符串,可以设置为随便字符串,然则部门字符串是系统事宜类型                 
参数2: 事宜回调函数 – 指向一个函数,当收到事宜时执行该函数,若是没有收到不执行函数,写侦听事宜时不执行函数                    注重1:事宜回调函数 – 有且仅有一个参数 为 e  – event工具                    注重2:e 是一个事宜工具,侦听事宜收到新闻时获得的事宜工具      
参数3:是否捕捉时执行 – 默认值是false,在冒泡时执行,捕捉时不执行 / 若是设置为true,在捕捉时执行

1 // 建立一个侦听事宜 , 事宜类型为 点击 click ,回调函数为clickHandler ,默认 冒泡
2             document.addEventListener('click',clickHandler)
3 
4 // 事宜回调函数的参数  MouseEvent - 鼠标事宜
5             function clickHandler(e) { 6  console.log("我被点击了") 7 }

  在上面得代码中侦听事宜得工具为 document 就是网页,当我们点击网页得任何一个位置就会触发点击事宜,那么就会执行事宜的回调函数 clickHandler,打印效果

  1.2:删除事宜  

    删除事宜 : 语法 – 侦听工具.removeEventListener(事宜类型,事宜回调函数)  IE8 以上支持                删除事宜的兼容写法:attachEvent 仅IE8及以下支持    事宜类型   “on”+type   没有捕捉、冒泡阶段选项

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7 </head>
 8 <body>  
 9     <button id="btn">按钮</button>
10 </body>
11 <script>
12         // 获取dom元素
13         var btn = document.querySelector('#btn')
14         // 侦听事宜
15         btn.addEventListener('click',clickHandler1) 16 // 事宜回调函数 17 var num = 0 18 function clickHandler1(e){ 19 num++ 20 console.log('当num > 3 得时刻删除事宜') 21 if (num>3){ 22 // 删除事宜 23 e.currentTarget.removeEventListener('click',clickHandler1) 24  } 25  } 26 </script> 27 </html>

  当我们不停点击按钮,就会不停的触发事宜,每点击一次 num 的值就会增添,当num大于3时,就删除本次建立的事宜和事宜回调函数,为什么要删除事宜呢?由于当元素的事宜不再使用时,必须删除,否则会造成内存聚积,侦听事宜都市被存储在堆中,当元素被删除了,也必须删除该元素的所有事宜。

 

  2:事宜侦听 与 抛发  

   事宜侦听语法 : 事宜侦听工具.addEventListener(事宜类型,事宜回调函数,是否捕捉时执行)

   建立事宜工具语法:var evt = new Event(事宜类型)  -指建立一个事宜工具

        抛发事宜语法: 事宜侦听工具.dispatchEvent(接受事宜工具变量)    在我们建立事宜的历程中,必须先侦听在抛发   – 若是先抛发在侦听,我们将无法获取到事宜是否被触发             在我们使用侦听事宜的历程中需要注重:                 1:事宜抛发一样平常分两种 : 系统抛发事宜 /  自定义抛发事宜(需要我们自己建立事宜工具)                 2:侦听 和 抛发的工具 是同一个                 3:侦听 和 抛发的事宜类型 完全相同                 4:事宜回调函数不能使用return 返回值,然则可以return 跳出        

 1 // 侦听事宜
 2         document.addEventListener('奥里给',customHandler)
 3 // 建立一个事宜工具 
 4         var evt = new Event('奥里给') 5 // 抛发事宜 6  document.dispatchEvent(evt) 7 // 事宜回调函数 8 function customHandler(e) { 9  console.log(e.type) //e.type 查看事宜的类型
10 }

 

 

三:事宜三阶段
          一阶段:捕捉 由外到内                  二阶段:目的 到达目的                  三阶段:冒泡 由内到外   事宜三阶段案例:先写好html代码显示三个靠山颜色不一样的块。如下
Js 事宜
js代码

 1 // 获取 标签
 2     var div0 = document.querySelector('.div0')    // 绿色靠山块
 3     var div1 = document.querySelector('.div1')    // 浅粉色块
 4     var div2 = document.querySelector('.div2')    // 红色块
 5 
 6      // 给每个块都添加点击事宜  
 7     div0.addEventListener('click',clickHandler0)
 8     div1.addEventListener('click',clickHandler1) 9 div2.addEventListener('click',clickHandler2) 10 function clickHandler0(e){ 11 console.log('点击div0') 12  } 13 14 function clickHandler1(e){ 15 console.log('点击div1') 16 17  } 18 19 function clickHandler2(e){ 20 console.log('点击div2') 21 }

当我们在点击红色块时,我们会发现,div1和div0都被打印了,这就是事宜的冒泡,我们点击的真正目的为红色块div2,然则却触发了其他两个块,那么事宜若何举行三阶段的呢?   首先当我们点击红色块div2时,事宜进入一阶段,捕捉阶段,他会先进入div0,查找目的,当没有发现,会进入下一层查找目的,当进入粉丝块时,也没有发现我们想要的目的,当进入红色块div2 时,就会找到我们点击的目的,div2,这个时刻事宜的一阶段就酿成了二阶段,目的阶段,就会最先向外发送信息触发事宜,执行事宜回调函数,并由二阶段酿成三阶段,冒泡阶段,这时是由内向外的一个历程,不停的往外并触发经由的块的事宜,直到最外层,这就是事宜三阶段的全历程。那么我们可不可以让他不冒泡呢,有 

阻止冒泡语法 e.stopPropagation()  只需要写在想住手冒泡的事宜回调函数中

Js 事宜

阻止事宜冒泡 – 当我们只想让红色块触发事宜,其他两个块不触发就是不冒泡,就在红色块的事宜回调函数中,写上阻止事宜冒泡,这样当事宜到二阶段找到目的时,就不会往外冒泡了,那么div0和div1就不会被触发,看如下代码,

 1     div0.addEventListener('click',clickHandler0)
 2     div1.addEventListener('click',clickHandler1) 3 div2.addEventListener('click',clickHandler2) 4 function clickHandler0(e){ 5 console.log('点击div0') 6 7  } 8 9 function clickHandler1(e){ 10 console.log('点击div1') 11 12  } 13 14 function clickHandler2(e){ 15 e.stopPropagation() // 阻止事宜冒泡 16 console.log('点击div2') 17 18 }

Js 事宜

这就是事宜的三阶段历程,当你想在那里阻止就在那里誊写阻止事宜的方式,是很给力的  
四:常用鼠标事宜详解
  
  1:鼠标点击 和 双击事宜
    1.1 单击事宜

1         // 单击事宜 click  - 侦听工具 document
2          document.addEventListener("click",clickHandler)
3          // 鼠标单击事宜回调函数
4          function clickHandler(e){ 5 console.log("我被点击了") 6 } 

当我们点击页面随便一个地方时,就会触发点击事宜,打印效果

Js 事宜

    1.2 双击事宜

1         // 双击事宜 dblclick  - 侦听工具 document
2          document.addEventListener("dblclick",dbclickHandler)
3          // 鼠标双击事宜回调函数
4          function dbclickHandler(e){ 5 console.log("我被双击了") 6 } 

当我们双击页面随便一个地方时,就会触发点击事宜,打印效果

Js 事宜

 

  2:鼠标移入移出事宜 和 鼠标滑入滑出事宜 

 

    鼠标移入移出(mouseenter 移入 mouseleave 移出)和 鼠标滑入滑出事宜事宜是(mouseover 滑入 mouseout 滑出)有区别的,为了让能更好的区分,将所有的事宜写在一个Dom元素上,同一个元素可以添加多个事宜。

    鼠标移入 和 鼠标滑入事宜的区别:鼠标滑入事宜是有冒泡阶段的 ,可以收到子元素的滑入和滑出,而鼠标移入事宜没有冒泡阶段的,只能收到当前容器的移入和移出

    HTML代码如下:

 1 <style>
 2         /* 鼠标事宜样式 */
 3         #div1{
 4             width: 200px;
 5             height: 200px;
 6             background-color: orange;
 7         }
 8         #div2{
 9             width: 100px;
10             height: 100px;
11             background-color: red;
12         }
13 </style>
14 <body>
15         <!--  鼠标事宜 -->
16         <div id="div1">
17             <div id="div2"></div>
18         </div>
19 </body>

  JS代码

 1      // 给 div1 添加 鼠标划入滑出,移入移出事宜
 2     var div1 = document.querySelector('#div1')
 3     div1.addEventListener('mouseover',mouseHandler)   // 滑入
 4     div1.addEventListener('mouseout',mouseHandler)    // 滑出
 5     div1.addEventListener('mouseenter',mouseHandler)  // 移入
 6     div1.addEventListener('mouseleave',mouseHandler)  // 移出
 7 
 8     // 事宜回调函数
 9     function mouseHandler(e){ 10 console.log(e.type) // e.type 为事宜的类型 11 }

当我们将鼠标移入到 div1 父盒子上时,会发现鼠标移入和滑入事宜都触发,由于div1父容器元素添加了移入滑入事宜,效果如下:

安卓APP承载网页(WebView)- 用例程解析到位

Js 事宜

 

 当将鼠标移入到红色块 div2 中时,此时div2未添加任何事宜,然则却会触发鼠标滑入事宜(mouseover),由于mouseovr事宜有会冒泡,而moseenter并不会,只会收到当前添加了事宜容器的事宜,也就是div1,效果如下:

Js 事宜

说明 mouseover 时有会冒泡的,而 moseenter是没有冒泡阶段的。

 

  3:鼠标左键按下 和 松开事宜

1         // 鼠标左键按下松开事宜  - 侦听工具 document
2         document.addEventListener("mousedown",mouseHandler)  
3         document.addEventListener("mouseup",mouseHandler) 4 5 // 事宜回调函数 6 function mouseHandler(e){ 7  console.log(e.type) 8 } 

当按下鼠标左键触发 mousedown 事宜,松开鼠标左键触发 mouseup 事宜:

Js 事宜

右键事宜也是如上添加。

 

五:表单事宜

  1:focus – 聚焦事宜 和 blur – 失焦 事宜

 1 <body>
 2         <input type="text" class="input">
 3 
 4 <script>
 5         // 获取dom元素
 6         var input = document.querySelector('.input')
 7         // 添加 focus - 聚焦事宜 和 blur - 失焦 事宜
 8         input.addEventListener('focus',focusHandler) 9 input.addEventListener('blur',focusHandler) 10 11 // 事宜回调函数 12 function focusHandler(e){ 13  console.log(e.type) 14  } 15 </script> 16 </body>

当表单聚焦时,触发 focus 事宜,失焦时触发 blur 事宜:

Js 事宜Js 事宜

  2:表单内容改变事宜 – change 和 表单输入事宜 input

    2.1  change事宜

 1 <body>
 2         <input type="text" class="input">
 3 
 4 <script>
 5         // 获取dom元素
 6         var input = document.querySelector('.input')
 7         // 添加 change - 表单内容改变事宜 
 8         input.addEventListener('change',changeHandler) 9 // change事宜回调函数 10 function changeHandler(e){ 11 console.log(e.type,input.value) // 打印触发的事宜和表单内容 12  } 13 </script> 14 </body>

Js 事宜

请注重,失焦时触发!!

  2.2:input 事宜  (一样平常input输入事宜都市配合 节省,由于输入事宜只要输入一个字符都市触发,对照耗性能。)

 1 <body>
 2          <input type="text" class="input">
 3 
 4 <script>
 5        // 获取dom元素
 6        var input = document.querySelector('.input')
 7        // 添加 input - 表单输入事宜 
 8        input.addEventListener('input ',inputHandler) 9 // input事宜回调函数 10 function inputHandler(e){ 11 console.log(e.type,input.value) // 打印触发的事宜和表单内容 12  } 13 </script> 14 </body>

Js 事宜

 

六:键盘事宜

  1:keydown  按下键 和 keyup 松开键

  e.keyCode :键码,键盘的每一个键都有对应的编码,凭据码来鉴别按下的是什么键。

  e.code:键名

1      // 建立 按键侦听事宜 - 侦听工具 document
2      document.addEventListener('keydown',keydownHandler)    // 按下键事宜
3      document.addEventListener('keyup',keydownHandler)      // 松开键事宜
4  
5      // 按键事宜回调函数
6      function keydownHandler(e){
7          console.log(e.type,e.code,e.keyCode)   // 打印事宜类型和键名,键码  
8      }

试试按下键盘上的 上下左右键,效果如下:

Js 事宜

原创文章,作者:dddof新闻网,如若转载,请注明出处:https://www.dddof.com/archives/10316.html