努力添加模糊事件侦听器答案

【问题标题】：Struggling to add a blur event listener努力添加模糊事件侦听器
【发布时间】：2014-08-12 18:18:09
【问题描述】：

我在我工作的网站上有一个搜索框，我想跟踪人们正在寻找的搜索词。

由于搜索框会自动猜测某人正在输入的内容并进行搜索，因此没有点击事件。

在控制台中，当模糊发生时我想要的 textContent 是这个的 .textContent：

myVar = document.querySelectorAll('.twitter-typeahead > span')[2]

但是这里返回的值只有在有人实际输入内容时才不是 null。所以附加一个模糊事件似乎是要走的路。在另一个论坛上有人的帮助下，我在控制台中走了这么远：

myVar.addEventListener('blur', function(){dataLayer.push({'event':'bla'})})

在控制台中输入所有内容后，我没有看到任何值被推送到 dataLayer，这让我认为模糊事件不起作用（与 dataLayer.push 函数相反。）

带有相关搜索框的页面是here。

如何将模糊事件附加到未聚焦搜索框的人？

【问题讨论】：

标签： javascript blur onblur google-tag-manager data-layers

【解决方案1】：

您应该将blur 侦听器添加到搜索框，而不是跨度：

searchbox = document.getElementById('searchboxID');
searchbox.addEventListener('blur', function() {
    var input = this.value;
    // Do whatever you want with the input
});

【讨论】：

【解决方案2】：

ES6 提供了更短的可能性：

let el = document.getElementById('id');
el.addEventListener('blur', () => console.log('blurred'));

或者如果您需要该元素：

let el = document.getElementById('id');
el.addEventListener('blur', (event) => console.log(event.target));

片段：

let el = document.getElementById('id');
el.addEventListener('blur', (event) => console.log(`${event.target}: ${event.target.value}`));

&lt;input id="id" /&gt;

【讨论】：