一、事件

　　事件：触发-响应机制。

二、事件三要素

　　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. Windows server 2003 粘滞键后门+提权

    Windows server 2003中可以建立粘滞键与cmd的连接来绕过已经设置好的安全机制做一些事情,比如新建用户.提权 粘滞键介绍 网上查了一些资料,也没怎么说明白,不如自己试一下,大概意思就是 ...

  2. 玩NOILinux

    添加PPA源 sudo add-apt-repository ppa:... 搜狗输入法 官网安装指南 下载搜狗输入法的安装包 sudo dpkg -i sogou... 安装fcitx(应该已经有了 ...

  3. vue中使用过的全局API

    Vue.directive()---------全局自定义指令 Vue.filter()----------全局过滤器 Vue.$set()----------为响应式对象添加一个响应式属性 Vue. ...

  4. luogu p2622关灯问题II

    luogu p2622关灯问题II 题目描述 现有n盏灯,以及m个按钮.每个按钮可以同时控制这n盏灯--按下了第i个按钮,对于所有的灯都有一个效果.按下i按钮对于第j盏灯,是下面3中效果之一:如果a[ ...

  5. Android Studio 之 ROM【1】， Entity,Dao,Database

    Android Studio 之 ROM, Entity,DAO,DataBase 1.Entity 实体类 package com.example.roombasic; import android ...

  6. 应用JWT进行用户认证及Token的刷新

    本文将通过实际的例子来演示如何在ASP.NET Core中应用JWT进行用户认证以及Token的刷新方案(ASP.NET Core 系列目录) 一.什么是JWT? JWT(json web token ...

  7. 网卡监控脚本--nagios

    #!/usr/bin/python26#filename:check_traffic.py#the python script function  for monitoring network tra ...

  8. concurrent（六）同步辅助器CyclicBarrier & 源码分析

    参考文档:Java多线程系列--“JUC锁”10之 CyclicBarrier原理和示例:https://www.cnblogs.com/skywang12345/p/3533995.html简介Cy ...

  9. MySQL基础概念知多少

    MySQL基础概念相关的名词还是挺多的,比如3大范式.4种隔离界别.ACID.DQL.DML.DDL,还有redo.undo.binlog等,本文就统一整理下MySQL常见的基础概念,方便小伙伴们翻阅 ...

  10. Xilinx FGPA 上板调试 集成逻辑分析工具 Integrated Logic Analyzer(ILA) 简单配置 chipscope

    Xilinx Vivado 提供了上板后的FPGA逻辑分析,信号视图显示等功能. 需要注意,上板后查看信号需要重新综合,并且需要耗费一定的片上布局布线资源. 1. 添加debug信号 可以对模块端口或 ...