• 当前标签:事件捕获

程序开发 JavaScript 事件、事件流

事件:某件事件的发生 包含鼠标操作、键盘操作等 理解事件中的概念: 事件流:从页面接受事件的顺序 事件捕获 和 事件冒泡 事件捕获:不太具体的节点更早接受事件 而最具体的节点最后接受到事件 事件冒泡:事件最开始由最具体的元素 然后逐渐向上传播到不具体的元素 使用事件处理程序: HTML事件 DOM 0级事件处理程序 把一个函数赋值给一个事件处理程序 DOM 2级事件处理程序 addEventLister 和 removeEventLister 要处理的事件名 作为事件处理的函数 布尔值  true 在捕获阶段调用事件处理程序      false 在冒泡阶段调用事件处理程序 事件流 <!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         <meta name="viewport" content="width=device-width, initial-scale=1.0">         <meta http-equiv="X-UA-Compatible" content="ie=edge">         <title>事件流</title>         <style>             div{                 width: 300px;                 height: 300px;                 background-color: red;             }         </style>     </head>     <body id="box">         <input type="button" id="btn1" value="按钮1" onclick="click1(event)">         <input type="button" id="btn2" value="按钮2">         <input type="button" id="btn3" value="按钮3">         <section>             <div>点击</div>         </section>         <script>             // HTML事件处理程序(写在标签上触发)             function click1(ev){                 console.log('11')                 console.log(ev.target.nodeName)             }             // event表示事件对象             // onclick监听事件 点击时触发             // click1 表示事件发生的时候执行的函数             // DOM 0级事件处理程序             var btn2 =document.getElementById('btn2')             btn2.onclick =function(){                 alert('我被攻击了')             }             btn2.onclick =null             // DOM 0级删除事件             btn2.onclick = function(){                 alert('1234')             }             // DOM 2 级事件处理程序             var btn3 =document.getElementById('btn3')             btn3.addEventListener('click',aa,false)             btn3.addEventListener('click',cc,true)             // addEventListener 添加事件监听者             // 第一个参数添加事件类型 不能带“on”             // 第二个参数事件发生时执行的函数 不带“()”             // 第三个参数指的是在冒泡阶段或是在捕获阶段             function aa(){                 alert('aaaa')             }             function cc(){                 alert('cccccc')             }             btn3.removeEventListener('click',aa,false)             btn3.removeEventListener('click',aa,true)  //无效             btn3.removeEventListener('click',cc,true)             // 移除事件 如果添加两次事件 一次是捕获阶段 一次是冒泡阶段             // ---捕获、冒泡过程---             var box = document.getElementById('box')             box.addEventListener('click',function(){                 alert('你好')             },true)             var sec =document.querySelector('section')             var div = document.querySelector('div')             document.documentElement.addEventListener('click',function(){alert('html-捕获')},true)             document.documentElement.addEventListener('click',function(){alert('html-冒泡')},false)             document.body.addEventListener('click',function(){alert('body-捕获')},true)             document.body.addEventListener('click',function(){alert('body-冒泡')},false)             sec.addEventListener('click',function(){alert('sec-捕获')},true)             sec.addEventListener('click',function(){alert('sec-冒泡')},false)             div.addEventListener('click',function(){alert('div-捕获')},true)             div.addEventListener('click',function(){alert('div-冒泡')},false)             // 事件捕获:即从窗口开始逐步查找最终捕获的触发事件的标签元素 捕获成功后开始冒泡         </script>     </body> </html>

2017-07-19 21:32:17 29 0 0
阅读详情
  • 1
前往