JavaScript事件元素失去焦点不工作原因解释

我们现在来看两段js代码,我们一个不能正常工作,一个能正常工作,是什么原因造成的呢?

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>JavaScript事件元素失去焦点浏览器不显示 xinbiancheng.cn</title>
  <style>
  </style>
</head>
<body>
  <input type="text" id="username">
  <script>
    // JavaScript事件元素失去焦点浏览器不显示
    // 事件焦点
    var name = document.getElementById("username");
    name.onblur = function () {
      alert("元素失去焦点!");
    }
  </script>
</html>

上面浏览器不能正常工作,下面的可以正常的在浏览器中工作,代码如下:

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>JavaScript事件元素失去焦点可以正常工作 xinbiancheng.cn</title>
  <style>
  </style>
</head>
<body>
  <input type="text" id="username">
  <script>
    // 下面这种浏览器显示,为何第一种就不显示,有什么区别吗?
    document.getElementById("username").onblur = function () {
      alert("元素失去焦点!");
    };
  </script>
</html>

 我来分析一下,首先通过document.getElementById("username")获取标签元素,然后通过onblur绑定事件,当失去焦点时,

就会触发onblur事件,最后通过alert()弹出消息,两段代码看上去没有什么区别。为什么一个工作,另一个不工作呢?

唯一不同的就是var name,难道真是它出问题了吗?yes,是的,就是它出问题了。

var它有变量提升作用,当我们在<script></script>标签中定义var变量,就是全局变量。

最后变成了window.name,而window全局对象有name这个属性,所以变量名冲突了。我们把var 变成 let 发现可以正常工作了。

let name = document.getElementById("username")

这就是为什么ES6 有了 let 声明变量,是为了防止变量污染。