Що це "це" в onclick JavaScript?

115

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

Що thisозначає сценарій?

javascript

— О Боже мій
джерело

4

@ JMCF125 Йому вдається все-таки бути корисним. Я поцікавився, як отримати елемент, на який натискали в події onclick, і опинився тут, де знайшов відповідь.

— Викинути рахунок

що робить JavaScript: чому це не так <a onclick="func(this)" >here</a>

— J3STER

1

@ J3STER Префікс "javascript:" неправильний в onclick. Ви можете знайти пояснення у відповіді Тіма Дауна нижче .

— Маріано Дезанзе

97

У випадку, про який ви запитуєте, thisпредставляє елемент HTML DOM.

Так це був би <a>елемент, на який натискали.

— ТМ.
джерело

5

Може хтось посилається на специфікацію? Наївний погляд на w3.org/TR/DOM-Level-3-Events був безрезультатним.

— Ciro Santilli 郝海东冠状病六四事件法轮功

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 .)

— Стефан202
джерело

22

Значення атрибутів обробника подій, таких як onclick, має бути просто JavaScript, без будь-якого префікса "javascript:". URL-адреса використовується JavaScript: псевдопротокол, наприклад:

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

Вам слід скористатися onclick="func(this)"формою, яка надає перевагу цій формі. Також зауважте, що в моєму прикладі вище, використовуючи протокол javascript: pseudo-протокол "цей" буде стосуватися об'єкта вікна, а не <a>елемента.

— Тім Даун
джерело

1

Цікавий результат, хоча, мабуть, строго кажучи, ця відповідь пропонує лише поради щодо питання, а не безпосередньо відповідь на питання.

— Тім Даун

Так ... ви насправді не відповіли на питання: - / нічого особистого!

— Дейв

1

@Dave: Досить справедливо. На той момент, коли я це писав, на головне питання вже було дано відповіді. Моя відповідь, ймовірно, повинен був бути коментарем, але я підозрюю, що, можливо, мені не вистачило респ., Щоб додати коментар у той час. Живи й учись.

— Тім Даун

8

Не вистачає представників у той час? випльовує своє вино

— Джонатан

5

У 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>

— Стефан Перрі
джерело

4

Тут (це) - об’єкт, який містить усі особливості / властивості елемента 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

При виклику функції слово "це" є посиланням на об'єкт, який викликав функцію.

У вашому прикладі це посилання на елемент якоря. З іншого боку, виклик функції потім отримує доступ до змінних членів елемента через переданий параметр.

— ічібан
джерело

1

thisonclickвідносить до об'єкта, до якого належить метод. Так всередині func thisбув би вузол DOM aелемента і this.innerTextбув би here.

— Гамбо
джерело