仅在firefox中出现Javascript引用错误

我有一些用javascript编写的代码，它可以在除firefox之外的所有浏览器中运行。错误是：

ReferenceError:未定义事件

我理解它的意思是，在函数中调用事件之前，我需要定义事件，但我不知道如何分配它，我不明白为什么它在除firefox之外的所有浏览器中都能工作

const headings = document.querySelectorAll('#myTable th:not(:first-of-type)');

const tbody = document.querySelector('#myTable tbody');

const sortRows = (order, i) => {
let rows = document.querySelectorAll('#myTable tbody tr');

if (i === 0) {
if (order === 'asc') {
  return Array.from(rows).sort();
} else {
  return Array.from(rows).sort().reverse();
}
} else {

return Array.from(rows).sort((a, b) => {

    let s = 0;
    let aval = a.cells[i].textContent;
    let bval = b.cells[i].textContent;

    if(event.target ==document.getElementById('acid-level')){
        var cval = a.cells[i - 1].textContent;
        var dval = b.cells[i - 1 ].textContent;
      }
    if(event.target ==document.getElementById('alk-level')){
        var cval = a.cells[i + 1].textContent;
        var dval = b.cells[i +1 ].textContent;
    }

    if(aval === bval){
       s = 0;
    }else if (aval === 'High') {
        s = 1;
    } else if (bval === 'High') {
        s = -1;           
    } else if (aval === 'Medium') {
        s = 1;
    } else if (bval === 'Medium') {
        s = -1;
    } else if (aval === 'Low') {
        s = 1;
    } else if (bval === 'Low') {
        s = -1;  
    }

    if(cval === dval){
       //s = 0;
    }else if (cval === 'High') {
        s = -1;
    } else if (dval === 'High') {
        s = 1;           
    } else if (cval === 'Medium') {
        s = -1;
    } else if (dval === 'Medium') {
        s = 1;
    } else if (cval === 'Low') {
        s = -1;
    } else if (dval === 'Low') {
        s = 1;  
    }

    if (order === 'desc') {
      s *= -1;
     }
     return s;
    });
  }
}

for (let heading of headings) {
heading.addEventListener('click', (event) => {
let fragment = document.createDocumentFragment();
let elem = event.target;
let order = 'asc';
if (elem.classList.contains('asc')) {
  order = 'desc';
  elem.classList.remove('asc');
  elem.classList.add('desc');

} else {
  elem.classList.remove('desc');
  elem.classList.add('asc');        

}

let sorted = sortRows(order, elem.cellIndex);
for (let s of sorted) { 
  fragment.appendChild(s);
}
while (tbody.firstChild) {
  tbody.removeChild(tbody.firstChild);
}   
  tbody.appendChild(fragment);

  });
}

代码分别从高到低和从低到高对表列进行排序，工作正常，但仍然无法在firefox中工作

    <table id="myTable">
  <thead>
    <tr>
    <th >Food/Beverage </th> 
    <th id="alk-level">Alkalizing Level</th>
    <th id="acid-level">Acidic Level</th>
    </tr>
  </thead>
 <tbody>
  <tr>
    <td>Ale (Dark)</td>
    <td></td>
    <td>High</td>
  </tr>
  <tr>
   <td>Ale (Pale)</td>
   <td></td>
   <td>High</td>
  </tr>
   <tr>
   <td>Alkaline, Ionized Water</td>
   <td>High</td>
    <td></td>
   </tr>
  <tr>
     <td>Almond Butter</td>
     <td>Medium</td>
     <td></td>
  </tr>
  <tr>
    <td>Almond Milk (unsweetened)</td>
    <td>Low</td>
   <td></td>
  </tr><tr>
    <td>Almonds</td>
    <td>Medium</td>
    <td></td>
  </tr>
   <tr>
    <td>Amaranth Seeds</td>
    <td>Low</td>
    <td></td>
  </tr>
  <tr>
    <td>Apple Cider Vinegar</td>
    <td></td>
    <td>Low</td>
  </tr>
   <tr>
     <td>Apple Juice</td>
     <td></td>
    <td>High</td>
  </tr><tr>
    <td>Apple Pie</td>
    <td></td>
    <td>High</td>
  </tr><tr>
   <td>Apples</td>
   <td></td>
   <td>Medium</td>
 </tr><tr>
    <td>Apricots</td>
    <td></td>
    <td>Medium</td>
 </tr><tr>
     <td>Apricots (Dried)</td>
     <td></td>
     <td>High</td>
 </tr><tr>
     <td>Artichokes</td>
     <td>Medium</td>
     <td></td>
 </tr><tr>
     <td>Asparagus</td>
     <td>High</td>
     <td></td>
 </tr><tr>
    <td>Aspartame</td>
    <td></td>
   <td>High</td>
</tr><tr>
    <td>Avacado Oil</td>
    <td>Low</td>
    <td></td>
  </tr><tr>
    <td>Avocado</td>
    <td>High</td>
    <td></td>
  </tr><tr>
     <td>Bacon</td>
      <td></td>
    <td>High</td>
  </tr><tr>
    <td>Bagles</td>
    <td></td>
    <td>High</td>
  </tr>
  </tbody>
  </table>

食物/饮料
碱化水平
酸性水平
淡啤酒（深色）
高
淡啤酒
高
碱性离子水
高
杏仁奶油
中等
杏仁奶（不含糖）
低
杏树
中等
苋菜籽
低
苹果醋
低
苹果汁
高
苹果派
高
苹果
中等
杏子
中等
杏子（干）
高
洋蓟
中等
芦笋
高
阿斯巴甜
高
牛油果油
低
鳄梨
高
培根
高
贝格斯
高

尝试以下操作：从调用它的事件处理程序将

事件

传递到

sortRows（）

函数

像这样更新函数定义

const sortRows = (order, i, event) => {

heading.addEventListener('click', (event) => {
    // some code here, etc.
    let sorted = sortRows(order, elem.cellIndex, event);

你这样称呼它

const sortRows = (order, i, event) => {

heading.addEventListener('click', (event) => {
    // some code here, etc.
    let sorted = sortRows(order, elem.cellIndex, event);

---

这在Chrome而不是FireFox中起作用，可能是因为Chrome出色地处理了边缘案例。

您已经找到了原因。这很有效，谢谢您的回答。但是为什么呢？这是因为sortRows是在addEventListner（）之前定义的吗？实际上是因为

event

是在

addEventListner（）中定义的。一旦转到另一个函数，由于
作用域
或
函数封装
（即启动新函数时事件变量“超出范围”），以前的每个非全局变量都将变为
未定义的
）。