Как передать параметр this в HTML

Есть ли способ передать значение параметра this в HTML, где this относится к объекту, в который он загружен. Что-то вроде:

<div onload = "floatIn(this)">
    <p>test</p>
</div>

Где function= floatIn(element){//}, так что элемент должен быть div?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
41
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Единственная особенность переменной this - это ее определение.

Вы можете передать его значение, как и любую другую переменную, при вызове функции.


Ваша проблема здесь в том, что элемент div не имеет события load, потому что он ничего не загружает, поэтому ваш обработчик событий никогда не сработает (и ваш HTML недействителен).

Так что всегда ли я должен вызывать div напрямую с помощью document.getElementby .... или есть другой способ, похожий на "this"? Или мне сделать это с помощью слушателя событий?

MaestroD 09.06.2018 18:46
Ответ принят как подходящий

Событие onload предназначено для элементов, требующих загрузки своего содержимого, например изображений; поэтому событие не будет запускаться для элементов div. Если вы хотите запустить скрипт после рендеринга div, вам нужно запустить его после того, как div упоминается в HTML:

<script>
  function floatIn(div) {
    console.info(div);
  }
</script>


<div id = "mydiv">
  <p>test</p>
</div>
<script>
  var div = document.getElementById('mydiv');
  floatIn(div);
</script>

Но если у вас есть изображения внутри вашего div, обратный вызов, определенный таким образом, будет запущен после рендеринга div, но до загрузки изображений. Чтобы справиться с такой ситуацией, вы должны прослушать событие загрузки изображений (например, см. эта библиотека jQuery).

Обновлено: вы можете создать свой собственный атрибут обратного вызова, если хотите и имеете права на добавление скрипта:

<div id = "div1" onrender = "this.textContent = this.id"></div>
<div id = "div2" onrender = "this.textContent = this.id"></div>

<!-- ...and the end of the document -->
<script>
  document.querySelectorAll('[onrender]').forEach(function (elem) {
    var func = new Function(elem.getAttribute('onrender'));
    func.call(elem);
  });
</script>

да, ладно, я уже думал, что мне нужно это сделать, вот так. Я надеялся, что есть способ, мне не нужно было указывать div = document.getElementById ('mydiv'), а просто написать «this» для элемента, в который загружается функция.

MaestroD 09.06.2018 22:30

@MaestroD, к сожалению, нет атрибута, который позволяет запускать обратный вызов при рендеринге div. Если вы действительно хотите это сделать (и у вас есть разрешение на добавление скрипта в конец), вы можете создать свой собственный атрибут для обратного вызова: jsfiddle.net/brujx057/5

everyonesdesign 11.06.2018 19:45

Другие вопросы по теме