Фокус JS для изменения запроса, размытие на дисплее

#javascript #addeventlistener #innerhtml

Вопрос:

Я надеюсь, что смогу объяснить эту «проблему», которая у меня есть.

Я хочу щелкнуть по тексту (в моем случае редактируемый div)
Отредактируйте «код / команду / запрос / инструкцию
При выпуске / размытии замените внутреннее содержимое сгенерированными данными

Это работает… но я считаю, что мог бы сделать это с меньшим количеством кода .. Могу ли я? Позвольте мне показать вам, что у меня есть на данный момент. Я не возражаю, если мне нужно изменить редактируемый div.

 /* I don't like messy code */

var header = document.getElementById('header');
var lead = document.getElementById('lead');
var article = document.getElementById('article');

header.addEventListener("blur", render);
header.addEventListener("focus", edit);

lead.addEventListener("blur", render);
lead.addEventListener("focus", edit);

article.addEventListener("blur", render);
article.addEventListener("focus", edit);



function render() {
      this.setAttribute("XPQ", this.innerHTML );
      this.innerHTML = 'dynamic data from db (example)  bla, bla bla bla and more bla';
}

function edit() {
      this.innerHTML = this.getAttribute("XPQ");   
}

 /*
    ---  CSS Isn't important  ---
*/

body{font-family:arial}h4{colour:red;}strong{colour:blue;}h4#header,#lead,#article{background:rgba(205,205,5,0.1);padding:3px;}

 <h4 id="header" contenteditable="true" xpq="$post[1]['header']  --  (example)">dynamic data from db (example)</h4>
<p><strong id="lead" contenteditable="true" xpq="$example">this is the same as above (example)</strong></p>
<p id="article" contenteditable="true" xpq="/html/body/div[1]"> but of course all 3 have difrent data. I just tried to keep is simple to explain my problem. My idea is to use Javascript with PHP. Only I'm not so great with Javascript jet. I wonder if there was a clear way to make the JS.  Without using on every element  a blur and focus listener.</p>

Мне любопытно, как я могу улучшить свой код.
Я был бы благодарен за вашу помощь.

1. В чем проблема?

2. Мне нравится больше изучать JS. и я хочу знать, правильно ли это сделать. Это работает, но я думаю, что есть лучший способ … мне действительно нужно устанавливать для каждого элемента фокус и размытие? Так что большой проблемы нет. Только поиск улучшений.

Ответ №1:

Нехорошо добавлять прослушиватели событий ко всем элементам, получая их в одиночку getElementById . У вас может быть один и тот же класс для всех элементов, которые хотят иметь такое поведение. А затем использовать querySelectorAll для их получения и forEach для addEventListner них

 document.querySelectorAll('.editable').forEach(x => {
  x.addEventListener("blur", render);
  x.addEventListener("focus", edit);

})




function render() {
      this.setAttribute("XPQ", this.innerHTML );
      this.innerHTML = 'dynamic data from db (example)  bla, bla bla bla and more bla';
}

function edit() {
      this.innerHTML = this.getAttribute("XPQ");   
}

 /*
    ---  CSS Isn't important  ---
*/

body{font-family:arial}h4{colour:red;}strong{colour:blue;}h4#header,#lead,#article{background:rgba(205,205,5,0.1);padding:3px;}

 <h4 id="header" class="editable" contenteditable="true" xpq="$post[1]['header']  --  (example)">dynamic data from db (example)</h4>
<p><strong id="lead" class="editable" contenteditable="true" xpq="$example">this is the same as above (example)</strong></p>
<p id="article" class="editable" contenteditable="true" xpq="/html/body/div[1]"> but of course all 3 have difrent data. I just tried to keep is simple to explain my problem. My idea is to use Javascript with PHP. Only I'm not so great with Javascript jet. I wonder if there was a clear way to make the JS.  Without using on every element  a blur and focus listener.</p>