addEventListenerを使用して、関数内でパラメーターをイベントとして追加します（FF/IEでは機能しません）。 Javascript

<html> 
<head> 
<title>FML</title> 

<script type="text/javascript"> 

function function1(e, div) { 
div.innerHTML="this works" 
document.getElementById('myspan').innerHTML= 'x-pos on click: ' + e.clientX 
div.addEventListener("mousemove", function(){test(event, this)}, true); 
} 

function test(e, div) { 
div.innerHTML+='<br/>so does this' 
//This doesn't work. Can't add event as a parameter to function that has to be executed when using addEventListener 
document.getElementById('myspan2').innerHTML= 'y-pos on move: ' + e.clientY 
} 

</script> 
</head> 
<body> 
<span id="myspan">&nbsp;</span> 
<span id="myspan2">&nbsp;</span> 
<div style="width:100px;height:100px;background-color:blue;overflow:hidden;" onclick="function1(event, this)"> 
</body> 
</html>

青いdivをクリックします。addEventListenerを使用して、関数内でパラメーターをイベントとして追加します（FF/IEでは機能しません）。 Javascript

私は、イベントのマウスオーバーを追加することはテスト（）を実行してい - 次のパラメータが含まれている必要があり機能：機能テスト（eは、DIVが）私は "得続けると呼ばれているこのイベント

を皮肉なことに、ChromeとSafariでは完全に機能しますが、FirefoxとIEでは「イベントは未定義」エラーです。

いずれにしても、addEventListenerを使用してイベントパラメータを追加できますか？私はchromeとsafariのwindow.eventで動作させることができますが、これは私が望む正確な設定です。私はグーグルで試したことがありましたが、今はしばらく試行錯誤しています。FML：/ヒント/ヒント/ ...頭の中で自分自身を撮影する以外に？

私はjqueryがおそらくこれをすべて解決するだろうと知っていますが、jQueryに移行する前にjavascriptに習熟したいと思っています。とにかく移行する必要がありますか？

感謝と歓声、 p。

出典

2011-09-12 Pascalculator

私の答えに加えて、「jqueryはおそらくこのすべてを解決するだろうが、jQueryに移行する前にjavascriptに慣れたいと思っています。これは言語を学ぶための正しい方法です。 JSコミュニティではまれです。私はここで、SOの人たちがjQueryの特別な構成を求めて、if-then-elseを代用することを求めていたからです:-D – Imp

div.addEventListener("mousemove", function(){test(event, this)}, true);

もちろん、「イベントは未定義」になります。 mousemoveイベントがトリガされたとき、あなたのイベントハンドラが呼び出されます。

function(){test(event, this)}

イベント情報オブジェクトに到達するには、2つの方法があります。引数としてイベントハンドラに渡されるか、またはwindow.eventにあります。

2番目のケースが成立するとします。あなたの関数にeventという名前のローカル変数がなく、function1にその変数がありません。ブラウザは、グローバルオブジェクトにeventが定義されているかどうかを調べます。 JavaScriptでは、グローバルオブジェクトは、windowと呼ばれているので、あなたの関数が

として解釈され、それが動作します。

ただし、前述のように、一部のブラウザでは、イベント情報が引数に渡されます。だからあなたのイベントハンドラは、おそらく次のようになりたいと思った：

function(event){test(event, this)}

そうtest()に渡さeventは未定義されるだろう。だから、これはクロスブラウザハンドラを作成する方法である：

function(event) { 
    if (!event) // i.e. the argument is undefined or null 
     event = window.event; 

    test(event, this); 
}

第二の問題は、addEventListener()が古いのIE（それはしかし、IE9でない）で動作しないということです。古いIEでは、attachEvent()という同様の関数を使用する必要があります。それとも、あなたは一つだけハンドラをアタッチた場合、あなたはそれを簡単な方法

div.onmousemove = function() {...};

出典

2012-05-11 23:31:19 Imp

うわー、ありがとう！これはあまりにも長い間私を悩ませていた、これはこれまで解決するだろうと思ったことはありません。あなたは純粋主義者のようです:)私はjQueryに移行しました。しかし、私はまだ幸運にも小さなものにJavaScriptを使用しているので、全体の（jQuery）ライブラリを読み込む必要はありません。 – Pascalculator

この方法でイベントリスナーを削除できますか？さもなければ、このように無名関数の中で名前付き関数を入れ子にする点は何ですか？ –

を行うことができますFirefoxなどの一部のブラウザではイベントは、パラメータとして渡される必要があり、あなたは、このコード

を交換する必要がこの

div.addEventListener("mousemove", function(event){test(event, this)}, true);

と

div.addEventListener("mousemove", function(){test(event, this)}, true);

は慎重に2行のコードを比較し、イベントに気づくプロパティが2番目の行に追加された関数のパラメータとして渡されました。

（古いIE版）attachEvent()を使用する必要があります。

div.attachEvent("onclick", function(event){test(event, this)});

attachEventがにaddEventListenerと現代の標準的なJSに置き換えられており、現在ではほとんどすべての近代的なブラウザがそれをサポートしていることに注意してください。

ここで http://caniuse.com/#feat=addeventlistener 互換表を見ることができます。

出典

2017-02-03 14:58:28

addEventListenerを使用して、関数内でパラメーターをイベントとして追加します（FF/IEでは機能しません）。 Javascript

答えて

関連する問題