正在努力添加模糊事件侦听器

Struggling to add a blur event listener

本文关键字：事件 侦听器 模糊 添加 努力      更新时间：2023-09-26

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

由于搜索框自动猜测用户输入的内容并进行搜索，因此没有点击事件。

在控制台中，当模糊发生时，我想要的textContent是this的。textContent:

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

但是这里返回的值只有在某人实际键入某些内容时才不为空。所以附加一个模糊事件似乎是可行的方法。在另一个论坛的帮助下，我在控制台上走了这么远:

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

在控制台输入这一切后，我没有看到任何值被推到dataLayer，这让我认为模糊事件不工作(与dataLayer相反)。推动功能。)

搜索框所在的页面在这里。

我如何将一个模糊事件附加到一个不聚焦搜索框的人?

您应该将blur侦听器添加到搜索框中，而不是span:

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

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}`));
<input id="id" />

相关文章：