源码-JavaScript&jQuery交互式前端开发-第6章-事件-HTML事件处理程序
2016-09-27 13:51
1086 查看
事件类型:UI事件(load, unload, error, resize, scroll)、键盘事件、鼠标事件、焦点事件、变动事件
示例:HTML事件(已过时,不推荐使用)
示例效果:
JS代码:
HTML代码:
CSS代码:(参考:源码-JavaScript&jQuery交互式前端开发-第6章-事件-Focus和blur事件,http://blog.csdn.net/hpdlzu80100/article/details/52651002)
示例: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" onblur="checkUsername()" /> <div id="feedback"></div> <label for="password">Create a password: </label> <input type="password" id="password" onblur="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)
相关文章推荐
- 源码-JavaScript&jQuery交互式前端开发-第6章-事件-鼠标事件-浮层的显示与关闭
- 源码-JavaScript&jQuery交互式前端开发-第6章-事件-HTML5事件
- 源码-JavaScript&jQuery交互式前端开发-第6章-事件-键盘事件-确定按键值
- 源码-JavaScript&jQuery交互式前端开发-第6章-事件-示例(Example)
- 源码-JavaScript&jQuery交互式前端开发-第6章-事件-变动事件
- 源码-JavaScript&jQuery交互式前端开发-第6章-事件-使用事件委托
- 源码-JavaScript&jQuery交互式前端开发-第6章-事件-鼠标事件-确定光标位置
- 源码-JavaScript&jQuery交互式前端开发-第6章-事件-Focus和blur事件
- 源码-JavaScript&jQuery交互式前端开发-第6章-事件-表单事件
- 源码-JavaScript&jQuery交互式前端开发-第3章-函数、方法与对象-String对象
- 源码-JavaScript&jQuery交互式前端开发-第3章-函数、方法与对象-浏览器对象模型
- 源码-JavaScript&jQuery交互式前端开发-第3章-函数、方法与对象-使用构造函数语法创建对象
- 源码-JavaScript&jQuery交互式前端开发-第7章-JQuery-修改内容
- 源码-JavaScript&jQuery交互式前端开发-第7章-JQuery-基本示例
- 源码-JavaScript&jQuery交互式前端开发-第2章-JavaScript基础指令-章节示例
- 源码-JavaScript&jQuery交互式前端开发-第2章-JavaScript基础指令-在字符串中使用引号
- 源码-JavaScript&jQuery交互式前端开发-第2章-JavaScript基础指令-使用变量来存储字符串
- 源码-JavaScript&jQuery交互式前端开发-第1章-编程基础知识
- 源码-JavaScript&jQuery交互式前端开发-第3章-函数、方法与对象-章节示例
- 源码-JavaScript&jQuery交互式前端开发-第4章-判断和循环