D 04_JavaScript中的事件(一)

来源：互联网发布：多路访问网络协议编辑：程序博客网时间：2024/06/05 09:27

JS事件

5.1、JS事件是什么？有什么作用？

通常鼠标或热键的动作我们称之为事件(Event)

事件包括：点击、表单提交、值发生改变、鼠标移入、鼠标移出等等

通过JS事件，我们可以完成页面的指定特效。

5.2、JS事件驱动机制简述

页面上的特效，我们可以理解在JS事件驱动机制下进行。

JS事件驱动机制：

警察抓小偷

l 事件源小偷

l 事件偷东西

l 监听器警察

l 注册/绑定监听器让警察时刻盯着小偷

事件源：专门产生事件的组件。

事件：由事件源所产生的动作或者事情。

监听器：专门处理事件源所产生的事件。

注册/绑定监听器：让监听器时刻监听事件源是否有指定事件产生，如果事件源产生指定事件，则调用监听器处理。

常见的JS事件

点击事件（onclick）

点击事件：由鼠标或热键点击元素组件时触发

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script>function run1(){alert("点的人家好爽啊");}</script></head><body><input type="button" value="点击我" onclick="run1()" /></body></html>

焦点事件（onblur、onfoucs）

5.3.2.1、获取焦点事件(onfocus)

焦点：即整个页面的注意力。

默认一个正常页面最多仅有一个焦点。

例如：文本框中闪烁的小竖线。

通常焦点也能反映出用户目前的关注点，或者正在操作的组件。

获取焦点事件：当元素组件获取焦点时触发

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><input type="text" onfocus="on()" /><script type="text/javascript">function on(){alert("你碰到我了");}</script></body></html>

5.3.2.2、失去焦点事件（onblur）

失去焦点事件：元素组件失去焦点时触发

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><!--        失去焦点事件        一个元素上可以包括多个事件        --><input type="text" onblur="on()" /><script>function on(){alert("继续点人家嘛");}</script></body></html>

5.3.3、域内容改变事件（onchange）

域内容改变事件：元素组件的值发生改变时触发

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><select onchange="fun1()"><option>北京</option><option>武汉</option><option>上海</option><option>广州</option></select><script>function fun1(){alert("值改变了")}</script></body></html>

阅读全文

0 0