跳到主要内容

用户输入事件及状态改变

在前端开发中,经常需要监听用户的输入事件以及元素状态的改变。本文将介绍几种常见的事件及其使用方法。

输入事件​

为了保证浏览器兼容性,通常需要同时监听input和propertychange两个事件:

<body>
  <input type="text" name="" id="content" />
  <script>
    var content = document.getElementById('content');

    // IE9+ 及现代浏览器
    content.oninput = function () {
      console.log(this.value);
    };

    // IE8 及以下版本
    content.onpropertychange = function () {
      console.log(this.value);
    };
  </script>
</body>

oninput事件会在元素的值发生改变时立即触发,而onpropertychange事件则是在元素属性改变时触发。虽然onpropertychange的触发时机不太理想,但为了兼容低版本 IE 浏览器,我们仍需要监听它。

状态改变事件​

当输入框失去焦点且值发生变化时,会触发change事件:

content.onchange = function () {
  console.log(this.value);
};

需要注意的是,change事件只在元素失去焦点时才会触发,而且只有当前后值不一致时才会触发。

获得/失去焦点事件​

在一些场景下,我们可能需要动态设置placeholder的值,这就需要监听输入框的获得和失去焦点事件:

content.onfocus = function () {
  console.log('获得焦点');
};

content.onblur = function () {
  console.log('失去焦点');
};

值得一提的是,由于placeholder属性在不同浏览器中存在兼容性问题,所以使用 JS 来模拟placeholder的效果会更加稳妥。

最佳实践​

建议将事件监听器直接写在input标签中,这样代码更加简洁:

<input
  type="text"
  name=""
  id="content"
  value="请输入关键字"
  onfocus="if(this.value=='请输入关键字'){
    this.value = '';
    this.className = 'input-focus';
  }"
  onblur="if(this.value==''){
    this.value='请输入关键字';
    this.className = 'input-blur'; 
  }"
/>

当获得焦点时,如果输入框的值为默认的"请输入关键字",就清空输入框并修改输入框的样式;当失去焦点时,如果输入框为空,就恢复默认的值和样式。

插件开发两种写法​

在编写 JS 插件时,通常有两种定义插件的写法。第一种是直接在匿名函数中定义:

(function () {
  function Test() {
    // ...
  }
  window.Test = Test;
})();

这种写法的好处是可以避免变量污染全局作用域。

第二种是先定义后赋值:

var Test = (function () {
  function Test() {
    // ...
  }
  return Test;
})();

将插件的定义放在一个立即执行函数中,最后将插件构造函数作为返回值赋给一个全局变量,这样外部就可以通过这个变量来使用插件了。

编辑此页
最后由 sumingcheng 于 更新