JavaScript事件详细讲解
内容摘要
事件的概念
事件:指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器(或者处理程序)来预定事件,以便事件发生的时候执行相应的代码。
一、事件流
1.事件
事件:指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器(或者处理程序)来预定事件,以便事件发生的时候执行相应的代码。
一、事件流
1.事件
文章正文
事件的概念
事件:指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器(或者处理程序)来预定事件,以便事件发生的时候执行相应的代码。
一、事件流
1.事件流:描述的是在页面中接受事件的顺序
2.事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档)
3.事件捕获:最不具体的节点先接收事件,而最具体的节点应该最后接收事件
二、事件处理
1.HTML事件处理:直接添加到HTML结构中
2.DOM0级事件处理:把一个函数赋值给一个事件处理程序属性
3.DOM2级事件处理:
addEventListener("事件名","事件处理函数",布尔值)
true:事件捕获
false:事件冒泡
removeEventListener();
4.IE事件处理程序
attachEvent
detachEvent
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <!DOCTYPE html> <html> <head> <meta charset= "UTF-8" > <title></title> </head> <body> <div id= "div" > <button id= "btn1" >按钮</button> </div> <!--<script> function demo(){ alert( "Hello HTML事件处理" ); } </script>--> <!--<script> var btn1 = document.getElementById( "btn1" ); btn1.onclick = function (){alert( "Hello DOM0级事件处理程序" )}; //被覆盖掉 btn1.onclick = function (){alert( "Hello DOM0级事件处理程序2" )}; btn1.onclick = function (){alert( "Hello DOM0级事件处理程序3" )}; </script>--> <!--<script> var btn1 = document.getElementById( "btn1" ); btn1.addEventListener( "click" ,demo1); btn1.addEventListener( "click" ,demo2); btn1.addEventListener( "click" ,demo3); function demo1(){ alert( "DOM2级事件处理程序1" ); } function demo2(){ alert( "DOM2级事件处理程序2" ); } function demo3(){ alert( "DOM2级事件处理程序3" ); } btn1.removeEventListener( "click" ,demo2) </script>--> <script> var btn1 = document.getElementById( "btn1" ); if (btn1.addEventListener){ btn1.addEventListener( "click" ,demo); } else if (btn1.attachEvent){ btn1.attachEvent( "onclick" ,demo) } else { btn1.onclick = demo(); } function demo(){ alert( "Hello" ); } </script> </body> </html> |
三、事件对象
1、事件对象:在触发DOM事件的时候都会产生一个对象
2、事件对象event:
type:获取事件类型
target:获取事件目标
stopPropagation():阻止事件冒泡
preventDefault():阻止事件默认行为
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!DOCTYPE html> <html> <head> <meta charset= "UTF-8" > <title></title> </head> <body> <div id= "div" > <button id= "btn1" >按钮</button> <a href= "http://www.baidu.com" id= "aid" >百度</a> </div> <script> document.getElementById( "btn1" ).addEventListener( "click" ,showType); document.getElementById( "div" ).addEventListener( "click" ,showDiv); document.getElementById( "aid" ).addEventListener( "click" ,showA); function showType(event){ // alert(event.type); alert(event.target); event.stopPropagation(); //阻止事件冒泡 } function showDiv(){ alert( "div" ) } function showA(event){ // event.stopPropagation(); // event.preventDefault(); } </script> </body> </html> |
代码注释