JavaScript 事件（基础）
一、事件
事件：触发-响应机制。
二、事件三要素
1、事件源：触发事件的元素
2、事件名称：发送了什么方式的事件
3、事件处理程序：事件触发后要执行的代码（函数形式）
三、事件的使用方式
1、获取元素
2、给元素注册事件
3、编写事件内容
Demo：
var box = document.getElementById('box');
box.onclick = function() { // 匿名函数
console.log('代码会在box被点击后执行');
};
注意：可以直接在触发事件的时候给事件一个匿名函数，也可以先声明一个函数，然后赋值给事件。
Demo：
var box = document.getElementById('box');
box.onclick = box_click; // 这里函数后面不可以加小括号()，加上小括号就成了调用函数，调用函数是系统来完成的，这里只是给事件赋值
// 声明函数
function btn_click() {
alert('hello javascript');
}
四、事件注册
事件的注册（绑定）：就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。
1、静态注册事件
通过 html 标签的事件属性直接赋于事件响应后的代码， 这种方式我们叫静态注册。
2、动态注册事件
是指先通过 js 代码得到标签的 dom 对象， 然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件响应后的代码， 叫动态注册。
动态注册基本步骤：
① 获取标签对象；
② 标签对象.事件名 = function(){}
Demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onclickFun() {
alert("静态注册 onclick 事件");
} //动态注册 onclick 事件
window.onload = function () {
// 1 获取标签对象
//getElementById 通过 id 属性获取标签对象
var btnObj = document.getElementById("btn01");
// alert( btnObj );
// 2 通过标签对象.事件名 = function(){}
btnObj.onclick = function () {
alert("动态注册的 onclick 事件");
}
}</script>
</head>
<body>
<!--静态注册 onClick 事件-->
<button onclick="onclickFun();">按钮 1</button>
<button id="btn01">按钮 2</button>
</body>
</html
JavaScript 事件（基础）的更多相关文章
- JavaScript事件基础-10-2.HTML事件; DOM0级事件; 掌握常用的鼠标与键盘事件 ; 掌握this的指向;
JavaScript事件基础 学习目标 1.掌握什么是事件 2.掌握HTML事件 3.掌握DOM0级事件 4.掌握常用的鼠标与键盘事件 5.掌握this的指向 什么是事件 事件就是文档或浏览器窗口中发 ...
- JavaScript事件基础知识总结【思维导图】
另外附上来自Nicholas C.Zakas<JavaScript高级程序设计 第3版>中的跨浏览器兼容EventUtil对象. var EventUtil = { //注册事件 addH ...
- day47—JavaScript事件基础应用
转行学开发,代码100天——2018-05-02 1.事件对象 JavaScript中事件对象通常用定义变量ev或event表示.为了兼顾浏览器兼容问题,定义事件对象为 var oEvent = ev ...
- javascript 事件基础
一:事件流 事件流描述的是从页面中接收事件的顺序. 事件冒泡 <div id="one"> <div id="two"> <di ...
- 【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）
前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...
- JAVASCRIPT事件详解-------原生事件基础....
javaScirpt事件详解-原生事件基础(一) 事件 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,通过监听特定事件的发生,你能 ...
- JS基础知识：Javascript事件触发列表
Javascript是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言. JavaScript使我们有能 ...
- JavaScript RegExp 基础详谈
前言: 正则对于一个码农来说是最基础的了,而且在博客园中,发表关于讲解正则表达式的技术文章,更是数不胜数,各有各的优点,但是就是这种很基础的东西,如果我们不去真正仔细研究.学习.掌握,而是抱着需要的时 ...
- JavaScript事件详解-Zepto的事件实现（二）【新增fastclick阅读笔记】
正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...
- 解析Javascript事件冒泡机制
本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...
随机推荐
- JavaScript词法作用域—你不知道的JavaScript上卷读书笔记（一）
前段时间在每天往返的地铁上抽空将 <你不知道的JavaScript(上卷)>读了一遍,这本书很多部分写的很是精妙,对于接触前端时间不太久的人来说,就好像是叩开了JavaScript的另一扇 ...
- Github api【Restful接口规范】
Overview This describes the resources that make up the official GitHub REST API v3. If you have any ...
- Python中字符串匹配函数startswith()函数
1.函数用途含义 Python startswith() 方法用于检查字符串是否是以指定子字符串开头,如果是则返回 True,否则返回 False.如果参数 beg 和 end 指定值,则在指定范围内 ...
- 解决 IDEA 创建 Gradle 项目没有src目录问题
解决 IDEA 创建 Gradle 项目没有src目录问题 前几天遇到一个问题,就是使用IDEA创建gradle项目后,src目录没有自动生成出来,今天就给大家分享一下怎么解决. 1. 目录:创建的 ...
- 安卓设备连接Mac的简单方法
mac设备是苹果出品的桌面系统,以高冷而闻名,不同于我们平常使用的windows系统,mac系统对软件硬件的兼容性很差,将iOS 设备(iPhone.iPad和iPod)连接至Mac是一件很简单的事, ...
- 1-6docker数据共享与持久化
1.在 Docker 内部以及容器之间管理数据,在容器中管理数据主要有两种⽅式: 数据卷(Data Volumes) 挂载主机⽬录 (Bind mounts) 2.数据卷 数据卷 是⼀个可供⼀个或多个 ...
- 基于ZYNQ 的UART中断实验之串口写数据到DDR3中
1.参考 UG585 网络笔记 2.理论知识 参见上一次实验:基于ZYNQ 的UART中断实验 3.实验目的 练习使用UART的中断实验,并将接收到的数据写入到DDR3中. 4.实验过程 建立工程,设 ...
- Python【每日一问】19
问: [基础题]:请解释类方法.静态方法.属性方法[提高题]:有以下几个数字:1.2.3.4.5,能组成多少个互不相同且无重复数字的三位数?都是多少?(代码实现) 答: [基础题]:请解释类方法.静态 ...
- Csp-s2019 划分
本题主要靠结论 12pt 爆搜 时间复杂度\(O(n^n)\) 36pt \(f_{i,j}表示前i个数由状态j转移过来,a_i表示前缀和\) \(So,f_{i,j}=f_{j,k}+(a_i-a_ ...
- [原创]开源跨平台大型网络端口扫描器K8PortScan(支持批量A段/B段/C段/IP列表)
0x000 K8PortScan Python版Cscan端口扫描器 Code: https://github.com/k8gege/K8PortScan K8portScan 1.0 Date: 2 ...