JavaScript onclickの「これ」とは何ですか?


115
<a onclick="javascript:func(this)" >here</a>

thisスクリプトの意味は何ですか?


4
@ JMCF125とにかく彼は役に立った。onclickイベントでクリックされた要素を取得する方法をグーグルで検索し、ここで答えを見つけました。
アカウント

javascriptは何をしますか?なぜこのようにならないのですか <a onclick="func(this)" >here</a>
J3STER 2017

1
@ J3STER「javascript:」接頭辞は、onclickでは正しくありません。以下のティム・ダウンの答えに説明があります
マリアーノデサンツェ

回答:



34

これは、属性が属するDOM内の要素を参照しonclickます。

<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
function func(e) {
  $(e).text('there');
}
</script>
<a onclick="func(this)">here</a>

(この例ではjQueryを使用しています。)


22

onclickなどのイベントハンドラー属性の値は、「javascript:」接頭辞なしのJavaScriptにする必要があります。javascript:疑似プロトコルはURLで使用されます。次に例を示します。

<a href="javascript:func(this)">here</a>

onclick="func(this)"ただし、これよりもフォームを使用する必要があります。また、上記の私の例では、javascript:疑似プロトコル「this」を使用すると、<a>要素ではなくウィンドウオブジェクトが参照されることに注意してください。


1
興味深い反対投票ですが、厳密に言えば、この回答は質問に直接回答するのではなく、質問に関するアドバイスを提供するだけだと思います。
Tim Down

うん...あなたは本当に質問に答えませんでした:-/何も個人的ではありません!
デイブ

1
@デーブ:十分に公正。私がこれを書いたときには、主な質問はすでに答えられていました。私の答えはおそらくコメントだったはずですが、その時点でコメントを追加するのに十分な担当者がいなかったのではないかと思います。生活し、学びます。
Tim Down

8
現時点では担当者が不足していますか?彼のワインを吐き出す
ジョナサン

5

JavaScriptではthis、アクションを含む要素を指します。たとえば、次のような関数があるとしhide()ます。

function hide(element){
   element.style.display = 'none';
}

呼び出しhidethis、要素が非表示になります。DOMの他の要素に類似している場合でも、クリックされた要素のみを返します。

たとえば、this下のHTMLで数字をクリックすると、クリックされた箇条書きだけが非表示になります。

<ul>
  <li class="bullet" onclick="hide(this);">1</li>
  <li class="bullet" onclick="hide(this);">2</li>
  <li class="bullet" onclick="hide(this);">3</li>
  <li class="bullet" onclick="hide(this);">4</li>
</ul>

4

ここ(this)は、dom要素のすべての機能/プロパティを含むオブジェクトです。あなたは見ることができます

console.log(this);

これにより、dom要素のすべての属性プロパティが階層とともに表示されます。これでdom要素を操作できます。

以下のリンクにも記載してください:-

http://www.quirksmode.org/js/this.html


3

キーワードこのでaddEventListenerのイベント

function getValue(o) {
  alert(o.innerHTML);
}

function hide(current) {
  current.setAttribute("style", "display: none");
}

var bullet = document.querySelectorAll(".bullet");

for (var x in bullet) { 
  bullet[x].onclick = function() {
    hide(this);
  };
};
 
/* Using dynamic DOM Event */
document.querySelector("#li").addEventListener("click", function() {
  getValue(this); /* this = document.querySelector("#li") Object */
});
li {
  cursor: pointer;
}
<ul>
  <li onclick="getValue(this);">A</li>
  <li id="li" >B</li>
  <hr />
  <li class="bullet" >1</li>
  <li class="bullet" >2</li>
  <li class="bullet" >3</li>
  <li class="bullet" >4</li>
</ul>


2

関数を呼び出すとき、「this」という語は関数を呼び出したオブジェクトへの参照です。

あなたの例では、それはアンカー要素への参照です。次に、関数呼び出しは、渡されたパラメーターを介して要素のメンバー変数にアクセスします。


1

thisonclickメソッドが属するオブジェクトを指します。したがって、内部func thisa要素のDOMノードであり、にthis.innerTextなりますhere

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.