Блог

Я использую сборку аккордеона из школ W3. Это отлично работает, но я хотел бы немного навести порядок, создав для этого функцию в моем JS-файле (а не встроенные <script> теги). Проблема в том, что мне нужно немного подправить его, удалив прослушиватель событий, но мне не повезло (все еще изучаю JS). Как я могу этого добиться?

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

HTML:

 <button class="accordion" onclick="faqsAccordion()">Section 1</button>
<div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
 

JS

 function faqsAccordion() {
  var acc = document.getElementsByClassName("accordion");
  var i;

  for (i = 0; i < acc.length; i  ) {
    acc[i].addEventListener("click", function() {
      this.classList.toggle("faqs-active");
      var panel = this.nextElementSibling;
      if (panel.style.maxHeight) {
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight   "px";
      } 
    });
  }
}
 

Суть

Сохраните версию функции, которую вы используете в качестве прослушивателя событий, например

 function MyHandler(){
    console.log("clicked!");
}
document.getElementById("MyButton").addEventListener("click", MyHandler);
 

затем вы можете позже удалить его, просто используя то же имя функции.

 document.getElementById("MyButton").removeEventListener("click", MyHandler);
 

Если вы настаиваете на использовании onclick свойства, вы также можете установить для него значение null вручную в коде; однако я не рекомендую это. onclick в HTML сбивает с толку, он выполняет код внутри строки, а не просто устанавливает обработчик события «click» для функции с таким именем.

 document.getElementById("MyButton").onclick = null;
 

Как ни странно, изменение его на другую строку не работает. Многие из этих старых атрибутов HTML, приклеенных к JS, работают нелогичными способами. Это не работает, потому что свойство onclick принимает указатель на функцию и отказывается от чего-либо еще, в то время как атрибут onclick принимает строку, которая выполняется.

Что вы хотите сделать

Вы хотите превратить это

 function faqsAccordion() {
  var acc = document.getElementsByClassName("accordion");
  var i;

  for (i = 0; i < acc.length; i  ) {
    acc[i].addEventListener("click", function() {
      this.classList.toggle("faqs-active");
      var panel = this.nextElementSibling;
      if (panel.style.maxHeight) {
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight   "px";
      } 
    });
  }
}
 

В это

 <button class="accordion" id="faqsAccordian">Section 1</button>
<div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
 

 document.getElementById("faqsAccordian").addEventListener("click",faqsAccordian);
function myfunc(e){ // Added the "event" parameter for you, for future use :)
  this.classList.toggle("faqs-active");
  var panel = this.nextElementSibling;
  if (panel.style.maxHeight) {
    panel.style.maxHeight = null;
  } else {
    panel.style.maxHeight = panel.scrollHeight   "px";
  } 
}
function faqsAccordion() {
  var acc = document.getElementsByClassName("accordion");
  var i;
  
  for (i = 0; i < acc.length; i  ) {
    acc[i].addEventListener("click", myfunc);
  }
}
// ... some time later...
var acc = document.getElementsByClassName("accordion");
const whichever = 0;

// Randomly remove an event listener... muahuahua...
acc[whichever].removeEventListener("click", myfunc);

 

Однако…

Что, если вы хотите использовать анонимные функции, потому что хотите, чтобы многие из тех же функций действовали как прослушиватель событий? Допустим, мы хотим, чтобы при нажатии кнопки MyButton ниже появилось еще одно окно с предупреждением.

 <html>
<body>
<button id="MyButton">Add alert to the bottom button</button><br>
<button id="MyAlertButton">Popup please!</button>

<script>
var MyAlertButtonFunctionPointers = [];
function MyAlertButtonClickWrapper(e){
    MyAlertButtonFunctionPointers.forEach(f=>f(e))
}
document.getElementById("MyAlertButton").addEventListener("click", MyAlertButtonClickWrapper);

document.getElementById("MyButton").addEventListener("click", function(e){
  MyAlertButtonFunctionPointers.push(e=>{
    alert("Hi! I'm a button with the name "   this.id   "nThe event that lead to me being clicked happened at ("   e.screenX   ", "   e.screenY   ")"); 
  })
})
</script>
</body>
</html>
 

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