標籤：utils range document function 事件 content 事件處理 目標 自己的
js事件事件理解
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js事件流模型</title></head><style> #con{ width:200px; height:200px; background: orange; } #outer{ position: relative; top: 50px; left: 50px; width:100px; height:100px; background: #eeddff; } #inner{ position: relative; top: 251px; left: 25px; width:50px; height:50px; background: #44ddff; }</style><body><div id="con">con <div id="outer"> outer <div id="inner">inner</div> </div></div><script> </script></body></html>
1.執行順序
document->html->body-con->outer->ineer->outer->con->body->html->document
2.響應某個時間的函數叫做事件處理常式
function fnHandler(){
}
<script> // js事件流 // 事件添加 var con = document.getElementById(‘con‘); // con.addEventListener(‘click‘,function(){ // alert(‘123‘); // }); // con.addEventListener(‘click‘,function(){ // alert(‘123‘); // },false); // con.addEventListener(‘click‘,function(){ // alert(‘123‘); // },true); // DOM事件流// DOM2級事件規定事件流包括三個階段：事件捕獲階段、處於目標階段和事件冒泡階段。// DOM2級事件定義了兩個方法addEventListener()和removeEventListener()// IE不同的它有自己的方法attachEvent()和detachEventvar eventUtils = { // addEventHandler:function(){} addEventHandler: function(el,event,fnHandler){ // console.log(‘test‘); if(el.addEventListener){ console.log(el.addEventListener); el.addEventListener(event,fnHandler,true) } else{ console.log(el.attachEvent); el.attachEvent(‘on‘+event,fnHandler)} }, removeEventHandler: function(el,event,fnHandler){ // console.log(‘test‘); if(el.removeEventListener){ console.log(el.removeEventListener); el.removeEventListener(event,fnHandler,true) } else{ console.log(el.detachEvent); el.detachEvent(‘on‘+event,fnHandler)} }}eventUtils.addEventHandler(con,‘click‘,function(){ alert(‘123‘); });</script>
js事件事件理解
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
