<a onclick="javascript:func(this)" >here</a>
thisスクリプトの意味は何ですか?
<a onclick="func(this)" >here</a>
<a onclick="javascript:func(this)" >here</a>
thisスクリプトの意味は何ですか?
<a onclick="func(this)" >here</a>
回答:
あなたが尋ねている場合には、 thisはHTML DOM要素を表します。
したがって、<a>クリックされた要素になります。
onclickなどのイベントハンドラー属性の値は、「javascript:」接頭辞なしのJavaScriptにする必要があります。javascript:疑似プロトコルはURLで使用されます。次に例を示します。
<a href="javascript:func(this)">here</a>
onclick="func(this)"ただし、これよりもフォームを使用する必要があります。また、上記の私の例では、javascript:疑似プロトコル「this」を使用すると、<a>要素ではなくウィンドウオブジェクトが参照されることに注意してください。
JavaScriptではthis、アクションを含む要素を指します。たとえば、次のような関数があるとしhide()ます。
function hide(element){
element.style.display = 'none';
}
呼び出しhideでthis、要素が非表示になります。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>
ここ(this)は、dom要素のすべての機能/プロパティを含むオブジェクトです。あなたは見ることができます
console.log(this);
これにより、dom要素のすべての属性プロパティが階層とともに表示されます。これでdom要素を操作できます。
以下のリンクにも記載してください:-
キーワードこの中で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>