input绑定多个onfocus事件仅第一个生效，求解决方案

嘿，我一眼就看穿问题所在啦——不是第二个函数没被触发，而是你的myFunction2逻辑里有个超容易漏掉的小细节！

先看修正后的完整代码（脚本依然保留在head里）： #

<head>
  <script>
    function myFunction1(x) {
      x.style.background = "lightblue";
    }
    function myFunction2(x) {
      // 关键：把转换后的大写字符串赋值回input的value属性
      x.value = x.value.toUpperCase();
    }
  </script>
</head>
<body>
  Enter your name: <input type="text" onfocus="myFunction1(this);myFunction2(this)">
</body>

为什么原来的代码没效果？ #

• myFunction1是直接修改了元素的样式属性，所以你能立刻看到背景变蓝，很直观；
• 而myFunction2里的x.value.toUpperCase()只是生成了一个新的大写字符串，但你没有把这个结果赋值给x.value，所以input的内容根本不会变化，这就让你误以为函数没执行。不信你可以在myFunction2里加一行console.log('我执行啦！')，打开浏览器控制台就能看到函数其实是正常触发的~

额外给你个小建议： #

如果以后要给元素绑定多个同类型事件，除了在HTML属性里用分号分隔调用，还可以用addEventListener方法，代码会更整洁，也更符合现代前端的写法，比如：

<head>
  <script>
    // 等页面加载完成后再获取元素
    window.onload = function() {
      const inputBox = document.querySelector('input[type="text"]');
      // 绑定第一个focus事件
      inputBox.addEventListener('focus', function() {
        this.style.background = "lightblue";
      });
      // 绑定第二个focus事件
      inputBox.addEventListener('focus', function() {
        this.value = this.value.toUpperCase();
      });
    };
  </script>
</head>
<body>
  Enter your name: <input type="text">
</body>

这种方式把行为逻辑和HTML结构分离开，维护起来也更方便哦。

内容的提问来源于stack exchange，提问作者Brad Anderson