一、事件

　　事件：触发-响应机制。

二、事件三要素

　　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 事件（基础）的更多相关文章

  1. JavaScript事件基础-10-2.HTML事件; DOM0级事件; 掌握常用的鼠标与键盘事件 ; 掌握this的指向;

    JavaScript事件基础 学习目标 1.掌握什么是事件 2.掌握HTML事件 3.掌握DOM0级事件 4.掌握常用的鼠标与键盘事件 5.掌握this的指向 什么是事件 事件就是文档或浏览器窗口中发 ...

  2. JavaScript事件基础知识总结【思维导图】

    另外附上来自Nicholas C.Zakas<JavaScript高级程序设计 第3版>中的跨浏览器兼容EventUtil对象. var EventUtil = { //注册事件 addH ...

  3. day47—JavaScript事件基础应用

    转行学开发,代码100天——2018-05-02 1.事件对象 JavaScript中事件对象通常用定义变量ev或event表示.为了兼顾浏览器兼容问题,定义事件对象为 var oEvent = ev ...

  4. javascript 事件基础

    一:事件流 事件流描述的是从页面中接收事件的顺序.  事件冒泡 <div id="one"> <div id="two"> <di ...

  5. 【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）

    前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...

  6. JAVASCRIPT事件详解-------原生事件基础....

    javaScirpt事件详解-原生事件基础(一)   事件 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,通过监听特定事件的发生,你能 ...

  7. JS基础知识：Javascript事件触发列表

    Javascript是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言. JavaScript使我们有能 ...

  8. JavaScript RegExp 基础详谈

    前言: 正则对于一个码农来说是最基础的了,而且在博客园中,发表关于讲解正则表达式的技术文章,更是数不胜数,各有各的优点,但是就是这种很基础的东西,如果我们不去真正仔细研究.学习.掌握,而是抱着需要的时 ...

  9. JavaScript事件详解-Zepto的事件实现（二）【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

  10. 解析Javascript事件冒泡机制

    本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...

随机推荐

  1. Checkout 显示 URL /../../.. 不存在

    Checkout 显示 URL /../../.. 不存在 Checkout 显示 URL /../../.. 不存在 如果库的路径是 svn库的路径为:/usr/local/svn/test/ 启动 ...

  2. Kubernetes安全策略

    Kubernetes CIS Benchmark 见kube-bench 1.安全策略 1.1 使用宿主节点的命名空间 命名空间分 网络命名空间 PID命名空间 IPC命名空间 Pod使用主机的网络命 ...

  3. LeetCode 641. Design Circular Deque

    原题链接在这里:https://leetcode.com/problems/design-circular-deque/ 题目: Design your implementation of the c ...

  4. Debian9 安装软件汇总

    dpkg dpkg -i 安装本地安装包 echo 'pkgname newstat' | dpkg --set-selections 修改软件包安装状态 newstat install,deinst ...

  5. Educational Round 66 题解

    作为橙名来水了一发…… 这次题目就比上次良心多了.7题有5题会做. 然而风格仍然很怪异……还是练少了? A 水题.不过一开始没注意细节挂了几发,罚时罚的真痛…… 明显是能除以 $k$ 就除以 $k$, ...

  6. shell脚本显示字体颜色

    shell脚本中echo显示内容带颜色显示,echo显示带颜色,需要使用参数-e 格式如下: echo -e "\033[字背景颜色:文字颜色m字符串\033[0m" 例如: ec ...

  7. Swagger2.9.2进入API界面报NumberFormatException异常

    [转载请注明]: 原文出处:https://www.cnblogs.com/jstarseven/p/11778377.html     作者:jstarseven    码字挺辛苦的.....   ...

  8. 关于央行数字货币DCEP的几个特点的思考(转)

    近期,央行即将推出数字货币,无论在金融领域还是在资本市场,央行数字货币这一话题都被炒的很火热.央行研发的数字货币叫做DCEP(DC,DigitalCurrency,是数字货币:EP,Electroni ...

  9. 技嘉Z390 AORUS MASTER+酷睿I9超频5.0GHz教程

    注:调整每项值的时候,需要手动用键盘输入数字,按回车确定.(只按回车并不会出现选择项) Core i9-9900K也出来了一段时间了,这个号称“地表最强游戏U”也成了很多人最新的目标.网上也有大佬表示 ...

  10. 记录一次在生成数据库服务器上出现The timeout period elapsed prior to completion of the operation or the server is not responding.和Exception has been thrown by the target of an invocation的解决办法

    记一次查询超时的解决方案The timeout period elapsed...... https://www.cnblogs.com/wyt007/p/9274613.html Exception ...