一、事件

　　事件：触发-响应机制。

二、事件三要素

　　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. amp加载速度比标准移动页面快85%

    6月13日,谷歌合作伙伴大会上Oliver Vidinovski先生(Google Global Head of eCommerce - CS/GCS) 释放了一个信息:amp加载速度比标准移动页面快 ...

  2. 修改JDK安装路径的作用

    JDK的默认安装路径是Program Files文件夹,而Program Files的两个英文单词间有空格, 而当JDK的安装路径里包含空格时,在设置CLASSPATH时,可能会引发莫名奇妙的错误, ...

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

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

  4. 每天一道Rust-LeetCode(2019-06-01)

    每天一道Rust-LeetCode(2019-06-01) 坚持每天一道题,刷题学习Rust. 题目描述 给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的, ...

  5. 【java异常】Unable to install breakpoint in

    这个是断点失效,把那个断点双击清理掉就完了. 具体原因,以后再写.

  6. @Data注解简化代码

    1 Lombok背景介绍 官方介绍如下: Project Lombok makes java a spicier language by adding 'handlers' that know how ...

  7. ES6解构赋值常见用法

    解构赋值出现的契机: let obj = { a: 1, b: 2 } // 取值 let a = obj.a let b = obj.b 问题核心: 每次取值既要确定对象属性名,还得重新定义一个变量 ...

  8. java 动态数组

    package testjavapro; import java.util.*; public class testjava { public static void main(String args ...

  9. AQS源码的简单理解

    概念 AQS全称 AbstractQueuedSynchronizer. AQS是一个并发包的基础组件,用来实现各种锁,各种同步组件的.它包含了state变量.加锁线程.等待队列等并发中的核心组件. ...

  10. 2018-2019-2 网络对抗技术 20165318 Exp 8 Web基础

    2018-2019-2 网络对抗技术 20165318 Exp 8 Web基础 原理与实践说明 实践内容概述 基础问题回答 实践过程记录 1.Web前端:HTML 2.Web前端:javascipt ...