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/ ...
随机推荐
- USACO Chocolate Giving
洛谷 P2984 [USACO10FEB]给巧克力Chocolate Giving 洛谷传送门 JDOJ 2680: USACO 2010 Feb Silver 2.Chocolate Giving ...
- Scrapy笔记02- 完整示例
Scrapy笔记02- 完整示例 这篇文章我们通过一个比较完整的例子来教你使用Scrapy,我选择爬取虎嗅网首页的新闻列表. 这里我们将完成如下几个步骤: 创建一个新的Scrapy工程 定义你所需要要 ...
- 4.通过HttpMethod执行不同的服务方法
package Services import ( "context" "fmt" "github.com/go-kit/kit/endpoint&q ...
- Vue Echarts 饼图设置默认选中一个
Vue Echarts 饼图设置默认选中一个 myChart.setOption(data) // data伟echarts所需要传入的参数,就是配置参数最多的那个玩意 myChart.dispatc ...
- C# Cef winform 脚本的执行 踩过的坑
先从后端代码 如何执行js 代码谈起; 一个简单的需求: 在winform上点击一个按钮,实现登录信息的填入 流程: 就是让C#去运行一段脚本,. 运行的方式有两种, 异步与同步, 因为CEF是一帧一 ...
- HTTP、HTTP2.0、SPDY、HTTPS 你应该知道的一些事
参考: https://www.cnblogs.com/wujiaolong/p/5172e1f7e9924644172b64cb2c41fc58.html
- IDEA-Maven的Dependencies中出现红色波浪线
解决方法:移除相关依赖,再重新添加即可 情况及具体解决方法如下:1.在Maven Project中 Dependencies 出现红色波浪线 2.查询本地仓库:jar包已存在 3.解决方法:3.1.从 ...
- [Gamma]Scrum Meeting#9
github 本次会议项目由PM召开,时间为6月4日晚上10点30分 时长15分钟 任务表格 人员 昨日工作 下一步工作 木鬼 撰写博客,组织例会 撰写博客,组织例会 swoip 前端显示屏幕,翻译坐 ...
- Oracle--存储过程中之循环语句
一般循环语句有两种: 1)使用for循环实现 declare cursor cur is select * from tablename; aw_row tablename%rowtyp ...
- Python【每日一问】26
问: [基础题]:输入一行字符,分别统计出其中英文字母.空格.数字和其它字符的个数 [提高题]:一球从 100 米高度自由落下,每次落地后反跳回原高度的一半:再落下,求它在第 10 次落地时,共经过多 ...