文章插图
10.3.2onclick点击事件onclick：鼠标点击某个对象
动态注册 onclick 事件
- 先拿到id=btn01的button对应的dom对象
- 通过dom对象动态绑定onclick事件
- 通过document的getElementById方法来获取对应的dom对象
一般使用window.onload让整个页面加载完毕后再动态注册
例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>onclick 单击事件</title><script type="text/javascript">function sayOK() {alert("你点击了sayOK按钮");}//当页面加载完毕之后，我们再进行动态注册window.onload = function () {//因此想要成功获取button的dom对象，就应该让button加载完毕再获取 。//动态注册 onclick 事件//1.先拿到id=btn01的button对应的dom对象//2.通过dom对象动态绑定onclick事件//3.通过document的getElementById方法来获取对应的dom对象var btn01 = document.getElementById("btn01");btn01.onclick = function () {alert("你点击了sayHi按钮");}}</script></head><body><!--静态注册--><button onclick="sayOK()">sayOK按钮</button><!--动态注册--><button id="btn01">sayHi按钮</button></body></html>
文章插图
文章插图
文章插图
10.3.3onblur失去焦点事件onblur 事件会在对象失去焦点时发生 。
onblur 经常用于Javascript验证代码，一般用于表单输入框 。
例子创建两个输入框，分别使用静态注册和动态注册的方法，将输入框中的小写英文变为大写
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>onblur 失去焦点事件</title><script type="text/javascript">//静态绑定function upperCase() {//1.先得到fname输入框的value值-->得到对应的dom对象//因为静态绑定是通过html标签的事件属性直接赋于事件响应后的代码，// 本身就是默认的页面加载完毕再执行的var fname = document.getElementById("fname");fname.value = https://www.huyubaike.com/biancheng/fname.value.toUpperCase();}//动态绑定//在页面加载完毕之后再进行动态绑定window.onload = function () {//1.得到fname2对应的dom对象var fname2 = document.getElementById("fname2");fname2.onblur = function () {fname2.value = https://www.huyubaike.com/biancheng/fname2.value.toUpperCase();}}静态：输入英文单词
文章插图
文章插图
文章插图
文章插图
10.3.4onchange内容发生改变事件当元素的值发生改变时，会发生 onchange 事件 。
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
