首頁 > 開發者 > JavaScript
標籤：
<html><title>事件</title><meta charset="utf-8"/><body><div id="box"> <input type="button" value="按鈕" id="btn" onclick="showMes()"/> <input type="button" value="按鈕2" id="btn2"/> <input type="button" value="按鈕3" id="btn3"/> <a href="event.html" id="go" target="_blank">跳轉</a></div></body></html><script>/*** 非IE* event.type 擷取事件的類型* event.target屬性 擷取事件的目標* event.stopPropagation()方法;//阻止事件冒泡* event.preventDefault()方法;//阻止事件預設行為** IE* event.type 擷取事件的類型* event.srcElement* event.cancelBubble屬性阻止事件冒泡* 設定為true為阻止冒泡，設定為false不阻止冒泡* returnValue=false 阻止事件預設行為**/function showMes(event){ event = event || window.event; var ele = event.target || event.srcElement; alert(ele.nodeName);} function showbox(){ alert(‘這裡放盒子‘);} function stopGoto(event){ //event.type 擷取事件的類型 //event.target屬性 擷取事件的目標 event.stopPropagation();//阻止事件冒泡 event.preventDefault();//阻止事件預設行為} var btn2 = document.getElementById("btn2");var btn3 = document.getElementById("btn3");var go = document.getElementById("go");btn2.onclick = function(){ alert(‘通過DOM0級添加事件‘);}btn2.onclick = null; //DOM2級事件var eventUtil = { //添加控制代碼 addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); }else if(element.attachEvent){ element.attachEvent(‘on‘+type,handler); }else{ element[‘on‘+type] = handler; } }, //刪除控制代碼 removeHandler:function(element,type,handler){ if(element.removeEventListener){ element.removeEventListener(type,handler,false); }else if(element.detachEvent){ element.detachEvent(‘on‘+type,handler); }else{ element[‘on‘+type] = null; } }, getEvent:function(event){ return event ? event : window.event; }, getElement:function(event){ return event.target || event.srcElement; }, preventDefault:function(event){ if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue = false; } }, stopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble = true; } }}; eventUtil.addHandler(btn3,"click",showMes);//eventUtil.removeHandler(btn3,"click",showMes);eventUtil.addHandler(box,"click",showbox);eventUtil.addHandler(go,"click",stopGoto);</script>javascript DOM事件總結
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
