事件(JavaScript)

事件监听机制:

概念 :

某些组件被执行了某些操作之后触发某些代码

事件: 某些操作. 如: 单机, 双击, 键盘按下, 鼠标移动

事件源: 组件(也就是标签) 如: 按钮, 文本输入框

监听器: 就是时间触发之后执行的代码(就是一个方法)

注册监听: 将时间, 事件源, 监听器结合到一起, 当事件源触发了某个事件之后, 则触发某个监听器代码

• 所以其实事件源是由我们的语言给定的, 语言中有哪些组件, 那么这些组件就是一个个的时间源, 具体的每个事件源可以触发哪些事件也由我们的语言给定的, 对于我们的监听器其实就是一段可执行的代码, 当我们触发具体事件源上的某个事件的时候就触发对应的和这个事件源的该时间绑定的监听器代码

常见的事件:

1. 点击事件:

   ①onclick: 单击事件

   ②ondblclick: 双击事件

2. 焦点事件:

   ①onblur: 失去焦点

   ②onfocus: 获得焦点

3. 加载事件:

   ①onload: 一张页面或者一副图像完成加载

   • onload为加载事件, 我们通常都是设置给html标签, 或者设置给JS中的window对象, 表示整个页面加载完成之后执行相应的操作, 有的时候我们将JS代码写在html前面会出错, 因为JS代码执行的时候HTML标签还没有加载, 我们可以将这种写在前面的JS代码放到HTML的后面, 这种方式肯定是可以的, 但对于学写了onload事件之后我们可以将我们放到HTML前端的JS代码放到一个方法中, 然后通过onload事件绑定这个方法, 然后我们就会是在加载完整个HTML页面之后执行这段代码, 那么也就不会有错了

4. 鼠标事件:

   ①onmousedown: 鼠标按下事件

   • 对于鼠标按下事件中, 我们可以在触发对应的时间监听器方法中加入一个形参evert ,因为这个方法执行的时候其实从方法调用位置会传回来一个event时间对象, 通过这个event时间对象的button属性可以获取出鼠标是哪个键点击触发的事件
     • 如果button属性值为0 就是鼠标左键, 如果button属性值为1 就是鼠标中间滚轮, 如果button属性值为2就是鼠标右键

   ②onmouseup: 鼠标按键被松开

   ③onmouseover: 鼠标移动到某元素上

   ④onmouseout: 鼠标从某元素上移开

5. 键盘事件:

   ①onkeydown: 某个键盘按键被按下

   ②onkeyup: 某个键盘按键被松开

   ③onkeypress: 某个键盘按键被按下并松开

6. 选择和改变:

   ①onchange: 域的内容被改变

   ②onselect: 文本被选中

7. 表单事件
   ①onsubmit: 确认按钮被点击

   ②onreset: 重置按钮被点击

我们在学习JS的时候有很多的事件, 我们可以通过设置HTML标签的onXXX属性来注册事件监听, 那么既然onXXX是一个标签的属性, 那么我们显然就可以通过DOM的方式获取这个标签之后给标签的onXXX属性赋值为一个函数

• 我们以前的时候都是会向onXXX属性中直接传入字符串进而调用一个JS函数
• 而现在我们就可以是在script标签中获得对应的DOM对象之后通过获取到DOM对象之后再对其onXXX属性进行一个赋值 , 这里也可以是函数调用, 或者也可以是直接写一个函数执行(写匿名函数也可以)

注意: 如果我们在写表单验证的时候对于onsubmit属性如果是在标签体中设置, 那么我们就要加return , 如果是在script标签中获取到此form表单对应的DOM元素之后直接在onsubmit后面赋值一个实现了的函数, 这个时候就不需要加return , 因为我们如果是在标签体中写onsubmit值的时候肯定是写一个函数调用, 而在实际执行的时候会将这个函数调用封装到一个方法中, 然后判断封装之后的方法的返回值是否为true或者false, 而如果是获取到DOM元素之后直接在sumbit后面赋值一个函数, 那么这个时候我们并没有调用这个函数, 这个函数就会当做被封装好的函数直接调用执行

• 小结: 也即是不管如何我们都会将onsubmit后面的值封装为一个方法, 然后判断此方法的返回值, 而由于如果我们是获取DOM对象之后直接在onsubmit后面赋值了一个函数, 那么这个时候我们就直接会调用这个函数来判断此函数的返回值, 其实就是因为onsubmit后面已经是方法了, 也就没有必要再封装成一个方法了

单词积累:

blur : 模糊不清的