Что «это» в JavaScript onclick?

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

Что thisзначит в сценарии?

О, мой бог
источник
4
@ JMCF125 Он все равно сумел пригодиться. Я искал в Google, как получить элемент, который был нажат в событии onclick, и оказался здесь, где нашел ответ.
Отбросить аккаунт
что делает javascript:? почему это не так <a onclick="func(this)" >here</a>
J3STER
1
@ J3STER Префикс "javascript:" неверен в onclick. Вы можете найти объяснение в ответе Тима Дауна ниже .
Мариано Десанце

Ответы:

97

В случае, о котором вы спрашиваете, thisпредставляет собой элемент HTML DOM.

Таким образом, это будет <a>элемент, на который щелкнули.

TM.
источник
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 .)

Stephan202
источник
22

Значением атрибутов обработчика событий, таких как onclick, должен быть просто JavaScript, без префикса «javascript:». Псевдопротокол javascript: используется в URL, например:

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

Однако вы должны использовать onclick="func(this)"форму вместо этого. Также обратите внимание, что в моем примере выше с использованием псевдопротокола javascript: «this» будет относиться к объекту окна, а не к<a> элементу.

Тим Даун
источник
1
Интересный отрицательный голос, хотя я полагаю, строго говоря, этот ответ предлагает только совет по вопросу, а не прямой ответ на вопрос.
Тим Даун
Да ... ты не особо ответила на вопрос: - / ничего личного!
Дэйв
1
@ Дэйв: Достаточно честно. К тому времени, как я написал это, на главный вопрос уже был дан ответ. Мой ответ, вероятно, должен был быть комментарием, но я подозреваю, что у меня, возможно, не было достаточно репутации, чтобы добавить комментарий в то время. Живи и учись.
Тим Даун
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

Здесь (this) - это объект, который содержит все функции / свойства элемента dom. вы можете видеть

console.log(this);

Это отобразит все свойства атрибутов элемента dom с иерархией. Этим вы можете управлять элементом dom.

Также опишите по ссылке ниже: -

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

Дипак Дхолиан
источник
3

ключевое слово this в событии 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>

antelove
источник
2

При вызове функции слово «this» является ссылкой на объект, который вызвал функцию.

В вашем примере это ссылка на элемент привязки. С другой стороны, вызов функции затем обращается к переменным-членам элемента через переданный параметр.

Ichiban
источник
1

thisотносится к объекту, которому onclickпринадлежит метод. Итак, внутри func thisбудет DOM-узел aэлемента, и this.innerTextон будет here.

гумбо
источник