Javascript---事件基础

221 阅读2分钟

事件

文档或浏览器窗口发生的一些特定的交互瞬间


HTML事件

直接在HTML元素标签内添加事件,执行脚本

语法:
<tag 事件 = "执行脚本"></tag>

功能:

在HTML元素上绑定事件

说明:

执行脚本可以是一个函数的调用

HTML事件绑定时,直接在标签内添加对应的事件即可

补充: 在事件触发的函数中,this是对该DOM对象的引用

执行脚本为函数

DOM0级事件

先通过DOM将元素取出再对其进行绑定事件

  1. 通过DOM 事件获取脚本元素
  2. (获取HTML元素).事件 = 执行脚本

语法:

ele.事件 = 执行脚本

功能:

在DOM对象上绑定事件

说明:

执行脚本可以是一个匿名函数,也可以是一个函数的调用

小栗子:

不建议使用HTML时间的原因:

多元素绑定相同按钮时,效率变低
不建议在HTML元素中写Javascript代码

调用函数:

注意:在调用过程中函数名之后不加括号。(若添加括号,则无需触发就会调用该函数)

鼠标事件

onload

浏览器执行代码的顺序是从上到下的 ,所以一般情况下,将js脚本放置在body的最后,这样可以保证js语句不会报错

若需要在head中添加js脚本时,可使用window.onload,作用对象为window这个对象,使这部分内容在页面加载时执行

小栗子:

onfocus与onblur

onfocus:获得焦点时触发

onblur:失去焦点时触发

说明:

该事件用于

  • input标签type为tetx,password,textarea

举个栗子:

应用这两个事件,来完成判断文本框输入电话号码的正确性

Js代码:

HTML与CSS

效果:

onchange

域的内容改变时发生,一般作用于select,checkbox或radio

小栗子:

onsubmit

表单中的确认按钮被点击时发生

注意:

onsubmit事件不是加在按钮上,而是表单上!!!

onmousedown

鼠标按钮在元素上按下时触发

onmouseup

在元素上松开鼠标按钮时触发

onmousedown与onmouseup共同构成了onclick

三个合集小栗子:

onresize(作用于window)

当调整浏览器窗口的大小时触发

onscroll(作用于window)

拖动滚动条滚动时触发

两个合集小栗子:

键盘事件

  • onkeydown: 在用户按下一个键盘按键时发生
  • onkeypress:在键盘按键被按下并释放一个键时发生
  • onkeyup:在键盘按键被松开发生
  • kecode:返回onkeypress、onkeydown或onkeyup事件触发的键的值的字符代码,或键的代码

event代表事件的状态,如触发event对象的元素、鼠标的位置及状态

小栗子:

使用键盘事件完成日常使用的评价框的效果