jquery14 on() trigger() : 事件操作的相關方法
阿新 • • 發佈：2017-06-03
t對象 glob lob code 屬性 tor con body title
<!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 = { global 事件的全局屬性(源碼還沒用到) add 綁定事件 remove 取消事件 trigger 主動觸發事件 dispatch 配發事件的具體操作 handlers 函數執行順序的操作 props JQ中共享原生JS的event屬性 fixHooks 收集event兼容的集合 keyHooks 鍵盤的event兼容 mouseHooks 鼠標的event兼容 fix event對象的兼容處理 special 特殊事件的處理 simulate focusin的模擬操作(trigger , dispatch) }; jQuery.Event= function(){}; jQuery.Event.prototype = { isDefaultPrevented isPropagationStopped isImmediatePropagationStopped preventDefault stopPropagation stopImmediatePropagation }; jQuery.fn.extend({ on one off trigger triggerHandler }); //6720 .click(); .mouseover(); jQuery.fn.extend({ hover bind unbind delegate undelegate }); $(function(){ $(‘#div1‘).on(‘click‘,function(){ alert(123); }); $(‘#div1‘).on(‘click‘,{name:‘hello‘},function(ev){ alert(ev.data.name); }); ----------------------------------------------------------------------- //ul要是li的父級或者主線節點 /* delegate: function( selector, types, data, fn ) { return this.on( types, selector, data, fn );//this=$(‘ul‘) },*/ $(‘ul‘).delegate(‘li‘,‘click‘,{name:‘hello‘},function(){ $(this).css(‘background‘,‘red‘);//點擊li,li變紅，這個點擊其實是ul身上，通過委托加到了li身上 }); $(‘ul‘).on(‘click‘,‘li‘,{name:‘hello‘},function(){//這也是委托，on有selector就是委托 $(this).css(‘background‘,‘red‘); }); ----------------------------------------------------------------------- $(‘#div1‘).on(‘click‘,function(){ alert(123); }); $(‘#div1‘).on(‘mouseover‘,function(){ alert(456); }); $(‘#div1‘).on({ ‘click‘ : function(){ alert(123); }, ‘mouseover‘ : function(){ alert(456); } }); ----------------------------------------------------------------------- $(‘#div1‘).one(‘click‘,function(){//只執行一次 alert(123); }); ------------------------------------------------------------------- $(‘#input1‘).focus(function(){ $(this).css(‘background‘,‘red‘); }); $(‘#input1‘).trigger(‘focus‘);//觸發focus事件 $(‘#input1‘).triggerHandler(‘focus‘); //觸發focus事件，但是光標不會移進去，不會觸發當前事件的默認行為 }); </script> </head> <body> <div id="div1">div</div> <ul> <li>11111</li> <li>11111</li> <li>11111</li> <li>11111</li> </ul> <input type="text" id="input1"> </body> </html>
jquery14 on() trigger() : 事件操作的相關方法