<!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>