JS中onfocus()事件，onblur()事件，onload()事件

1. onfocus 事件在对象获得焦点时发生。

实例：

<html>
<head>
<script type="text/javascript">
    function setStyle(x){document.getElementById(x).style.background="yellow"}
</script>
</head>
<body>First name: <input type="text" onfocus="setStyle(this.id)" id="fname" /><br />Last name: <input type="text" onfocus="setStyle(this.id)" id="lname" />
</body>
</html>

结果：当用鼠标点击input窗口的时候 input背景颜色为黄色

2. onblur 事件会在对象失去焦点时发生;

实例：

<html>
<head>
<script type="text/javascript">
    function upperCase(){
        var x=document.getElementById("fname").valuedocument.getElementById("fname").value=x.toUpperCase()    //toUpperCase() 方法用于把字符串转换为大写    } </script></head>

<body>     输入您的姓名： <input type="text" id="fname" onblur="upperCase()"/> </body></html>

结果：在input窗口中输入小写的英文 当input失去焦点的时候 将刚输入的input的value内容转成大写

3.onload 事件会在页面或图像加载完成后立即发生。

window.onload 回调函数其实是在页面加载完成后（包括图片内容的显示）才会执行，并不是页面加载的等待过程中就执行。

例：

<html>
<head>
<script type="text/javascript">
function load()
{
window.status="Page is loaded"
}
</script>
</head><body onload="load()">
</body></html>

onload，加载图片，加载整个body中的内容，所以加在body上

JS中onfocus()事件，onblur()事件，onload()事件相关推荐

原生js中如果有多个onload事件解决方案
原生js中如果有多个onload事件解决方案参考文章: (1)原生js中如果有多个onload事件解决方案 (2)https://www.cnblogs.com/happy-8090/p/11830 ...
函数载入的html触发onload,JS IFRAME动态加载触发onload事件解析
这篇文章主要为大家详细介绍了JS IFRAME动态加载触发onload事件解析,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编罗X来看看吧. JS代码如下: /* ...
六十二、Js中的冒泡和捕获点击事件和Vue组件绑定原生事件
2020/10/18 . 周日.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/18 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是 ...
js中对a标签增加click事件，事件不生效的解决方案
首先<a>这是a标签</a> 错误的写法:$('a').click(); 正确的写法$('a').html().click(); 或者 a标签里套个 p标签.<a> ...
html中onfocus和onblur的使用
onfocus():鼠标点在onfocus所在的标签上面时 onblur():鼠标点在除onfocus所在标签的其他地方 form表单的的提交方式: 使用超链接提交: 先获取form标签,使用form ...
事件介绍、两种事件注册的介绍、onload事件、onclick事件、onblur事件、onchange事件、onsubmit事件
事件介绍事件就是电脑输入设备与页面进行交互的响应,被称之为事件常用的事件: onload 加载完成事件:页面加载完成之后,常用于做页面js代码初始化操作 onclick ...
JavaScript中onload事件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
全面解析jQuery $(document).ready()和JavaScript onload事件
这篇文章主要介绍了全面解析jQuery $(document).ready()和JavaScript onload事件的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下对元素的操作和事件的绑 ...
Vue.js 之组件-监听子组件事件
1.监听子组件事件前面介绍了父组件如何通过 prop 向子组件传递数据,反过来,子组件如何向父组件通信呢? 在 Vue.js 中,这是通过自定义事件来实现的,子组件使用 $emit() 方法触发事件 ...

JS中onfocus()事件，onblur()事件，onload()事件

JS中onfocus()事件，onblur()事件，onload()事件相关推荐

最新文章

热门文章