日期:2014-05-16  浏览次数:20302 次

JS event 灞炴€ц瑙?

Event灞炴€у拰鏂规硶锛?

1. type锛氫簨浠剁殑绫诲瀷锛屽onlick涓殑click锛?

2. srcElement/target锛氫簨浠舵簮锛屽氨鏄彂鐢熶簨浠剁殑鍏冪礌锛?

3. button锛氬0鏄庤鎸変笅鐨勯紶鏍囬敭锛屾暣鏁帮紝1浠h〃宸﹂敭锛?浠h〃鍙抽敭锛?浠h〃涓敭锛屽鏋滄寜涓嬪涓敭锛岄厭鎶婅繖浜涘€煎姞璧锋潵锛屾墍浠?灏变唬琛ㄥ乏鍙抽敭鍚屾椂鎸変笅锛涳紙firefox涓?0浠h〃宸﹂敭锛?浠h〃涓棿閿紝2浠h〃鍙抽敭锛?

4. clientX/clientY锛氫簨浠跺彂鐢熺殑鏃跺€欙紝榧犳爣鐩稿浜庢祻瑙堝櫒绐楀彛鍙鏂囨。鍖哄煙鐨勫乏涓婅鐨勪綅缃紱(鍦―OM鏍囧噯涓紝杩欎袱涓睘鎬у€奸兘涓嶈€冭檻鏂囨。鐨勬粴鍔ㄦ儏鍐碉紝涔熷氨鏄锛屾棤璁烘枃妗f粴鍔ㄥ埌鍝噷锛屽彧瑕佷簨浠跺彂鐢熷湪绐楀彛宸︿笂瑙掞紝clientX鍜宑lientY閮芥槸 0锛屾墍浠ュ湪IE涓紝瑕佹兂寰楀埌浜嬩欢鍙戠敓鐨勫潗鏍囩浉瀵逛簬鏂囨。寮€澶寸殑浣嶇疆锛岃鍔犱笂
document.body.scrollLeft鍜?document.body.scrollTop)

5. offsetX,offsetY/layerX,layerY锛氫簨浠跺彂鐢熺殑鏃跺€欙紝榧犳爣鐩稿浜庢簮鍏冪礌宸︿笂瑙掔殑浣嶇疆锛?

6. x,y/pageX,pageY锛氭绱㈢浉瀵逛簬鐖惰绱犻紶鏍囨按骞冲潗鏍囩殑鏁存暟锛?

7. altKey,ctrlKey,shiftKey绛夛細杩斿洖涓€涓竷灏斿€硷紱

8. keyCode锛氳繑鍥瀔eydown浣昸eyup浜嬩欢鍙戠敓鐨勬椂鍊欐寜閿殑浠g爜锛屼互鍙妅eypress 浜嬩欢鐨刄nicode瀛楃锛?firefox2涓嶆敮鎸?event.keycode锛屽彲浠ョ敤 event.which鏇夸唬 )

9. fromElement,toElement锛氬墠鑰呮槸鎸囦唬mouseover浜嬩欢涓紶鏍囩Щ鍔ㄨ繃鐨勬枃妗e厓绱狅紝鍚庤€呮寚浠ouseout浜嬩欢涓紶鏍囩Щ鍔ㄥ埌鐨勬枃妗e厓绱狅紱

10. cancelBubble锛氫竴涓竷灏斿睘鎬э紝鎶婂畠璁剧疆涓簍rue鐨勬椂鍊欙紝灏嗗仠姝簨浠惰繘涓€姝ヨ捣娉″埌鍖呭灞傛鐨勫厓绱狅紱(e.cancelBubble = true; 鐩稿綋浜?e.stopPropagation();)

11. returnValue锛氫竴涓竷灏斿睘鎬э紝璁剧疆涓篺alse鐨勬椂鍊欏彲浠ョ粍缁囨祻瑙堝櫒鎵ц榛樿鐨勪簨浠跺姩浣滐紱(e.returnValue = false; 鐩稿綋浜?e.preventDefault();)

12. attachEvent(),detachEvent()/addEventListener(),removeEventListener锛氫负鍒跺畾DOM瀵硅薄浜嬩欢绫诲瀷娉ㄥ唽澶氫釜浜嬩欢澶勭悊鍑芥暟鐨勬柟娉曪紝瀹冧滑鏈変袱涓弬鏁帮紝绗竴涓槸浜嬩欢绫诲瀷锛岀浜屼釜鏄簨浠跺鐞嗗嚱鏁般€傚湪
attachEvent()浜嬩欢鎵ц鐨勬椂鍊欙紝this鍏抽敭瀛楁寚鍚戠殑鏄痺indow瀵硅薄锛岃€屼笉鏄彂鐢熶簨浠剁殑閭d釜鍏冪礌锛?

13. screenX銆乻creenY锛氶紶鏍囨寚閽堢浉瀵逛簬鏄剧ず鍣ㄥ乏涓婅鐨勪綅缃紝濡傛灉浣犳兂鎵撳紑鏂扮殑绐楀彛锛岃繖涓や釜灞炴€у緢閲嶈锛?


涓€浜涜鏄庯細

1. event浠h〃浜嬩欢鐨勭姸鎬侊紝渚嬪瑙﹀彂event瀵硅薄鐨勫厓绱犮€侀紶鏍囩殑浣嶇疆鍙婄姸鎬併€佹寜涓嬬殑閿瓑绛夛紱

2. event瀵硅薄鍙湪浜嬩欢鍙戠敓鐨勮繃绋嬩腑鎵嶆湁鏁堛€?
firefox閲岀殑event璺烮E閲岀殑涓嶅悓锛孖E閲岀殑鏄叏灞€鍙橀噺锛岄殢鏃跺彲鐢紱firefox閲岀殑瑕佺敤鍙傛暟寮曞鎵嶈兘鐢紝鏄繍琛屾椂鐨勪复鏃跺彉閲忋€?
鍦↖E/Opera涓槸window.event锛屽湪Firefox涓槸event锛涜€屼簨浠剁殑瀵硅薄锛屽湪IE涓槸window.event.srcElement锛屽湪Firefox涓槸event.target锛孫pera涓袱鑰呴兘鍙敤銆?

3. 涓嬮潰涓ゅ彞鏁堟灉鐩稿悓
var evt = (evt) ? evt : ((window.event) ? window.event : null);
var evt = evt || window.event; // firefox涓媤indow.event涓簄ull, IE涓媏vent涓簄ull

4. IE涓簨浠剁殑璧锋场
IE涓簨浠跺彲浠ユ部鐫€鍖呭灞傛涓€鐐圭偣璧锋场鍒颁笂灞傦紝涔熷氨鏄锛屼笅灞傜殑DOM鑺傜偣瀹氫箟鐨勪簨浠跺鐞嗗嚱鏁帮紝鍒颁簡涓婂眰鐨勮妭鐐瑰鏋滆繕鏈夊拰涓嬪眰鐩稿悓浜嬩欢绫诲瀷鐨勪簨浠跺鐞嗗嚱鏁帮紝閭d箞涓婂眰鐨勪簨浠跺鐞嗗嚱鏁颁篃浼氭墽琛屻€備緥濡傦紝 div 鏍囩鍖呭惈浜?a 锛屽鏋滆繖涓や釜鏍囩閮芥湁onclick浜嬩欢鐨勫鐞嗗嚱鏁帮紝閭d箞鎵ц鐨勬儏鍐靛氨鏄厛鎵ц鏍囩 a 鐨刼nclick浜嬩欢澶勭悊鍑芥暟锛屽啀鎵ц div 鐨勪簨浠跺鐞嗗嚱鏁般€傚鏋滃笇鏈涚殑浜嬩欢澶勭悊鍑芥暟鎵ц瀹屾瘯涔嬪悗锛屼笉甯屾湜鎵ц涓婂眰鐨?div 鐨刼nclick鐨勪簨浠跺鐞嗗嚱鏁颁簡锛岄偅涔堝氨鎶奵ancelBubble璁剧疆涓簍rue鍗冲彲銆?/p>