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/ ...
随机推荐
- Python 文件读写操作实例详解
Python提供了必要的函数和方法进行默认情况下的文件基本操作.你可以用file对象做大部分的文件操作 一.python中对文件.文件夹操作时经常用到的os模块和shutil模块常用方法.1.得到当前 ...
- 面向对象高级C（元类补充及单例模式）
元类有关知识点补充 #类的名称空间 类的名称空间不能用类似字典的方法修改,例如School类里面有name属性xxx,那么我用School.__dict__['name'] = 'yyy'就会报错&q ...
- 运算符-day04
算数运算符 +.-.*././/(地板除.取商).%.** 依次为:加.减.乘.除.取整.取余.幂 比较运算符 >.<.==.>=.<=.!= 运算符优先级跟数学一样,可以不用 ...
- jQuery事件绑定与切换
一.事件绑定 1.标准方式 1. jquery标准的绑定方式 * jq对象.事件方法(回调函数): * 注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为. * 表单对象.submit(); ...
- 在Proxmox VE上运行OpenWrt/LEDE虚拟机——导入OW/LEDE固件文件到虚拟机中
PVE的OW/LEDE虚拟机初始化创建完成后,需要将编译好的固件文件上传到PVE主机上,然后转换为更适合KVM使用的磁盘映像格式并导入到OW/LEDE虚拟机中,这样就可以更好地使用基于KVM的OW/L ...
- limits.conf文件修改注意事项,限制文件描述符数和进程数
参考文章: https://blog.csdn.net/fanren224/article/details/79971359 https://www.cnblogs.com/micmouse521/p ...
- json for modern c++(nlohmann json)使用小计
前言 一开始使用jsoncpp,但是jsoncpp已经不更新了,nlohmann还在更新,并且jsoncpp做过一次大的版本升级,导致api不兼容,以前使用过的工程代码不能很好的升级到新的版本,并且j ...
- mysql主从复制报错解决方案
mysql主从复制报错解决方案 我先制造个错误 在slave删除个info3字段 然后在master 在info3插入数据 报错如下<pre> Last_SQL_Errno: 1054 L ...
- Android studio中遇到的问题
首先声明只是Android studio使用中遇到的问题纯属个人学习笔记,有什么不对的可以留言. 将脱壳后的java文件拖入到Android studio android studio 首先提示是ER ...
- [POC]微软3389远程漏洞CVE-2019-0708批量检测工具
0x001 Win下检测 https://github.com/robertdavidgraham/rdpscan C:\Users\K8team\Desktop\rdpscan-master\vs1 ...