JS-绑定事件3种方法

绑定事件方法

1、btn.οnclick=function(){

      alert(" 我是第一种绑定事件的方法 ");

}

2、addEventListener：可以 绑定多种事件，不会覆盖绑定事件

btn.addEventListener("click",function(){

      alert(" 我是第二种绑定事件的方法 ");

},false)

3、function clickFn(){

      alert(" 我是第三种绑定事件的方法 ");

}

举例：

 

练习 2 ：

在页面中制作一个 8 秒倒计时效果，当点击开始按钮时，开始倒计时，点击停止按钮时，在页面中弹出 “ 倒计时 over”

 

鼠标事件

由鼠标或类似用户动作触发的事件

事件名     描述

onclick      鼠标点击某个对象

ondblclick      鼠标双击某个对象

onmouseover     鼠标被移到某元素之上

onmouseout       鼠标从某元素移开

onmousedown   某个鼠标按键被按下

onmousemove   鼠标被移动  （在borser上也可以用）

onmouseup   某个鼠标按键被松开

表单事件

由 HTML 表单内的动作触发的事件

事件名     描述

onfocus    元素获得焦点  点击后  离开再点击触发

 

onblur        元素失去焦点  点击后 失去

 

onchange      用户改变域的内容  文本框内容被改变了，才会被触发 （select  option框使用较多，和value值没有关系，受下拉列表的选项影响）

 

 

注意：表单重置事件不支持 input 标签，支持 form 标签

键盘事件

onreset     表单重置时触发

onsubmit       表单提交时触发

键盘事件 就是对键盘操作触发的事件

事件名     描述

onkeydown   某个键盘的键被按下

onkeypress    某个键盘的键被按下并释放一个键时发生(还没有完全松开)

onkeyup   某个键盘的键被松开

oninput   用户输入的时候触发  使用较多

提示：键盘事件的事件次序： onkeydown onkeypress onkeyup

在Bom中window最大

 在Dom中document最大

UI 事件

UI （ User Interface ，用户界面）事件

指的是那些不一定与用户操作有关的事件

事件名     描述

都是window下面的

onload      某个页面或图像被完成加载

 

onresize   窗口或框架被调整尺寸

onscroll    当文档被滚动时发生的事件

提示：如果重载页面，也会触发 unload 事件（以及 onload 事件）

练习 1 ：

页面打开时，文本框内默认为 my name is tom ，当光标聚焦到文本框时，默认文本 my name is tom 消失，文本框后面出现 “ 用户名不能为空 ” 的用户名输入需求，且输入的用户名字体颜色为蓝色

 

练习 2 ：

页面打开时，出现九宫格蓝色色块，色块内分别是奖品，当点击开始按钮时，有一个灰色色块开始转动，点击停止按钮时，灰色按钮停在哪里，就表示所中的奖品是什么