<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無標題文檔</title> <script src="jquery-2.0.3.js"></script> <script> $(function(){ $('#div1').on('click',function(){ alert(1); $('#div1').off('click'); }); $('#div1').on('click',function(){ alert(2); }); $('#div1').trigger('click');//彈出1,2 ------------------------------------------------------------------ $('#span1').on('show',function(){//自定義事件，show是函數名，后面是函數體， alert(3); }); $('#span1').trigger('show');//自定義事件只能通過trigger觸發，調用函數show執行 $('#span1').on('hide',function(){//函數名字相同名字會覆蓋，事件名相同不會覆蓋，這是跟函數的區別 alert(3); }); $('#span1').on('hide',function(){ alert(4); }); $('#span1').trigger('hide');//彈出3,4 }); window.onload = function(){ var oDiv = document.getElementById('div1'); var oSpan = document.getElementById('span1'); var aaa = function(){ alert(1); }; var bbb = function(){ alert(2); }; var ccc = function(){ alert(3); }; add(oDiv,'click',aaa); remove(oDiv,'click',aaa); add(oSpan,'show',aaa); add(oSpan,'show',bbb); add(oSpan,'hide',ccc); remove(oSpan,'hide'); trigger(oSpan,'hide'); }; function add(obj,eventName,fn){ /* oSpan=｛ listeners：｛ eventName1:[fn1,fn2], eventName2:[fn3,fn4] ｝ ｝ */ obj.listeners = obj.listeners || {};//保證第一次進來是{}，后面使用的時候不是null,第二次進來不再是{}而是之前的。 obj.listeners[eventName] = obj.listeners[eventName] || []; obj.listeners[eventName].push(fn); //不是自定義事件可以不通過trigger調用 obj.addEventListener(eventName,fn,false); } function remove(obj,eventName,fn){ obj.removeEventListener(eventName,fn,false); //等同於上面寫法 delete obj.listeners[eventName]; } function trigger(obj,eventName){ var arr = obj.listeners[eventName] || []; for(var i=0;i<arr.length;i++){ arr[i]();//函數執行 } } </script> </head> <body> <div id="div1">div</div> <span id="span1">span</span> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無標題文檔</title> <script src="jquery-2.0.3.js"></script> <script> window.onload = function(){ $('#div1').on('click',function(a){ alert(1); }); $('#div1').on('click',function(b){ alert(2); }); $('#div1').on('click.AAA','span',function(c){//AAA是命名空間 alert(3); }); $('body').on('click','#div1',function(c){ alert(4); }); $('#div1').on('bind',function(){ alert(5); }); }; console.log(data_priv); /* data_priv = Data {cache: Object, expando: "jQuery203079181909836815280.49169554144700656"} */ /* guid是第幾個添加進去的，handler是事件函數，handle:function(e){}是真正事件函數，delegateCount 委托的個數,needsContext有委托就是false,origType是原始事件，可能不兼容，type就是兼容后的事件 data_priv = ｛ cache:{ 1:{}, 2:{}, 3:{ //$('#div1') 3這個json是elemData events:{ //elemData.events = {} bind:[ { data:undefined,guid:5,handler:function (){guid:5},namespace:"",needsContext:undefined, origType:"bind",selector:undefined,type:"bind" }, delegateCount:0 ], click:[ //handlers = events[ type ] = []; { //handleObj={} data:undefined, //沒有傳數據data guid:3, //函數的標識 handler:function (c){guid:3}, //普通函數 namespace:"AAA", needsContext:false, origType:"click", selector:"span", //委托 type:"click" }, { data:undefined,guid:1, handler:function (a),namespace:"", needsContext:undefined, origType:"click",selector:undefined, type:"click" }, { data:undefined,guid:2,handler:function(b), namespace:"",needsContext:undefined, origType:"click",selector:undefined, type:"click" }, delegateCount:1] } handle : function(e){} //eventHandle = elemData.handle=function(), elem.addEventListener( type, eventHandle, false )綁定事件函數 } 4:{ //$('body') events:{ click:[ { data:undefined,guid:4,handler:function (c),namespace:"",needsContext:false, origType:"click",selector:"#div1", type:"click" }, delegateCount:1 ] } handle:function(e){} } } ｝ */ $('#div1').on('click',function(event){ alert(2); //event.preventDefault(); //阻止默認事件 //event.stopPropagation(); //阻止冒泡事件 return false; //阻止冒泡和阻止默認事件 }); }); </script> </head> <body> <div id="div1">div<span>span<p>p</p></span></div> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無標題文檔</title> <script src="jquery-2.0.3.js"></script> <script> $(function(){ $(document).on('mousedown',function(ev){ alert(ev.pageX); alert(ev.pageY); //距離頁面頂部的距離(滑動不見也算) //ev : jq中的event alert(ev.originalEvent); //ev.originalEvent : 原生JS中的event //changedTouches //原生的event才有，jQery的event沒有 alert( ev.clientY ); //距離屏幕頂部的距離(滑動不見不算) }); $('span').on('click',function(ev){//ev是jQuery的event, alert(ev.originalEvent);//originalEvent這就是原生的event alert(ev.which);//左鍵1中鍵2右鍵3，最好用mousedown不用click alert(3); }); $('div').on('click',function(){ alert(1); }); $('span').on('click',function(){ alert(2); }); $('span').on('click',function(ev){ alert( ev.isPropagationStopped() ); ev.stopPropagation();//2,3彈1不彈 ev.stopImmediatePropagation();//3彈1,2不彈，同一元素的其他事件也阻止 console.log(ev); alert( ev.isPropagationStopped() ); alert(3); }); }); document.onkeydown = function(ev){ var ev = ev || window.event; alert(ev.which); //IE8以下版本不支持，用charCode keyCode替代 }; document.onkeypress = function(ev){ var ev = ev || window.event; alert(ev.charCode); //charCode keyCode }; $('div').on('click',function(ee){ console.log(ee); {altKey:false,bubbles:true,button:0,buttons:0,cancelable:true, clientX:25,clientY:22,ctrlKey:currentTarget:div#div1, data:undefined,delegateTarget:div#div1,eventPhase:2, handleObj:Object,isDefaultPrevented:function returnFalse(), jQuery20300025591973997705075:true,metaKey:false, offsetX:17,offsetY:14,originalEvent:MouseEvent,pageX:25, pageY:22,relatedTarget:null,:513,screenY:117,shiftKey:false, target:timeStamp:3422.9950000000003,toElement:div#div1, type:"click",view:Window,which:1,} }); </script> </head> <body style="height:2000px;"> <div>div<span>span</span></div> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無標題文檔</title> <script src="jquery-2.0.3.js"></script> <script> jQuery.event.special load focus blur click beforeunload mouseenter mouseleave focusin focusout $(function(){ $('#div1').on('click',function(){ alert(1); }); $('input').on('click',function(){ alert(2); }); $('input').trigger('click');//父級div也彈出，冒泡了， $(window).on('load',function(){}); $('img').on('load',function(){}); $('img').trigger('load');//jQuery處理了，不會冒泡到div ------------------------------------------------------------ $('#div1').on('focus',function(){ alert(1); }); $('input').on('focus',function(){ alert(2); }); $('input').trigger('focus');//2不彈1，不冒泡 ------------------------------------------------------------ $('#div1').delegate('input','focus',function(){ alert(1); }); $('#input1').on('click',function(){}); $('#input1').trigger('click'); ------------------------------------------------------------- $('a').on('click',function(){ alert(1); }); $('a').trigger('click'); $(window).on('beforeunload',function(){ //關閉頁面 return 123; }); $('#div1').on('focusin',function(){ alert(1); }); $('input').trigger('focusin'); }); </script> </head> <body> <div id="div1"><input type="text"></div> <input type="checkbox" id="input1"> <a href="http://www.baidu.com">aaaaaa</a> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無標題文檔</title> <style> #div1{ width:200px; height:200px; background:red;} #div2{ width:100px; height:100px; background:yellow;} </style> <script src="jquery-2.0.3.js"></script> <script> window.onload = function(){ var oDiv1 = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); var oSpan1 = document.getElementById('span1'); oDiv1.onmouseover = function(ev){ var ev = ev || window.event; var a = this; var b = ev.relatedTarget; if( !elContains(a, b) && a!=b ){ oSpan1.innerHTML += '1'; } }; oDiv1.onmouseout = function(ev){ var ev = ev || window.event; var a = this; var b = ev.relatedTarget; if( !elContains(a, b) && a!=b ){ oSpan1.innerHTML += '2'; } }; }; function elContains(a, b){ //兩個元素是否是嵌套關系 return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16); } $(function(){ $('#span1').on('click.aaa',function(){ alert(1); }); $('#span1').on('mouseover.aaa',function(){ alert(2); }); $('#span1').off('.aaa');//把click和mouseover都移除了 }); </script> </head> <body> <div id="div1"> <div id="div2"></div> </div> <span id="span1">11111111111</span> </body> </html>