onBlur事件与onfocus事件(js)

onFocus事件就是当光标落在文本框中时发生的事件。

onBlur事件是光标失去焦点时发生的事件。

可以编如下例子

1.html

<HTML> 
<HEAD> 
<TITLE>使用onBlur事件处理程序</TITLE> 
</HEAD> 
<BODY BGCOLOR="lavender"> 
<FORM name="F1"> 
<INPUT TYPE=text NAME=text1 value="1111ONBLUR_green" ONBLUR="(document.bgColor=‘green‘)"> 
<INPUT TYPE=text NAME=text2 value="2222ONBLUR_black" ONBLUR="(document.bgColor=‘black‘)"> 
<INPUT TYPE=text NAME=text2 value="3333ONBLUR_yellow" ONBLUR="(document.bgColor=‘yellow‘)"> 
<br>
<p>
<INPUT TYPE=text NAME=text3 value="4444onfocus_blue" onfocus="(document.bgColor=‘blue‘)"> 
<INPUT TYPE=text NAME=text4 value="5555onfocus_red" onfocus="(document.bgColor=‘red‘)">
<INPUT TYPE=text NAME=text4 value="6666onfocus_orange" onfocus="(document.bgColor=‘orange‘)">
</FORM> 
</BODY> 
</HTML>

还有以下例子

2.html

3 <!-- 文件说明:OnFocus事件 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>OnFocus事件</title>
08 </head>
09 <body>
10 <Form>

11 <input type="text" name="test1" value="test1" onclick=alert("可以关掉!")> 
11 <input type="text" name="test1" value="test1" onblur=alert("可以关掉aaaaaaa!")>

11 <input type="text" name="test1" value="test1" onclick=alert("可以关掉bbbbbbbbb!")> 
12 <input type="text" name="test2" value="一按我就无法关掉了,haha" onFocus=alert("我成为了输入焦点!")>
13 </Form>
14 </body>
15 </html>

时间: 2024-10-02 22:06:23

onBlur事件与onfocus事件(js)的相关文章

onblur事件和onfocus事件失效

先看onblur事件和onfocus事件的定义: <element onblur="SomeJavaScriptCode"> <element onfocus="SomeJavaScriptCode"> 双引号中的内容是一段js代码,也可以是一个事件函数 在看几个例子: <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

JS 之 onfocus事件和onblur事件

在我们平时开发网站中,我们一定会经常遇到onfocus和onblur这两个事件,今天就给大家简单介绍一下这两个事件: onfocus 事件在对象获得焦点时发生. <html> <head> <script type="text/javascript"> function setStyle(x) { document.getElementById(x).style.background="yellow" } </script&

onblur,onfocus事件

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ padding:50px; } .left,.tip{ float:left; } .left{margin-right:10px;} .tip{display:none;font-s

js绑定事件和解绑事件

在js中绑定多个事件用到的是两个方法:attachEvent和addEventListener,但是这两个方法又存在差异性 attachEvent方法  只支持IE678,不兼容其他浏览器 addEventListener方法   兼容火狐谷歌,不兼容IE8及以下 addEventListener方法 div.addEventListener('click',fn); div.addEventListener('click',fn2); function fn(){ console.log("春

JS事件(事件冒泡和事件捕获)

事件流:描述的是在页面中接收事件的顺序 事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档) 事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接收事件 DOM中:用于处理指定和删除事件处理程序的操作addEventListener()和removeEventListener().他们都接收三个参数:要处理的事件名.作为事件处理程序的函数和布尔值(事件处理的时候)[true:事件捕获时;false:事件冒泡时] DOM中的事件对象: type属性 用于获取事件类

js跨浏览器事件对象、事件处理程序

项目中有时候会不用jquery这么好用的框架,需要自己封装一些事件对象和事件处理程序,像封装AJAX那样:这里面考虑最多的还是浏览器的兼容问题,原生js封装如下:var EventUtil={ //节点.事件名.事件处理函数 addHanler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false);//这里一个参数为false意为在事件冒

Js冒泡事件和捕获事件

js中冒泡事件和捕获事件: 冒泡事件:冒泡事件是从里向外,即是从被绑定元素开始一直向外到达页面的所有祖先元素都会被触发,这 一过程被称为事件冒泡.这个事件从原始元素开始一直冒泡到DOM树的最上层 捕获事件:捕获事件是从页面的最上层到被绑定元素都会触发. IE只支持事件冒泡,不支持事件捕获 冒泡事件和捕获事件的方向是相反的. 形式如下图所示: 一般为浏览器中的元素绑定事件有2种方式: 一.直接在页面元素中进行绑定,此方式采用的是冒泡排序,如: <div id="eventExample&qu

JS—触摸事件、手势事件

JS-触摸事件.手势事件 dbclick触屏设备不支持双击事件.双击浏览器窗口,会放大画面.可以通过在head标签内加上这么一行: <meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 可以实现,我们编写的页面不会随着用的手势而放大缩小.关于meta标签,我还没有研究过,罪过啊. mouse在触屏上

js中的事件委托或是事件代理详解

起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.那这是什么意思呢?网上的各位大牛们讲事件委托基本上都用了同一个例子,就是取快递来解释这个现象,我仔细揣摩了一下,这个例子还真是恰当,我就不去想别的例子来解释了