JavaScript 事件、事件流

黄良钵

分类: 程序开发 61 0

事件:某件事件的发生 包含鼠标操作、键盘操作等

理解事件中的概念:

事件流:从页面接受事件的顺序 事件捕获 和 事件冒泡
事件捕获:不太具体的节点更早接受事件 而最具体的节点最后接受到事件
事件冒泡:事件最开始由最具体的元素 然后逐渐向上传播到不具体的元素

使用事件处理程序:

  1. HTML事件
  2. DOM 0级事件处理程序 把一个函数赋值给一个事件处理程序
  3. DOM 2级事件处理程序 addEventLister 和 removeEventLister
  • 要处理的事件名
  • 作为事件处理的函数
  • 布尔值  true 在捕获阶段调用事件处理程序      false 在冒泡阶段调用事件处理程序

事件流

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.         <title>事件流</title>
  8.         <style>
  9.             div{
  10.                 width: 300px;
  11.                 height: 300px;
  12.                 background-color: red;
  13.             }
  14.         </style>
  15.     </head>
  16.     <body id="box">
  17.         <input type="button" id="btn1" value="按钮1" onclick="click1(event)">
  18.         <input type="button" id="btn2" value="按钮2">
  19.         <input type="button" id="btn3" value="按钮3">
  20.         <section>
  21.             <div>点击</div>
  22.         </section>
  23.         <script>
  24.             // HTML事件处理程序(写在标签上触发)
  25.             function click1(ev){
  26.                 console.log('11')
  27.                 console.log(ev.target.nodeName)
  28.             }
  29.             // event表示事件对象
  30.             // onclick监听事件 点击时触发
  31.             // click1 表示事件发生的时候执行的函数
  32.             // DOM 0级事件处理程序
  33.             var btn2 =document.getElementById('btn2')
  34.             btn2.onclick =function(){
  35.                 alert('我被攻击了')
  36.             }
  37.             btn2.onclick =null
  38.             // DOM 0级删除事件
  39.             btn2.onclick = function(){
  40.                 alert('1234')
  41.             }
  42.             // DOM 2 级事件处理程序
  43.             var btn3 =document.getElementById('btn3')
  44.             btn3.addEventListener('click',aa,false)
  45.             btn3.addEventListener('click',cc,true)
  46.             // addEventListener 添加事件监听者
  47.             // 第一个参数添加事件类型 不能带“on”
  48.             // 第二个参数事件发生时执行的函数 不带“()”
  49.             // 第三个参数指的是在冒泡阶段或是在捕获阶段
  50.             function aa(){
  51.                 alert('aaaa')
  52.             }
  53.             function cc(){
  54.                 alert('cccccc')
  55.             }
  56.             btn3.removeEventListener('click',aa,false)
  57.             btn3.removeEventListener('click',aa,true)  //无效
  58.             btn3.removeEventListener('click',cc,true)
  59.             // 移除事件 如果添加两次事件 一次是捕获阶段 一次是冒泡阶段
  60.             // ---捕获、冒泡过程---
  61.             var box = document.getElementById('box')
  62.             box.addEventListener('click',function(){
  63.                 alert('你好')
  64.             },true)
  65.             var sec =document.querySelector('section')
  66.             var div = document.querySelector('div')
  67.             document.documentElement.addEventListener('click',function(){alert('html-捕获')},true)
  68.             document.documentElement.addEventListener('click',function(){alert('html-冒泡')},false)
  69.             document.body.addEventListener('click',function(){alert('body-捕获')},true)
  70.             document.body.addEventListener('click',function(){alert('body-冒泡')},false)
  71.             sec.addEventListener('click',function(){alert('sec-捕获')},true)
  72.             sec.addEventListener('click',function(){alert('sec-冒泡')},false)
  73.             div.addEventListener('click',function(){alert('div-捕获')},true)
  74.             div.addEventListener('click',function(){alert('div-冒泡')},false)
  75.             // 事件捕获:即从窗口开始逐步查找最终捕获的触发事件的标签元素 捕获成功后开始冒泡
  76.         </script>
  77.     </body>
  78. </html>
  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
JavaScript、事件、事件冒泡、事件捕获、事件流

作者简介:黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “JavaScript 事件、事件流”

Loading...