JavaScript的事件机制

一、解释和作用

 

解释：当我们的行为动作满足了一定的条件后，会触发某类事务的执行。

作用：主要是结合js的函数来使用。

 

二、基本内容

 

1、单双击事件
      单击：onclick            当鼠标单击的时候会触发
      双击：ondblclick        当鼠标双击的时候会被触发

2、鼠标事件
      onmouseover            当鼠标悬停在某个HTML元素上的时候触发
      onmousemove            当鼠标在某个HTML元素上移动的时候触发
      onmouseout            当鼠标在某个HTML元素上移出的时候触发

3、键盘事件
      onkeyup                当键盘在某个HTML元素上弹起的时候触发
      onkeydown            当键盘在某个HTML元素上下压的时候触发

4、焦点事件
      onfocus                当某个HTML元素获取焦点的时候触发
      onblur                当某个HTML元素失去焦点的时候触发

5、页面加载事件            
      onload                当页面加载成功后触发。

 

三、js中添加事件的第一种方式

 

方式：在HTML上直接使用事件属性进行添加，属性值为所监听执行的函数。

注意：

1、js中的事件只有在当前HTML元素上有效。

2、一个HTML元素可以添加多个不同的事件。

3、一个事件可以监听触发多个函数的执行,但是不同的函数要使用分号间隔

 

四、给合适的HTML标签添加合适的事件

 

onchange----select下拉框--------------->值改变事件
onload------body标签
单双击-------用户会进行点击动作的HTML元素
鼠标事件------用户会进行鼠标移动操作的。
键盘事件------用户会进行键盘操作的HTML元素。

 

五、事件冲突

 

给HTML元素添加多个事件时，注意事件之间的冲突

Example：单击和双击

当事件的触发条件包含相同部分的时候，会产生事件之间的冲突。

 

六、事件的阻断

 

当事件所监听的函数将返回值返回给事件时：
false：会阻断当前事件所在的HTML标签的功能
true:继续执行当前事件所在的HTML标签的功能

 

七、超链接调用js函数

 

<a href="javascript:函数名()">调用js函数</a>