javascript委托(Delegate)blur和focus用法实例分析

JavaScript 委托(Delegate)blur和focus用法实例分析

在 JavaScript 中，我们常常需要对页面元素添加一些事件，比如 click、mouseover、keyup 等等。但是，如果页面中有很多元素，我们就需要对每个元素都添加事件，这样做会显得很麻烦。所以，JavaScript 委托(Delegate)blur和focus用法应运而生，它可以在页面中只添加一个事件，然后通过事件冒泡的机制来处理所有这个事件的子元素。

委托(Delegate)blur的用法实例：

当我们需要对表格中的 input 输入框进行验证时，通过 Delegate Blur的写法可以减少代码的重复。

HTML代码：

<table>
  <tr>
    <td>用户名：</td>
    <td><input type="text" id="username" /></td>
  </tr>
  <tr>
    <td>密码：</td>
    <td><input type="password" id="password" /></td>
  </tr>
  <tr>
    <td>确认密码：</td>
    <td><input type="password" id="repassword" /></td>
  </tr>
</table>

JavaScript代码：

function validate(e) {
  var target = e.target; // 获取事件触发元素
  var id = target.getAttribute('id'); // 获取元素的 id
  var value = target.value; // 获取元素的值

  switch (id) { // 针对不同的 input 进行不同的验证
    case 'username':
      if (value == '') {
        alert('请输入用户名！');
      }
      break;
    case 'password':
      if (value == '') {
        alert('请输入密码！');
      }
      break;
    case 'repassword':
      var password = document.getElementById('password').value;
      if (value == '') {
        alert('请输入确认密码！');
      } else if (value != password) {
        alert('两次输入的密码不一致！');
      }
      break;
  }
}

var table = document.getElementsByTagName('table')[0];
table.addEventListener('blur', validate, true); // 委托 blur 事件到 table 上

在上述代码中，我们首先定义了一个 validate 函数来验证输入框的值。然后，通过获取事件触发元素、元素的 id 和元素的值，我们就可以针对每个输入框进行不同的验证。最后，我们通过 table 的委托 blur 事件来实现对所有输入框的统一处理。

委托(Delegate)focus的用法实例：

当我们需要让表单 input 输入框中的 placeholder 文字在输入框获得焦点时消失掉，失去焦点时恢复，通过 Delegate Focus的写法可以减少代码的重复。

HTML代码：

<input type="text" placeholder="请输入内容" />

JavaScript代码：

function focusHandler(e) {
  var target = e.target; // 获取事件触发元素
  var placeholder = target.getAttribute('placeholder'); // 获取输入框的 placeholder
  var value = target.value; // 获取输入框的值

  if (value == placeholder) { // 如果输入框的值等于 placeholder
    target.value = ''; // 把输入框的值设置为空
  }
}

function blurHandler(e) {
  var target = e.target; // 获取事件触发元素
  var placeholder = target.getAttribute('placeholder'); // 获取输入框的 placeholder
  var value = target.value; // 获取输入框的值

  if (value == '') { // 如果输入框的值为空
    target.value = placeholder; // 把输入框的值设置为 placeholder
  }
}

var input = document.getElementsByTagName('input')[0];
input.addEventListener('focus', focusHandler, true); // 委托 focus 事件到 input 上
input.addEventListener('blur', blurHandler, true); // 委托 blur 事件到 input 上

在上述代码中，我们首先定义了两个处理函数，一个在 input 输入框获得焦点时触发，另一个在输入框失去焦点时触发。然后，通过获取事件触发元素、输入框的 placeholder 和输入框的值，我们就可以判断输入框的状态，然后对输入框的值进行相应的操作。最后，我们通过 input 的委托 focus 和 blur 事件来实现对所有输入框的统一处理。