第一句子网 - 唯美句子、句子迷、好句子大全
第一句子网 > onblur事件和onfocus事件失效

onblur事件和onfocus事件失效

时间:2019-01-25 23:59:41

相关推荐

onblur事件和onfocus事件失效

先看onblur事件和onfocus事件的定义:

<elementοnblur="SomeJavaScriptCode">

<elementοnfοcus="SomeJavaScriptCode">

双引号中的内容是一段js代码,也可以是一个事件函数

在看几个例子:

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><body><input name="btn" type="text" placeholder="请输入显示欢迎学习js的次数" οnfοcus="study(prompt('请输入显示欢迎学习js的次数'))" ><script>function study(count){for(var i=0;i<count;i++){document.write("<h4>欢迎学习js</h4>")}}</script></body></html>

运行以上代码,鼠标点击输入框(使输入框获得焦点,如下图)

输入数字后,如下图,

对代码进行修改,如下图:

完整代码如下:

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><body><input name="btn" type="text" placeholder="请输入显示欢迎学习js的次数" οnfοcus="study(prompt('请输入显示欢迎学习js的次数'))" ><script>$(document).ready(function study(count){for(var i=0;i<count;i++){document.write("<h4>欢迎学习js</h4>")}})</script></body></html>

再点击输入框,使输入框获得焦点,发现没有反应,如下图

原因在于 ready函数,ready函数创建了一个局部函数作用域,外面是不能调用内部的study函数的。所以 你的onblur事件失效是不是这个原因呢?

解决方案:

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><body><input id="btn" type="text" placeholder="请输入显示欢迎学习js的次数" ><script src="js/jquery-1.12.4.js"></script><script>$(document).ready(function(){//绑定事件$("#btn").focus(study);function study(){document.write("<h4>欢迎学习js</h4>")}})</script></body></html>

利用jQuery绑定事件,当然使用原生js绑定也是一样的

注:jQuery的ready方法就是等待DOM元素加载完便立即执行,原生js接口onload是等待所有html加载完再加载js文件

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。