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/ ...
随机推荐
- graalvm native image 试用
graalvm 提供的native 模式,可以加速应用的启动,不同可以让应用不再依赖jvm 运行时环境,但是 也有一些限制 参考 https://github.com/oracle/graal/blo ...
- Ubuntu下Thunderbird设置
安装 apt-get install thunderbird(software) thunderbird-locale-zh-cn(汉化包) 添加最小化插件 附加组件里安装 MinimizeToTra ...
- 关于Exgcd
%%lkx 学习博客 exgcd(扩展欧几里得) 可以用来判断并求解形如\(ax+by=c\)的方程,当且仅当\(gcd(a,b)|c\)时,存在整数解\(x,y\) 也就是说,\(exgcd\)可以 ...
- 第03组 Beta冲刺（2/4）
队名:不等式方程组 组长博客 作业博客 团队项目进度 组员一:张逸杰(组长) 过去两天完成的任务: 文字/口头描述: 制定了初步的项目计划,并开始学习一些推荐.搜索类算法 GitHub签入纪录: 暂无 ...
- Golang（六）time 包的用法整理
1. 常用结构体 Duration:type Duration int64,时间长度,对应单位包括 Nanosecond(纳秒).Microsecond(微妙).Millisecond(毫秒).Sec ...
- Salesforce LWC学习(八) Look Up组件实现
本篇参考https://www.salesforcelwc.in/2019/10/lookup-in-lwc.html,感谢前人种树. 我们做lightning的时候经常会遇到Look up 或者MD ...
- cad.net 获取所有已经安装的cad版本信息
计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Autodesk\Hardcopy var ackey = Registry.LocalMachine.OpenSubKey(@&quo ...
- 【mysql】搜索带\字符
模糊查询 LIKE '%\\\%'
- Linux下常用目录有哪些？分别有什么作用？
/boot:这个目录是用来存放与系统启动相关的文件 /root:root用户的家目录 /bin:存放大部分的二进制的可执行文件,也就是大部分的linux命令. /tmp:这个文件目录一般是公共的,也就 ...
- 【Python + Selenium3】自动化测试之DDT数据驱动并生成测试报告以及用yagmail邮件发送文件
我的文件路径 一.DDT代码: import unittest from time import sleep from selenium import webdriver from ddt impor ...