Javascript 向整个页面添加addEventListener可以吗

我试图在单击输入元素时显示textarea元素。目标是显示textarea，但当我单击其他任何位置时，textarea将消失。如果我单击textarea上的任何位置，它将保持可见

我在stackoverflow上看到了一个类似的示例-->

方法是使用document.documentElement将addEventListener添加到html标记中，因此基本上是整个页面，但我想知道是否有替代方法？在整个页面中添加addEventListener安全吗

将EventListener添加到整个页面的代码：

 document.documentElement.addEventListener('click',clickhandler,false);

我也不想挑剔，但我希望避免在元素上使用超时

---

除了上面的代码，我第一次尝试使用click事件，一切都很好，但是当我单击其他任何地方时，textarea并没有消失

然后我尝试了焦点/模糊事件，但当输入失去焦点时，文本区域消失

我在考虑单击函数的if条件。。。但我不知道如果不在整个页面中添加一个点击事件，该如何工作

JSFiddle：

HTML\

 <input type="text" id="email">
 <textarea id="suggestion"></textarea>

JS

 textarea{
 display:none;  
 }

var textarea = document.getElementById('suggestion');

var input = document.getElementById('email');

// Using the Click Event
input.addEventListener('click',function(){
  var display = textarea.style.display;

  if(display === '' || display === 'none'){
    textarea.style.display='inline-block';
  }else{
    textarea.style.display='none';
  }
});

// Using the Focus and Blur
/*
input.addEventListener('focus',function(){

  textarea.style.display='inline-block';

  input.addEventListener('blur',function(){
  textarea.style.display='none';
  });
});
*/

---

哦，有什么想法吗？

为什么不在文本区域添加一个“模糊”呢？嗯，好主意！在这种情况下它可以工作，但我还有其他元素，比如输入和div。所以当我点击输入时，div会弹出，就像链接中的示例一样。而div没有与之关联的模糊。因此，我想更清楚地说，对于代理侦听器或简单的全局事件（如键盘快捷键），更一般的策略事件侦听器通常绑定到

文档

或

正文。谢谢我将开始使用这种方法，除非有人有其他方法。