Сергей delphinpro

1. вешаем на keydown одноразовый обработчик {once: true}
   
2. в обработчике на keyup повторяем навешивание одноразового хэндлера на keydown
   

img{
    width:100%;
+   height: 100%;
+   object-fit: cover;
}

.img{
    width:700px;
    margin:auto;
    display: grid;
-   grid-template-columns: repeat(3, 1fr);
+   grid-template-columns: 2fr 3fr;
    grid-row-gap: 10px;
    grid-column-gap:20px;
}

.img div:nth-child(2){
-   grid-column-start: 2;
-   grid-column-end: 4;
-   grid-row-start: 1;
-   grid-row-end:3;
+   grid-row: span 2;
}

function update() {
    const urlParams = new URLSearchParams(window.location.search);
    const city = urlParams.get('location_location1');
    const target = document.getElementById('locator_citi');
    const cities = {
        'arzamas'   : 'Арзамас',
        'abakan'    : 'Абакан',
        'almetevsk' : 'Альметьевск',
        'angarsk'   : 'Ангарск',
        'armavir'   : 'Армавир',
        'artjom'    : 'Артём',
        'arhangelsk': 'Архангельск',
        'astrahan'  : 'Астрахань',
        // ...
    };

    if (cities[city]) {
        target.innerHTML = cities[city];
    }
}

window.addEventListener('DOMContentLoaded', update);

document.querySelector('.jobsearch-onsubmit-apilocs')?.addEventListener('click', () => {
    update();
});

<div class="person">
  <img class="person__photo" src="">
  <div class="person__wrapper">
    <div class="person__name">Имя фамилия</div>
    <div class="person__position">Должность</div>
  </div>
</div>

.person {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.person__photo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  flex-shrink: 0;
}
.person__wrapper {
  display: grid;
  gap: 0.25rem;
}
.person__name {}
.person__position {}

function CLICK() {
  let button = document.querySelectorAll('button');
  if(button.length){ 
    for (let i = 0; i < button.length; i++){
+     if (!button[i].classList.contains('ok'))
+       button[i].classList.add('ok');
        button[i].addEventListener('click', function(EVENT){
          console.log(1,button[i]);
        });
+     }
    }
  }
}
CLICK();

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

function getCurrentOffset(s) {
  return s.split(",", 2).map((n) => Number(n.replace(/\D/g, "")));
}
function right2_m() {
  const box = document.getElementById("box");
  let [left, top] = getCurrentOffset(box.style.transform);
  box.style.transform = `translate(${left+30}px,${top}px)`;
}
function bottom2_m() {
  const box = document.getElementById("box");
  let [left, top] = getCurrentOffset(box.style.transform);
  box.style.transform = `translate(${left}px,${top+30}px)`;
}

<div class="row">
        <div class="col-lg-4">video</div>
        <div class="col-lg-4">video</div>
        <div class="col-lg-4">video</div>
        <div class="col-lg-4">video</div>
        <div class="col-lg-4">video</div>
        <div class="col-lg-4">video</div>
</div>

<?php

header('Content-Type: text/javascript');

echo 'alert("boom")';

<table class="table">
    <tr>
        <td class="moccasin" colspan="2">&nbsp;</th>
        <td class="greenyellow">&nbsp;</th>
    </tr>
    <tr>
        <td class="moccasin" rowspan="2">&nbsp;</td>
        <td class="cyan" colspan="2"></td>
    </tr>
    <tr>
        <td class="cyan">&nbsp;</td>
        <td class="greenyellow">&nbsp;</td>
    </tr>
</table>
<style>
.table {
  width: 300px;
  height: 300px;
  border-spacing: 5px;
  border-collapse: separate;
  border: none;
}
.table td {
  width: 33%;
  height: 33%;
}
.moccasin {
  background: moccasin;
}
.greenyellow {
  background: greenyellow;
}
.cyan {
  background: cyan;
}
</style>