WebAPI(part3)--事件基础

学习笔记，仅供参考，有错必纠

参考自：pink老师教案

文章目录

Web API
- 事件基础
- - 事件三要素
  - 执行事件的步骤
  - 常见的鼠标事件

Web API

事件基础

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。网页中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

事件三要素

事件源(谁)：触发事件的元素；
事件类型(什么事件)：例如 click 点击事件；
事件处理程序(做啥)：事件触发后要执行的代码(函数形式)，事件处理函数；

举个例子：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WebApi</title>
</head><body><button id="btn">安徽财经大学</button><script>// 点击一个按钮，弹出对话框// 1. 事件是有三部分组成  事件源  事件类型  事件处理程序   我们也称为事件三要素//(1) 事件源 事件被触发的对象   谁  按钮var btn = document.getElementById('btn');//(2) 事件类型  如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下//(3) 事件处理程序  通过一个函数赋值的方式 完成btn.onclick = function() {alert('统计与应用数学学院');}</script>
</body></html>

页面：

执行事件的步骤

获取事件源
注册事件(绑定事件)
添加事件处理程序(采取函数赋值的形式)

举个例子：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WebApi</title><style>div {width: 100px;height: 100px;background-color: pink;}</style>
</head><body><div>安徽财经大学</div><script>// 点击div 控制台输出 我被选中了// 1. 获取事件源var div = document.querySelector('div');// 2.绑定事件 注册事件// div.onclick // 3.添加事件处理程序 div.onclick = function() {console.log('我被选中了');}</script>
</body></html>

我点击3次安徽财经大学，则控制台显示3次"我被选中了"：

常见的鼠标事件

WebAPI(part3)--事件基础相关推荐

WebAPI第一天学习总结—— DOM、获取元素、事件基础、操作元素、节点操作
Web API介绍 API的概念 API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访 ...
java 绑定事件_Javascripts事件基础和事件绑定
javascript事件基础和事件绑定一.事件驱动 1.事件 javascript侦测到的用户的操作或是页面的一些行为 2.事件源引发事件的元素(发生在谁身上) 3.事件处理的程序对事件处理的程 ...
使用 jQuery Mobile 与 HTML5 开发 Web App (十) —— jQuery Mobile 默认配置与事件基础
从本文开始,使用 jQuery Mobile 与 HTML5 开发 Web App 系列将会进入第三部分--jQuery Mobile 事件与方法,这其中将会利用之前所讲述的 jQuery Mobi ...
使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础
使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 默认配置与事件基础时间:2012年9月25日分类:JavaScript 标签:HTML5‚ ...
DOM获取元素、事件基础、操作元素、节点操作
什么是DOM? 文档对象模型,是W3C组织推荐的处理可扩展标记语言(HTML 或者XML)的标准编程接口. W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容,结构和样式. DO ...
【QT 5 学习笔记-学习绘图相关+画线图形等+绘图事件+基础学习（1）】
[QT 5 学习笔记-学习绘图相关+画线图形等+绘图事件+基础学习(1)] 1.说明 2.实验环境 3.参照学习链接 4.自己的学习与理解 5.学习与实践代码. (1)建立基础工程. (2)加入绘图事 ...
JavaScript ------ DOM（事件基础）
API (Application Programming Interface 应用程序编程接口) 是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而无需访问源 ...
apis-day2事件基础
day2事件基础文章目录 day2事件基础 1.事件监听 **什么是事件监听?** **事件监听三要素:** 案例:随机点名 2.拓展阅读-事件监听版本事件监听版本 3.事件类型 3.1事件类型 ...
DOM | DOM树 + 获取元素 +事件基础 + 常见的鼠标事件
目录 DOM简介什么是DOM DOM树获取元素如何获取页面元素根据ID获取getElementById() 根据标签名获取getElementsByTagName() 通过 HTML5 新增的 ...

WebAPI(part3)--事件基础

文章目录

Web API

事件基础

事件三要素

执行事件的步骤

常见的鼠标事件

WebAPI(part3)--事件基础相关推荐

最新文章

热门文章