-
HTML事件缺点：JS代码和HTML代码都需要更改。
查看全部 -
使用事件处理程序
1.HTML事件：
查看全部 -
事件捕获：
查看全部 -
事件冒泡：
查看全部 -
事件流：
查看全部 -
事件：
查看全部 -
DOM0 btn.onclick = function() {}
DOM2 btn.addEventListener("click", function,false) (非IE)
attachEvent("onclick", function) (IE)
查看全部 -
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> .ee{text-decoration:line-through; text-decoration:underline; } </style> </head> <body> <div id="First"> <input type="button" id="btn1" value="按下去-兼容"> <a href="11111111111111111111111111.html" id="go">跳转</a> </div> <script type="text/javascript"> function ee(event){ //event为事件对象 alert(event.target.nodeName); //target用于获取事件目标，target.nodeName指事件目标的元素名称，此处为input；type属性用于获取对象类型，如click点击、mouseover鼠标移上去等 event.stopPropagation(); //阻止事件冒泡 } function bb(){ alert("我是父级DIV!"); } function stopgoto(even){ event.stopPropagation(); //阻止事件冒泡 event.preventDefault(); //阻止事件的默认行为，如阻止a标签的默认href链接 } var btn1=document.getElementById("btn1"); var fst=document.getElementById("First"); var goto=document.getElementById("go"); //兼容浏览器 var anxiaqu = { //添加句柄 adddd:function(elem,type,handle){ if(elem.addEventListener){ elem.addEventListener(type,handle,false); } else if(elem.attachEvent){ elem.attachEvent('on'+type,handle); } else{ elem['on'+type]=handle; } }, //删除句柄 detdd:function(elem,type,handle){ if(elem.removeEventListener){ elem.removeEventListener(type,handle,false); } else if(elem.detachEvent){ elem.detachEvent('on'+type,handle); } else{ elem['on'+type]=null; } } } anxiaqu.adddd(btn1,"click",ee); anxiaqu.adddd(fst,"click",bb); anxiaqu.adddd(goto,"click",stopgoto); //anxiaqu.detdd(btn1,"click",ee); </script> </body> </html>查看全部 -
兼容浏览器解决事件处理程序
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> .ee{text-decoration:line-through; text-decoration:underline; } </style> </head> <body> <input type="button" id="btn1" value="按下去"> <script type="text/javascript"> function ee(){ alert("Hello Haa!"); } var btn1 = document.getElementById("btn1"); var anxiaqu = { //添加句柄 adddd:function(elem,type,handle){ if(elem.addEventListener){ //DOM2级事件处理程序：addEventListener() elem.addEventListener(type,handle,false); } else if(elem.attachEvent){ //IE事件处理程序：attachEvent() elem.attachEvent('on'+type,handle); } else{ elem['on'+type]=handle; //DOM0级事件处理程序：element.onclick=; }//js中的“.”符号可用['']代替，如：element.onclick等同于element['onclick'] }, //删除句柄 detdd:function(elem,type,handle){ if(elem.removeEventListener){ //DOM2级事件处理程序：removeEventListener() elem.removeEventListener(type,handle,false); } else if(elem.detachEvent){ //IE事件处理程序：detachEvent() elem.detachEvent('on'+type,handle); } else{ elem['on'+type]=null; //DOM0级事件处理程序,null赋值后，相当于取消操作 } } } anxiaqu.adddd(btn1,"click",ee); //anxiaqu.detdd(btn1,"click",ee); </script> </body> </html>查看全部 -
DOM 事件对象 && ie 事件对象
查看全部 -
addEventListener()添加事件 removeEventListener()移除事件 btn3.addEventListener('click',showMes,false);
'chick': 事件名称，DOM0级里为'onclick',此处为'click'。
showMes: 执行的函数名。
布尔值 ：事件流类别 false--事件冒泡 ture--事件捕获
注意 事件由onclick 变为例click， 所有事件不加on。
4、IE事件处理器
attachEvent:添加 参数为 （事件名称，函数名）
detachEvent:删除 参数为 （事件名称，函数名）
默认冒泡事件流，不支持捕获事件流
此处事件名称 需保留'on' 如'onclick'
查看全部 -
事件冒泡：由具体的元素，最内层的 逐级往上响应
查看全部 -
事件对象
查看全部 -
事件对象
查看全部 -
阻止冒泡
查看全部
举报
0/150
提交
取消