Javascript 事件侦听器/.getElementById与浏览器一起出现问题

我今天开始使用Brave，注意到我的一些web应用程序/网站不起作用。具体来说，有些按钮没有得到处理。所以，为了排除故障，我添加了一个带有窗口单击处理程序的IIFE来记录this.id。Brave控制台显示

未定义

，但是html按钮元素显然定义了id属性？我是错过了什么，还是勇敢还没有完全成熟

（函数（）{
console.log（'iLife Fired'）；
window.addEventListener（“单击”，clickHandler）；
函数clickHandler（）{
console.log（this.id）；
}
}());

拯救
这完全是意料之中的事。在事件侦听器中，
此
是当前事件目标。也就是说，它是添加了事件侦听器的节点。在本例中，它是
窗口
。而且它没有
id


window.addEventListener（“单击”，函数（）{
console.log（this==窗口）；//true
});
保存
您已将事件侦听器分配给窗口。我想，当它被分配到按钮时，它的id将是log。这是你的html

<button class="mdl-button mdl-js-button mdl-js-ripple-effect" id="credential-save">
Save
</button>

是的，我看到这个测试跨浏览器返回相同的结果？。。。那么，将事件侦听器附加到整个页面，然后根据
this.id
进行处理的最佳方法是什么呢？我以前做过，但找不到要复制/粘贴的旧代码。对。我就是这样得到的。但是，我认为我的侦听器失败的原因是由于页面加载时
div上的CSS
display:none
，也就是说，我希望在查看
div
时不必附加侦听器。因此，整个窗口处理程序。有点像jQuery的。我解决了我的问题。这与勇敢的浏览器无关。我复制/粘贴了一个测试仪
div
，忘了更改几个按钮的
id
属性。这实际上破坏了我的事件侦听器的正确按钮。所以，…我的错。
(function() {
  console.log('IIFE Fired.');
  var button = document.querySelector('button');
  button.addEventListener("click", clickHandler);

  function clickHandler() {
    console.log(this.id);
  }
}());