javascript - `this`を使用したJavaScripteval（）

Question

HTMLでJavaScriptコードスニペットを定義すると、次のようになります。

<div id=myElem onMyUpdate="alert('Update called for ' + this.id)">...

thisそれでは、適切に割り当てられたJavaScript内からそれを評価する最もエレガントな方法は何ですか？

私がこれまでに思いついたのは、次のようなものです。

if (elem.hasAttribute('onMyUpdate'))
    (function () { eval(elem.getAttribute('onMyUpdate')) }).call(elem);

これは（私には）ひどいように見えますが、機能します。より良い/よりエレガントな選択肢はありますか？

MDNは、これを行うためにeval（）に2番目の引数があったと言いますが、現在は非推奨になっています。次に、MDNは、代わりに演算子with（）を使用することを提案します。これは、提供されたリンクをたどると、最新の標準によって非推奨になっていることがわかります。言い換えれば、行き止まりです。

（補足として、StackOverflowはthis検索用語の単語を無視するため、関連する回答を見逃す可能性があります-そうしないように指示する方法はありますか？）

編集：私は言及するのを忘れました：jQueryはありません、ただバニラJavaScriptをお願いします

score 2 · Accepted Answer

これはどう：

if(elem.hasAttribute('onMyUpdate')) {
  var fun = new Function(elem.getAttribute('onMyUpdate'));
  fun.call(elem);
}

score 1 · Accepted Answer

理想的には、これを完全に目立たないように、eval：を使用せずに実行する必要があります。

<div id="myElem"></div>

。

var elem = document.getElementById('myElem');
elem.onMyUpdate = function () {
    alert(this.id);
};

// ...

elem.onMyUpdate && elem.onMyUpdate();

score 0 · Accepted Answer

より洗練された解決策は、カスタムイベントを使用し、ハンドラーをHTML要素のいくつかのカスタムイベントにバインドし、コードの他の部分でそれらをトリガーすることです。いくつかの例については、このチュートリアルとSidharthMudgalによる回答を参照してください。

score 0 · Accepted Answer

これを使用する代わりに、elemを使用できます。

 <div id=myElem onMyUpdate="alert('Update called for ' + elem.id)">...

js：

if (elem.hasAttribute('onMyUpdate')){ // all variable available here will be available inside eval.
     eval( elem.getAttribute('onMyUpdate') );
}

4 に答える 4