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/ ...
随机推荐
- ANSI Common lisp1
lisp(本文专指common lisp)语言简介 lisp程序员能够并且经常编写一些能够写程序的程序,对于程序生成程序的这种特性, 因为lisp是主流语言中唯一一个提供一些方便的抽象来让你完成这个任 ...
- LeetCode 641. Design Circular Deque
原题链接在这里:https://leetcode.com/problems/design-circular-deque/ 题目: Design your implementation of the c ...
- ABP 报错1
报错:.net core 2.2 HTTP Error 502.5 - ANCM Out-Of-Process Startup Failure 解决:安装.net core 2.2就解决了, 本地安装 ...
- gnome3 调整标题栏高度
适用于:gtk 3.20 + 1. 在用户主目录 -/.config/gtk3.0/ 下新建gtk.css文件: 2. 复制如下css值: headerbar.default-decoration { ...
- 详细讲解redis数据结构（内存模型）以及常用命令
Redis数据类型 与Memcached仅支持简单的key-value结构的数据记录不同,Redis支持的数据类型要丰富得多,常用的数据类型主要有五种:String.List.Hash.Set和Sor ...
- Skipping unneeded JARs during scanning can improve startup time and JSP compilation time
Tomcat在启动是提示: INFO [localhost-startStop-1] org.apache.jasper.servlet.TldScanner.scanJars At least on ...
- mongo 复制一个表的数据到另一个表中
club表: { "_id" : ObjectId("592e94fee820cc1813f0b9a2"), "id":1, "n ...
- （转）解决mybatis的mapper.xml查询不出数据，结果一直为null问题
背景:记录mybatis使用过程中遇到的相关问题. 解决mybatis的mapper.xml查询不出数据,结果一直为null问题 解决方案: 1 修改实体类与数据库字段名相同 2 修改sql查询语句, ...
- Python【每日一问】18
问: [基础题]:请解释新式类跟经典类,并说明它们的区别[提高题]:请解释Python垃圾回收机制 答: [基础题]:请解释新式类跟经典类,并说明它们的区别 1.新式类都是继承内置 object 对象 ...
- Python3第三方组件最新版本追踪实现
一.说明 在安全基线中有一项要求就是注意软件版本是否是最新版本,检查是否是最新版本有两方面的工作一是查看当前使用的软件版本二是当前使用软件的最新版本.在之前的“安全基线自动化扫描.生成报告.加固的实现 ...