源码-JavaScript&jQuery交互式前端开发-第6章-事件-HTML事件处理程序-CSDN博客

本文链接：https://blog.csdn.net/hpdlzu80100/article/details/52680042

事件类型：UI事件（load, unload, error, resize, scroll）、键盘事件、鼠标事件、焦点事件、变动事件

示例：HTML事件（已过时，不推荐使用）

示例效果：

JS代码：

function checkUsername() {                             // Declare function
  var elMsg = document.getElementById('feedback');     // Get feedback element
  var elUsername = document.getElementById('username');// Get username input
  if (elUsername.value.length < 5) {                   // If username too short
    elMsg.textContent = 'Username must be 5 characters or more'; // Set msg
  } else {                                              // Otherwise
    elMsg.textContent = '';                             // Clear message
  }
}

function checkPwd() {                             // Declare function
  var elMsg = document.getElementById('pwd');     // Get feedback element
  var elUsername = document.getElementById('password');// Get username input
  if (elUsername.value.length < 5) {                   // If username too short
    elMsg.textContent = 'Password must be 5 characters or more'; // Set msg
  } else {                                              // Otherwise
    elMsg.textContent = '';                             // Clear message
  }
}

HTML代码：

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript & jQuery - Chapter 6: Events - Event Attributes</title>
    <link rel="stylesheet" href="css/c06.css" />
  </head>
  <body>
    <div id="page">
      <h1>List King</h1>
      <h2>New Account</h2>
      <form method="post" action="http://www.example.org/register">

        <label for="username">Create a username: </label>
        <input type="text" id="username" οnblur="checkUsername()" />
        <div id="feedback"></div>

        <label for="password">Create a password: </label>
        <input type="password" id="password" οnblur="checkPwd()" />
		<div id="pwd" ></div>
        <input type="submit" value="sign up!" />

      </form>
    </div>
    <script src="js/event-attributes.js"></script>
  </body>
</html>

CSS代码：（参考：源码-JavaScript&jQuery交互式前端开发-第6章-事件-Focus和blur事件，http://blog.csdn.net/hpdlzu80100/article/details/52651002）