• 当前标签:事件

程序开发 JavaScript 通过循环监听事件

div{     width: 50px;     height: 200px;     border: 1px solid blue;     float: left; } <body>         <div data-note="1"></div>         <div data-note="2"></div>         <div data-note="3"></div>         <div data-note="4"></div>         <div data-note="5"></div>         <div data-note="6"></div>         <div data-note="7"></div>         <div data-note="8"></div>         <div data-note="9"></div>         <div data-note="10"></div>         <script>             var divs =document.getElementsByTagName('div')             // for (var i = 0;i < divs.length;i++){             //     var div = divs[i]             //     var num = div.dataset.note             //     // console.log(num)             //     div.addEventListener('click',function(){             //         alert(num)             //         // for的时候 这一行代码没有执行 当for结束的时候 页面已经显示出来了             //         // 你点了div之后 才触发click 这alert(num)这一行代码才执行             //         // 此时num早已经是10了             //     })             // }             for(var i = 0;i < divs.length;i++){                 divs[i].addEventListener('click',function(e){                     var div = e.target                     alert(div.dataset.note)                 })             }             var fun =function(){                 alert('新的事件监听者')             }             divs[3].addEventListener('click',fun)             divs[3].removeEventListener('click',fun)             // 移除事件         </script>     </body>

2017-07-22 09:07:04 37 0 0
阅读详情

程序开发 JavaScript事件传播控制

<!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: 50px;                 background-color: red;                 color: white;             }         </style>     </head>     <body>         <section>             <div>                 <a href="https://www.baidu.com">这个可以点击</a>             </div>         </section>         <script>             var div =document.querySelector('div')             var sec =document.querySelector('section')             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(e){                 alert('section-挖洞')                 // e.stopPropagation()                 // 停止事件传播 即会停止挖洞过程也可以停止冒泡                 // 不会影响同级别的事件监听者                 // e.stopImmediatePropagation()                 // 停止同级别的多个事件监听者的调用                 // 不管用哪个方法都会停止挖洞或冒泡 但都不会影响超链接跳转                 // 超链接跳转是整个事件传播完成之后才进行跳转的                 e.preventDefault()                 // 阻止事件的默认行为 如 超链接跳转 或 表单提交 时                 // 使用e.defaultPrevented 可以获取事件的默认行为是否已经被阻止             },true)             sec.addEventListener('click',function(e){                 alert('section-挖洞2')                 // e.stopPropagation()             },true)             sec.addEventListener('click',function(e){                 alert('section-冒泡')                 // e.stopPropagation()                       // alert(e.defaultPrevented) //true                  e.defaultPrevented =false                 // 不能将已阻止的默认行为恢复                 },false)             div.addEventListener('click',function(){alert('div-挖洞')},true)             div.addEventListener('click',function(){alert('div-冒泡')},false)             // 第三个参数为true的时候 监听者调用比较早 设置false是比较晚             // 如果不传第三个参数 监听者调用事件比较晚 会在冒泡阶段调用             sec.onclick =function(){                 alert('哪个阶段调用')             }             // 在冒泡阶段调用         </script>     </body> </html>

2017-07-19 21:34:21 49 0 0
阅读详情

程序开发 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 47 0 0
阅读详情
  • 1
前往