{"id":59,"date":"2008-07-03T04:26:34","date_gmt":"2008-07-03T04:26:34","guid":{"rendered":"http:\/\/tw.newtonstudio.com\/?p=59"},"modified":"2008-07-03T04:36:39","modified_gmt":"2008-07-03T04:36:39","slug":"javascript-%e7%9a%84addeventlistener","status":"publish","type":"post","link":"http:\/\/tw.newtonstudio.com\/?p=59","title":{"rendered":"Javascript \u7684addEventListener()\u53caattachEvent()"},"content":{"rendered":"

\u5927\u5bb6\u90fd\u77e5\u9053\u4e8b\u4ef6\u7684\u7528\u6cd5\u5c31\u662f\u7576\u67d0\u500b\u4e8b\u4ef6(\u72c0\u6cc1)\u88ab\u89f8\u767c\u4e86\u4e4b\u5f8c\u5c31\u6703\u53bb\u57f7\u884c\u67d0\u500bFunction, \u5c24\u5176\u662fJavascript, \u5728\u7576\u7d05AJAX\u7684\u50ac\u5316\u4e0b, \u4e86\u89e3Javascript\u7684Event\u7528\u6cd5\u66f4\u52a0\u91cd\u8981, \u5728\u9019\u88e1\u5c31\u5927\u6982\u4ecb\u7d39\u4e00\u4e0bJavascript\u7684Event\u7528\u6cd5.<\/p>\n

\u5f9eW3C\u7684\u767c\u5c55\u6642\u9593\u8ef8\u4f86\u770b, DOM(Document Object Model)\u7684\u6a21\u578b\u53ef\u4ee5\u5206\u70ba\u5169\u7a2e, DOM 0 \u53ca DOM 2. \u5f9e\u6578\u5b57\u4f86\u770b\u5c31\u53ef\u4ee5\u77e5\u9053DOM 0 \u7576\u7136\u662f\u6bd4\u8f03\u820a\u7684\u5354\u5b9a, \u6211\u5011\u53ef\u4ee5\u5f9e\u4ee5\u4e0b\u7684\u8868\u683c\u4f86\u770b:<\/p>\n

DOM1 \u5354\u5b9a:<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u00a0
\n<\/caption>\n
\n

Event Name<\/strong><\/p>\n<\/th>\n

\n

Description<\/strong><\/p>\n<\/th>\n<\/tr>\n<\/thead>\n

\n

onblur()<\/em><\/p>\n<\/td>\n

\n

The element has lost focus (that is, it is not selected by the user).<\/p>\n<\/td>\n<\/tr>\n

\n

onchange0<\/em><\/p>\n<\/td>\n

\n

The element has either changed (such as by typing into a text field) or the element has lost focus.<\/p>\n<\/td>\n<\/tr>\n

\n

onclick0<\/em><\/p>\n<\/td>\n

\n

The mouse has been clicked on an element.<\/p>\n<\/td>\n<\/tr>\n

\n

ondblclick()<\/em><\/p>\n<\/td>\n

\n

The mouse has been double-clicked on an element.<\/p>\n<\/td>\n<\/tr>\n

\n

onfocus()<\/em><\/p>\n<\/td>\n

\n

The element has gotten focus.<\/p>\n<\/td>\n<\/tr>\n

\n

onkeydown()<\/em><\/p>\n<\/td>\n

\n

A keyboard key has been pressed down (as opposed to released) while the element has focus.<\/p>\n<\/td>\n<\/tr>\n

\n

onkeypress()<\/em><\/p>\n<\/td>\n

\n

A keyboard key has been pressed while the element has focus.<\/p>\n<\/td>\n<\/tr>\n

\n

onkeyup()<\/em><\/p>\n<\/td>\n

\n

A keyboard key has been released while the element has focus.<\/p>\n<\/td>\n<\/tr>\n

\n

onload()<\/em><\/p>\n<\/td>\n

\n

The element has loaded (document, frameset, or image).<\/p>\n<\/td>\n<\/tr>\n

\n

onmousedown()<\/em><\/p>\n<\/td>\n

\n

A mouse button has been pressed.<\/p>\n<\/td>\n<\/tr>\n

\n

onmousemove()<\/em><\/p>\n<\/td>\n

\n

The mouse has been moved.<\/p>\n<\/td>\n<\/tr>\n

\n

onmouseout()<\/em><\/p>\n<\/td>\n

\n

The mouse has been moved off of or away from an element.<\/p>\n<\/td>\n<\/tr>\n

\n

onmouseover()<\/em><\/p>\n<\/td>\n

\n

The mouse has moved over an element.<\/p>\n<\/td>\n<\/tr>\n

\n

onmouseup()<\/em><\/p>\n<\/td>\n

\n

A mouse button has been released.<\/p>\n<\/td>\n<\/tr>\n

\n

onreset()<\/em><\/p>\n<\/td>\n

\n

The form element has been reset, such as when a form reset button is pressed.<\/p>\n<\/td>\n<\/tr>\n

\n

onresize()<\/em><\/p>\n<\/td>\n

\n

The window’s size has been changed.<\/p>\n<\/td>\n<\/tr>\n

\n

onselect()<\/em><\/p>\n<\/td>\n

\n

The text of a form element has been selected.<\/p>\n<\/td>\n<\/tr>\n

\n

onsubmit()<\/em><\/p>\n<\/td>\n

\n

The form has been submitted.<\/p>\n<\/td>\n<\/tr>\n

\n

onunload()<\/em><\/p>\n<\/td>\n

\n

The document or frameset has been unloaded.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u00a0
\nDOM2 \u7684\u9032\u5316:<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n

DOM 0 Event<\/strong><\/p>\n<\/th>\n

\n

DOM 2 Event<\/strong><\/p>\n<\/th>\n<\/tr>\n<\/tbody>\n

\n

onblur()<\/em><\/p>\n<\/td>\n

\n

blur<\/em><\/p>\n<\/td>\n<\/tr>\n

\n

onfocus()<\/em><\/p>\n<\/td>\n

\n

focus<\/em><\/p>\n<\/td>\n<\/tr>\n

\n

onchange()<\/em><\/p>\n<\/td>\n

\n

change<\/em><\/p>\n<\/td>\n<\/tr>\n

\n

onmouseover()<\/em><\/p>\n<\/td>\n

\n

mouseover<\/em><\/p>\n<\/td>\n<\/tr>\n

\n

onmouseout()<\/em><\/p>\n<\/td>\n

\n

mouseout<\/em><\/p>\n<\/td>\n<\/tr>\n

\n

onmousemove()<\/em><\/p>\n<\/td>\n

\n

mousemove<\/em><\/p>\n<\/td>\n<\/tr>\n

\n

onmousedown()<\/em><\/p>\n<\/td>\n

\n

mousedown<\/em><\/p>\n<\/td>\n<\/tr>\n

\n

onmouseup()<\/em><\/p>\n<\/td>\n

\n

mouseup<\/em><\/p>\n<\/td>\n<\/tr>\n

\n

onclick()<\/em><\/p>\n<\/td>\n

\n

click<\/em><\/p>\n<\/td>\n<\/tr>\n

\n

ondblclick()<\/em><\/p>\n<\/td>\n

\n

dblclick<\/em><\/p>\n<\/td>\n<\/tr>\n

\n

onkeydown()<\/em><\/p>\n<\/td>\n

\n

keydown<\/em><\/p>\n<\/td>\n<\/tr>\n

\n

onkeyup()<\/em><\/p>\n<\/td>\n

\n

keyup<\/em><\/p>\n<\/td>\n<\/tr>\n

\n

onkeypress()<\/em><\/p>\n<\/td>\n

\n

keypress<\/em><\/p>\n<\/td>\n<\/tr>\n

\n

onsubmit()<\/em><\/p>\n<\/td>\n

\n

submit<\/em><\/p>\n<\/td>\n<\/tr>\n

\n

onload()<\/em><\/p>\n<\/td>\n

\n

load<\/em><\/p>\n<\/td>\n<\/tr>\n

\n

onunload()<\/em><\/p>\n<\/td>\n

\n

unload<\/em><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u00a0\u65b0\u7684DOM2 \u7528\u6cd5\u53ef\u4ee5addEventListener()\u9019\u500b\u51fd\u6578\u4f86\u89c0\u5bdf\u5230:<\/p>\n

addEventListener(event,function,capture\/bubble);<\/p><\/blockquote>\n

\u53c3\u6578event\u5982\u4e0a\u8868\u6240\u793a, function\u662f\u8981\u57f7\u884c\u7684\u51fd\u6578, capture\u8207bubble\u5206\u5225\u662fW3C\u5236\u5b9a\u5f97\u5169\u7a2e\u6642\u9593\u6a21\u5f0f,\u7c21\u55ae\u4f86\u8aaacapture\u5c31\u662f\u5f9edocument\u7684\u958b\u59cb\u8b80\u5230\u6700\u5f8c\u4e00\u884c, \u518d\u57f7\u884c\u4e8b\u4ef6, \u800cbubble\u5247\u662f\u5148\u5c0b\u627e\u6307\u5b9a\u7684\u4f4d\u7f6e\u518d\u57f7\u884c\u4e8b\u4ef6.
\ncapture\/bubble\u7684\u53c3\u6578\u662f\u5e03\u6797\u503c, True\u8868\u793a\u7528capture, False\u5247\u662fbubble.Windows Internet Explorer\u4e5f\u6709\u5236\u5b9a\u4e00\u7a2eEventHandler, \u662f attachEvent(), \u683c\u5f0f\u5982\u4e0b:<\/p>\n

window.attachEvent(“submit”,myFunction());<\/p><\/blockquote>\n

\u6bd4\u8f03\u7279\u5225\u7684\u662fattachEvent\u4e0d\u9700\u8981\u6307\u5b9acapture\/bubble\u7684\u53c3\u6578, \u56e0\u70ba\u5728windows IE\u74b0\u5883\u4e0b\u90fd\u662f\u4f7f\u7528Bubble\u7684\u6a21\u5f0f.\u9019\u88e1\u7528\u5716\u50cf\u7684Rollover\u4f8b\u5b50\u4f86\u8868\u73fe\u4e8b\u4ef6\u7684\u7528\u6cd5:<\/p>\n

<!DOCTYPE HTML PUBLIC “-\/\/W3C\/\/DTD HTML 4.01\/\/EN”
\n“http:\/\/www.w3.org\/TR\/html4\/strict.dtd<\/a>“>
\n<html>
\n<head>
\n<title>Rollover<\/title>
\n<script type=”text\/javascript”>function moveOver(imgObj) {
\n\u00a0 if (typeof window.addEventListener != “undefined”) {
\n\u00a0 imgObj.addEventListener(“mouseover”,function(){imgObj.src = imgObj.id +
\n“_over.png”;}, false);
\n\u00a0 imgObj.addEventListener(“mouseout”, function(){imgObj.src = imgObj.id +
\n“_default.png”;}, false);
\n\u00a0 } else {
\n\u00a0 imgObj.attachEvent(“onmouseover”,function(){imgObj.src = imgObj.id +
\n“_over.png”;});
\n\u00a0 imgObj.attachEvent(“onmouseout”, function(){imgObj.src = imgObj.id +
\n“_default.png”;});
\n\u00a0 }
\n}<\/p>\n

function rollover() {
\nvar images = document.getElementsByTagName(“img”);
\nvar roll = new RegExp (“rollover”);
\nvar preload = [];
\nfor (var i = 0; i < images.length; i++) {
\n\u00a0 if (images[i].id.match(roll)) {
\n\u00a0 preload[i] = new Image();
\n\u00a0 preload[i].src = images[i].id + “_over.png”;
\n<\/a><\/a><\/span>
\n\u00a0 moveOver(images[i]);
\n\u00a0 }
\n}
\n}
\nif (typeof window.addEventListener != “undefined”) {
\n\u00a0 window.addEventListener(“load”,rollover,false);
\n} else {
\n\u00a0 window.attachEvent(“onload”,rollover)
\n}
\n<\/script>
\n<\/head>
\n<body>
\n<p><img id=”rollover_home” name=”img_home” src=”rollover_home_default.png”
\nalt=”Home”><\/p>
\n<p><img id=”rollover_about” name=”img_about” src=”rollover_about_default.png”
\nalt=”About”><\/p>
\n<p><img id=”rollover_blog” name=”img_blog” src=”rollover_blog_default.png”
\nalt=”Blog”><\/p>
\n<p><img id=”logo” name=”img_logo” src=”logo.png” alt=”Braingia Logo”><\/p>
\n<\/body>
\n<\/html><\/p><\/blockquote>\n

\u4e0a\u8ff0\u7684 typeof window.addEventListener != “undefined” \u7a0b\u5f0f\u78bc\u53ef\u4ee5\u5224\u65b7\u4f7f\u7528\u8005\u7684\u700f\u89bd\u5668\u662f\u5426\u652f\u63f4AddEventListener\u9019\u500b\u4e8b\u4ef6\u6a21\u578b, \u5982\u679c\u4e0d\u652f\u63f4\u5c31\u4f7f\u7528attachEvent.<\/p>\n

W3C \u53ca IE \u540c\u6642\u652f\u63f4\u79fb\u9664\u6307\u5b9a\u7684\u4e8b\u4ef6, \u7528\u9014\u662f\u79fb\u9664\u8a2d\u5b9a\u7684\u4e8b\u4ef6, \u683c\u5f0f\u5206\u5225\u5982\u4e0b:<\/p>\n

W3C\u683c\u5f0f:<\/p>\n

removeEventListener(event,function,capture\/bubble);<\/p><\/blockquote>\n

Windows IE\u7684\u683c\u5f0f\u5982\u4e0b:<\/p>\n

detachEvent(event,function);<\/p><\/blockquote>\n

\u8cc7\u6599\u53c3\u8003: Chapter 14 – Browsers and JavaScript, JavaScript Step by Step, by Steve Suehring<\/p>\n","protected":false},"excerpt":{"rendered":"

\u5927\u5bb6\u90fd\u77e5\u9053\u4e8b\u4ef6\u7684\u7528\u6cd5\u5c31\u662f\u7576\u67d0\u500b\u4e8b\u4ef6(\u72c0\u6cc1)\u88ab\u89f8\u767c\u4e86\u4e4b\u5f8c\u5c31\u6703\u53bb\u57f7\u884c\u67d0\u500bFunction, \u5c24\u5176\u662fJavascri […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38],"tags":[],"class_list":["post-59","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"http:\/\/tw.newtonstudio.com\/index.php?rest_route=\/wp\/v2\/posts\/59","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/tw.newtonstudio.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/tw.newtonstudio.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/tw.newtonstudio.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/tw.newtonstudio.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=59"}],"version-history":[{"count":0,"href":"http:\/\/tw.newtonstudio.com\/index.php?rest_route=\/wp\/v2\/posts\/59\/revisions"}],"wp:attachment":[{"href":"http:\/\/tw.newtonstudio.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=59"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/tw.newtonstudio.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=59"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/tw.newtonstudio.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=59"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}