addEventListenerでもattachEventでもないブラウザ

このQ&Aのポイント
  • JavaScriptのaddEvent()メソッドについて教えてください。
  • どのようなブラウザがelseになるのか教えてください。
  • イベントを削除する方法について教えてください。
回答を見る
  • ベストアンサー

【javascript 】addEventListenerでもattachEventでもないブラウザ

http://www.dustindiaz.com/top-ten-javascript/ 上記に記載されている、addEvent()について教えてください。 以下は抜粋です。(行頭は全角スペースです。) function addEvent(elm, evType, fn, useCapture) {  if (elm.addEventListener) {   elm.addEventListener(evType, fn, useCapture);   return true;  }  else if (elm.attachEvent) {   var r = elm.attachEvent('on' + evType, fn);   return r;  }  else {   elm['on' + evType] = fn;  } } 質問1 elseになるブラウザって、どのようなブラウザがあるのでしょうか? ご存知でしたら教えてください。 質問2 elseになるような場合、イベントを削除するには下記の様になるのでしょうか? elm['on'+evtType] = function () { return false; }; 以上、よろしくお願いいたします。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

> 質問1 > elseになるブラウザって、どのようなブラウザがあるのでしょうか? > ご存知でしたら教えてください。 私が知る限りMacIE、Opera6、Netfront3.0、Netscape3など。 DOMが発表されたころよりも前に作られたブラウザです。 このうち、現役で使われているのはMacIEとNetfrontだけだと思いますが、利用率は0.01%に満たないと思います。 > 質問2 > elseになるような場合、イベントを削除するには下記の様になるのでしょうか? > elm['on'+evtType] = function () { return false; }; elm['on'+evtType]=null; falseを返すと<a href="" onclick="function">の場合にアンカーとして動作しなくなるので、 この方法を使うなら、trueを返すだけの無名関数を代入する方が良いと思います。 elm['on'+evtType]=function(){return true;}

kingfruits
質問者

お礼

talooさん 詳しいご回答ありがとうございました。

関連するQ&A

  • イベントリスナーに設定した関数内で、id属性の値を取得するには

    IEでイベントリスナーに設定した関数で、イベントを発生させた要素のid属性値を取得する方法が分からずに困っています。 記述したコードは下記のようになります。Firefoxではうまく動作しました。 clickHandler内でFirefoxのe.currentTarget.idに対応するような処理はどのように行えばよいでしょうか。 ------------ JavaScript部分 ----------------------- function addEvent(elm, evType, fn, useCapture) { if (elm.addEventListener) { elm.addEventListener(evType, fn, useCapture); return true; } else if (elm.attachEvent) { var r = elm.attachEvent('on' + evType, fn); return r; } else { elm['on' + evType] = fn; } } function clickHandler(e) { var id; if (document.all && !window.opera) { // IEの場合に、ここの処理でid属性の属性地 hoge1やhoge2を取得したい。 // id = window.event.srcElement.id; これではだめ } else { id = e.currentTarget.id; } // idに応じた処理 } var elm1 = document.getElementById('hoge1'); var elm1 = document.getElementById('hoge2'); addEvent(elm1,'click',clickHandler,false); addEvent(elm2,'click',clickHandler,false); ------------ HTML部分 ----------------------- <li><a id="hoge1" href="#"><img src="●●" /></a></li> <li><a id="hoge2" href="#"><img src="●●" /></a></li> 先に進むことができずに困っています。よろしくお願いします。

  • JavaScriptでコンストラクタについて

    現在、JavaScriptを勉強中なのですが、 コンストラクタについて質問です。 下記のようなコードの場合、document.getElementByIdで取得したID 以外、使いまわしが出来ませんが、 コンストラクタを使って、1ページで複数使用出来るようにするには、 どのように記述すれば良いのでしょうか? //-----JavaScript----- function addEvent(elm,listener,fn){ try{ elm.addEventListener(listener,fn,false); }catch(e){ elm.attachEvent("on"+listener,fn); } } var c,y,m,d; addEvent(window,"load",function(){ c = document.getElementById("customer_birthday_c"); y = document.getElementById("customer_birthday_y"); m = document.getElementById("customer_birthday_m"); d = document.getElementById("customer_birthday_d"); if(c.options[0].selected == true){ y.disabled = true; m.disabled = true; d.disabled = true; } }); //-----JavaScript----- どなたかご教授ください。 宜しくお願いいたします。

  • jQuery の one 関数について

    jQuery の one 関数は便利だと思い、是非作ってみようと思いましたが、全然出来ません>< 一応以下のように作ってありますが、正しく動作しない上に、name を指定して、 Listener.data オブジェクトにname で保存をするようになっていて、同じnameを渡したら上書きされてしまいます。 どうしたら、jQueryのような、one関数を作れるでしょうか?;; var Listener={ addEvent:function(element,type,callback,useCapture){ if(element.addEventListener){ return element.addEventListener(type,callback,useCapture); } else if(element.attachEvent){ return element.attachEvent('on'+type,callback); } else{ return element['on'+type]=callback; } }, removeEvent:function(element,type,callback,useCapture){ if(element.removeEventListener){ element.removeEventListener(type,callback,useCapture); } else if(element.detachEvent){ element.detachEvent('on'+type,callback); } else{ return false; } return true; }, addOne:function(name,element,type,callback,useCapture){ Listener.addEvent(element,type,callback,useCapture); Listener.addEvent(element,type,function(){ Listener.removeEvent(element,type,); },useCapture); this.data[name]=new Function("Listener.removeEvent("+element+",'"+type+"',Listener.data['"+name+"'],"+useCapture+");+callback); this.addEvent(element,type,this.data[name],useCapture); }, data:{ } }; addEventとremoveEventは正常動作しています。 現在は、 Listener.addOne('name'/*指定しなくてもいいようにしたい*/,'document'/*オブジェクトを渡すと、elementがobjectになり、未定義エラーに*/,function(){alert('OK');},true); となっていますが、目指すは以下のような書き方です。 //仮関数定義 function test(str){ alert(str); } var str='test'; Listener.addOne(document,function(str){test(str);},true); です。 一応、jQueryのone関数を見てみましたが、jQueryは使ったことが無く、あまり分かりませんでした;; 御回答宜しくお願いしますm(_ _)m

  • event量産

    はじめまして! さっそくですが以下を <script type="text/javascript"> function $(e) { return document.getElementById(e); } function $$(n) { return $(n).childNodes[0].href; } function lh(u) { top.location.href = $$(u); } function addevent(node,evt,func){ if(node.addEventListener){ node.addEventListener(evt,func,false); } else if(node.attachEvent){ node.attachEvent("on"+evt,func); } } addevent( window,"load", function(){ //↓ここからが質問です addevent($("css_link"), "click", function(){ lh("css_link"); }); //↑これがうまくいったので var doo = "other_link"; addevent($(doo), "click", function(){ lh(doo); }); //↑次に向けてのテスト これもうまくいきました for(i=1;i<20;i++) { var names = "page"+i; addevent($(names), "click", function(){ lh(names); }); } //↑しかしこれがうまくいかない } ); </script> やっていることは<DIV>の中にある<A>のhref内容を読み取り、<DIV>と<A>の隙間をクリックしても同じURLにジャンプさせたいということです。 上記の"css_link"や"other_link"などの固定URLは羅列するつもりです。 これは問題なく動作します。 問題の ループさせている部分は"page1"~"page19"まで可変でPHPで書き出す部分です。 この部分の処理方法を教えてください。 もうひとつ質問です とりあえず19回ループさせていますが、ページ内に存在しないidを指定しても(実際はpage1,page2だけとか)現在はエラーにならないようですが、問題点などありましたら教えてください。 よろしくお願いします!

  • DOMを使ったjavascript「続きを読む」(表示/非表示 切替え)初期値変更について

    以下は拾ってきたもので、 長い文章の途中に「続きを読む」などと入れて 内容を隠しておくのに使えるものだと思いますが、 設置してみたところ初期値で表示状態になっています。 これを非表示にするには どの値を変更すれば良いでしょうか。 javascriptの知識がないので、教えて下さい。 // イベントリスナーの追加 function addEvent(node, evt, func) { if (node.addEventListener) { node.addEventListener(evt, func, false); } else if (node.attachEvent) { node.attachEvent("on" + evt, func); } } // イベントがあった要素を得る function getTarget(e) { if (e.target) { return e.target; } else if (e.srcElement) { return e.srcElement; } } // イベントリスナーの割り当て function setHandler() { // 文書内のdiv要素を列挙する var divElements = document.getElementsByTagName('div'); for (var i = 0; i < divElements.length; i++) { // div要素の直下の階層にあるh4要素を得る var h4Element = divElements[i].getElementsByTagName('h4')[0]; // h4要素のclickイベントにイベントリスナーを割り当てる addEvent(h4Element, "click", showHide); } } // h4要素と同じ階層にあるp要素の表示/非表示を切り替える function showHide(e) { // クリックされたh4要素を得る var h4Element = getTarget(e); // h4要素と同じ階層にあるp要素を得る var parent = h4Element.parentNode; var pElement = parent.getElementsByTagName('p')[0]; // p要素の表示/非表示を切り替える pElement.style.display = (pElement.style.display == 'none') ? '' : 'none'; } // イベントリスナーを割り当てる addEvent(window, "load", setHandler);

  • Javascriptのオブジェクト指向プログラミングとイベント、thisの扱い

    Javascriptを勉強中です。 オブジェクト指向プログラミングを習得しようと努力しております。 あるHTML要素(例ではelm)にクリックイベントを付加する際、オブジェクト内のmyFuncを呼ぶのに以下のようにthis.myFuncとすると、thisがHTML要素となるためにエラーが出ます。 elm.addEventListener("click", this.myFunc, false); これを回避する目的で elm.addEventListener("click", (function(that) { return function() { that.myFunc(); } } )(this), false); とオブジェクト内からクロージャを使って定義することで解決することは分かったのですが、このイベントを削除するのに、 elm.removeEventListener("click", (function(that) { return function() { that.myFunc(); } } )(this), false); や elm.removeEventListener("click", function() { that.myFunc(); }, false); としても除去することが出来ません。この場合はどのようにイベントを削除することが出来るのでしょうか? そもそもクロージャを使った定義部分に問題があるのでしょうか? どうぞ教えていただきますようお願いいたします。

  • <body>にwindow.onload = functionを2つ設定すると、最後に書いたイベントだけが実行されてしまいます。

    <body>タグにonloadイベントを実行させる2つの外部jsを<head>内に設置し実行すると、 最後に記述したイベントだけが反映されてしまいます。 http://blog.webcreativepark.net/2008/02/26-185844.html を参考にいろいろといじってはみたのですが、 function addEvent(elm,listener,fn){ try{ elm.addEventListener(listener,fn,false); }catch(e){ elm.attachEvent("on"+listener,fn); } } js初心者でして、上の関数の中にどのように記述をすれば良いのかわかりません。 IE6・IE7・safariで動作させるには、実際にどのようなソースを書けばいいのでしょうか。 どなたかご教授いただけますでしょうか。 <head>内の外部jsは、以下のように記述しました。 <script src="/A.js" type="text/javascript"></script> <script src="/B.js" type="text/javascript"></script> </head> 外部jsのソースは以下になります。 //A.js window.onload = function() { var blur = function () { this.blur() }; for (var i = 0; i < document.links.length; i++) document.links[i].onfocus = blur; } //B.js window.onload = function() { prepZooms(); insertZoomHTML(); zoomdiv = document.getElementById(zoomID); zoomimg = document.getElementById(theID); } 以上になります。宜しくお願い致します。

  • javascriptで困っています

    マウスがブラウザーの外側から出ると、ポップアップが出るようにしたいです。 loadEvents: function() { this.addEvent(document, "mouseout", function(e) { e = e ? e : window.event; if(e.target.tagName.toLowerCase() == "input") return; var vpWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); if(e.clientX >= (vpWidth - 50)) return; if(e.clientY >= 50) return; var from = e.relatedTarget || e.toElement; if(!from) bioEp.showPopup(); }.bind(this)); 現在は、上方向に出るとポップアップが出ます。 左右にマウスが出た時に、ポップアップ出るにはどう記述すれば良いでしょうか。 よろしくお願いいたします。

  • 【javascript】prototypeを使って宣言したfunctionでthis.の値が取れない

    以下HTMLは開いた時に'aaa'がアラートされるつもりで作りました。 ※行頭は全角スペースです。 <html> <head> <script type="text/javascript"><!-- function hoge(){  this.val ='aaa'; }; hoge.prototype.func = function(){  alert(this.val); }; h = new hoge(); if(window.addEventListener){  window.addEventListener('load', h.func, false); }else{  window.attachEvent('onload', h.func); } //--></script> </head> <body> </body> </html> 結果は、undifindがアラートされました。 alert(this.val); を alert(h.val); とベタに記述すれば回避できますが、ちょっと違和感を感じます。 このような場合、どのような記述がベターなのでしょうか?

  • IE6 + javascript

    すみません、先ほども質問したのですが、締め切ってしまったのでもう一度質問させてください。 下記コードが、Firefoxでは動作するのですが、IEではjavasciptの部分が動作していません。 もちろん、javascriptの設定は有効にしてあります。 var browser = navigator.appName; if(browser.charAt(0) == "N") { window.addEventListener("load",change_page(page_id),false); } else if (browser.charAt(0) == "M") { window.attachEvent("onLoad",change_page(page_id)); } .... function httpRequest() { if (window.ActiveXObject) { try { httpObj = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { try { httpObj = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { httpObj = false; } } } else if (window.XMLHttpRequest){ try{ httpObj = new XMLHttpRequest(); } catch(e) { httpObj = false; } } return httpObj; } change_page()はfunctionです。 なぜIE6ではjavascriptが動かないのでしょう? ソースのどこが悪いのかわからず、どなたかアドバイスあればお願いします!

専門家に質問してみよう