记录一个 input change 和 blur 事件同时注册的问题

最新推荐文章于 2024-01-16 11:58:16 发布

tedpenk

最新推荐文章于 2024-01-16 11:58:16 发布

阅读量1.4k

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/tedpenk/article/details/38257505

版权

JavaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

探讨了JavaScript中input元素同时注册change和blur事件时的执行顺序问题，指出无法阻止change事件先于blur事件触发，除非在change事件处理函数中使用alert。

摘要由CSDN通过智能技术生成

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试 input 的 change 事件和 blur 事件</title>
</head>
<body>
  <input id="input"></input>
  <script type="text/javascript">
      var input = document.getElementById("input");

      var blurEvent = function(e) {
console.log(1111111);
      };

      var changeEvent = function(e) {
console.log(2222222);
          var ent = e || window.event;//IE8及之前的event只能通过window.event来获得(针对对象属性注册方式)
          if (ent.preventDefault) {
console.log(ent.preventDefault);
             ent.preventDefault(); //非标准技术
          }
          if (ent.returnValue) {
console.log(ent.returnValue);
             ent.returnValue = false; //IE
          }
          if (ent.stopPropagation) {
console.log(ent.stopPropagation);
             ent.stopPropagation();
          }
          if (ent.stopImmediatePropagation) {
console.log(ent.stopImmediatePropagation);
             ent.stopImmediatePropagation();
          }
          if (ent.cancelBubble) {
console.log(ent.cancelBubble);
             e.cancelBubble = true;
          }
          return false;
      };

      input.addEventListener("blur", blurEvent, false);
      input.addEventListener("change", changeEvent, false);
  </script>
</body>
</html>

结论：无论怎样都不能阻止先调用 change 后调用 blur......除非在 change 函数中使用 alert().......留待以后验证......