焦点事件
获取焦点事件onfocus \  失去焦点事件 onblur

使浏览器能够区分用户输入的对象,当一个元素有焦点的时候,那么他就可以接收用户的输入。
我们可以通过一些方式给元素设置焦点
    1.点击
    2.tab
    3.js
    
    不是所有元素都能够接收焦点的.能够响应用户操作的元素才有焦点

焦点事件例子 :

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>无标题文档</title>
 <script>
 window.onload = function() {

     var oText = document.getElementById('text1');

     //onfocus : 当元素获取到焦点的时候触发
     oText.onfocus = function() {

         if ( this.value == '请输入内容' ) {
             this.value = '';
         }

     }

     //onblur : 当元素失去焦点的时候触发
     oText.onblur = function() {

         if ( this.value == '' ) {
             this.value = '请输入内容';
         }

     }

     /*
         obj.focus() 给指定的元素设置焦点
         obj.blur() 取消指定元素的焦点
         obj.select() 选择指定元素里面的文本内容
     */
     oText.focus();

     var oBtn = document.getElementById('btn');

     oBtn.onclick = function() {

         oText.select();

     }

 }
 </script>
 </head>

 <body>
     <input type="text" id="text1" value="请输入内容" />
     <input type="button" value="全选" id="btn" />
 </body>
 </html>

Javascript 事件(一)的更多相关文章

  1. JavaScript事件代理和委托(Delegation)

    JavaScript事件代理 首先介绍一下JavaScript的事件代理.事件代理在JS世界中一个非常有用也很有趣的功能.当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委 ...

  2. JavaScript事件概览

    JavaScript事件 JavaScript是单线程,在同一个时间点,不可能同时运行两个"控制线程". 事件句柄和事件对象 1.注册事件句柄 标准和非标准 var button= ...

  3. 【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)

    前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...

  4. JavaScript 事件

    事件 概念:事件是可以被 JavaScript 侦测到的行为. JavaScript 使我们有能力创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触 ...

  5. JavaScript事件详解-jQuery的事件实现(三)

    正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...

  6. JavaScript事件详解-Zepto的事件实现(二)【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

  7. 总结JavaScript事件机制

    JavaScript事件模型 在各种浏览器中存在三种事件模型: 原始事件模型 , DOM2事件模型 , IE事件模型. 其中原始的事件模型被所有浏览器所支持,而DOM2中所定义的事件模型目前被除了IE ...

  8. 解析Javascript事件冒泡机制

    本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...

  9. JavaScript事件流原理解析

    一.为什么会有这一篇的文章 国庆前几天由于任务比较重,要赶在国庆前把一个进度的任务开发完成,所以也就有点赶,但是却遇到了一个比较奇怪的Bug,导致了任务比预计的延迟了几个小时,对此深表遗憾,所以利用国 ...

  10. Javascript事件机制兼容性解决方案

    本文的解决方案可以用于Javascript native对象和宿主对象(dom元素),通过以下的方式来绑定和触发事件: 或者 var input = document.getElementsByTag ...

随机推荐

  1. Net作业调度(二) -CrystalQuartz远程管理

    Source Code-1.6M 介绍 上篇已经了解Quartz.NET的基本使用方法了.但如果想方便的知道某个作业执行情况,需要暂停,启动等操作行为,这时候就需要个Job管理的界面. 本文介绍Qua ...

  2. 数据库join方式分析

    前言    不管是博客园还是CSDN,看到很多朋友对数据库的理解.认识还是没有突破一个瓶颈 ,而这个瓶颈往往只是一层窗纸,越过了你将看到一个新世界.    04.05年做项目的时候,用SQL Serv ...

  3. windows7 安装 memcached

    下载 memcached 的 windows 稳定 memcached.exe 版本,然后解压到某个目录下面,这里放到了 D:\ApacheServer\memcached 找到 C:\Windows ...

  4. LF CRLF

    在git提交的时候 有时候会提示这个 LF will be replaced by CRLF 这是因为window的结束符是:回车和换行 crlfmac和linux的结束符是 lf, 于是当代码在这两 ...

  5. hadoop错误INFO util.NativeCodeLoader - Unable to load native-hadoop library for your platform... using builtin-java classes where applicable

    报如下错误: 解决方法: 1.增加调试信息 在HADOOP_HOME/etc/hadoop/hadoop-env.sh文件中添加如下信息 2.再执行一次操作,看看报什么错误 上面信息显示,需要2.14 ...

  6. SignTool.exe(签名工具)

    水漂收集 -- SignTool.exe(签名工具) =============C#.Net 篇目录============== 签名工具是一个命令行工具,用于用证书对文件进行数字签名,验证文件和时间 ...

  7. java javaScript实现遮罩层 动态加载

    通过java.JavaScript和css实现点击按钮后出现灰色遮罩层,并显示动态加载的字样,提高用户体验,废话不多说,上代码(写这个博客的原因是网上代码太多新手根本不知道哪里对哪里,这里剔除所有无关 ...

  8. Alamofire源码解读系列(十二)之时间轴(Timeline)

    本篇带来Alamofire中关于Timeline的一些思路 前言 Timeline翻译后的意思是时间轴,可以表示一个事件从开始到结束的时间节点.时间轴的概念能够应用在很多地方,比如说微博的主页就是一个 ...

  9. 定义一个方法get_page(url),url参数是需要获取网页内容的网址,返回网页的内容。提示(可以了解python的urllib模块)

    定义一个方法get_page(url),url参数是需要获取网页内容的网址,返回网页的内容.提示(可以了解python的urllib模块) import urllib.request def get_ ...

  10. js分页效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...