事件绑定(onclick,onfocus,onblur)

学习路线：JavaScript_DOM->事件绑定(onclick,onfocus,onblur)->
事件绑定(onmouseout,onmouseover)
->事件绑定(onsubmit)表单提交
->提交表单与验证表单案例

常用绑定方式

• 方式一：通过 HTML标签中的事件属性进行绑定

在HTML标签中加入，onclick属性，并在后面加上需要的方法。

下面是点击事件绑定的 on() 函数

function on(){console.log("我被点了");
}

完整代码：

运行结果

• 方式二：通过 DOM 元素属性绑定

对于标签中没有绑定onclick的情况

通过getElementById获取id="btn然后，再在获取结果的后面，添加onclick属性，通过onclick绑定函数。

document.getElementById("btn").onclick = function (){console.log("我被点了");
}

代码演示：

>

运行结果

常见事件

除了onclick，还有其他常用的事件。

小案例讲解

onfocus and onblur

• onfocus 获得焦点事件。

  当点击了输入框后，输入框就获得了焦点。然后输入框的背景颜色变成粉色。

• onblur 失去焦点事件。

  当失去输入框的焦点的时候，输入框的背景颜色消失，然后里面文字变成大写。

演示代码

姓名：
当输入字段获得焦点时，会触发一个更改背景颜色的函数

运行结果