當前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
【学习笔记】JS进阶语法一事件基础
生活随笔
收集整理的這篇文章主要介紹了
【学习笔记】JS进阶语法一事件基础
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
內容整理自《從0到1Javascript快速上手》下半部分-進階語法篇
?示例:鍵盤松開一瞬間觸發的事件
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>鍵盤松開事件</title><script>window.onload = function(){var oTxt = document.getElementById("txt");var oNum = document.getElementById("num"); oTxt.onkeyup = function(){var str = oTxt.value;oNum.innerHTML = str.length;};}</script></head><body>請輸入字符:<input id="txt" type="text" /><div>字符串長度為:<span id="num">0</span></div></body> </html>示例:表單獲取/失去焦點事件
?
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>表單獲取/失去焦點事件</title><style type="text/css">#search{color:#bbbbbb;}</style><script>window.onload = function (){var oSearch = document.getElementById("search");//var oBtn = document.getElementById("btn"); //獲取焦點oSearch.onfocus = function (){if (this.value == "百度一下,你就知道"){this.value = "";}};//失去焦點oSearch.onblur = function (){if (this.value == ""){this.value = "百度一下,你就知道";} };}</script></head><body><input id="search" type="text" value="百度一下,你就知道" /><input id="btn" type="button" value="搜索" /></body> </html>?
?
總結
以上是生活随笔為你收集整理的【学习笔记】JS进阶语法一事件基础的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 【学习笔记】JS进阶语法一DOM进阶
- 下一篇: 【学习笔记】JS进阶语法一事件进阶