一、事件

　　事件：触发-响应机制。

二、事件三要素

　　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. JDOJ 1133 分段公司利润

    JDOJ 1133: 分段公司利润 JDOJ传送门 Description 企业发放的奖金根据利润提成.利润低于或等于100000元的,奖金可提10%; 利润高于100000元,低于200000元(1 ...

  2. Docker Hello-World镜像运行测试

    一.命令:docker run hello-world 命令解释:以docker客户端命令的方式运行hello-world镜像 命令运行结果: hadoop@Docker:/opt/docker$ d ...

  3. 【java】字符串截取

    String a = 'abcdef';String a = a.substring(0,1); a = 'a'; substring(int beginIndex, int endIndex) be ...

  4. phoenix SQLNestedException: Cannot create PoolableConnectionFactory

    java通过phoenix的jdbc链接hbase数据库遇到如下情况: 查看日志发现phoenix维护的表system.function 的文件缺失了(在hdfs上),就是有节点掉了. 用命令 $HB ...

  5. java 补充（final、static）

    final 固定的 final  修饰类的时候,只能作为子类继承,不能作为父类. final 定义变量时,必须给成员变量赋值.------  1.直接赋值  2.构造方法. final 修饰成员方法时 ...

  6. OpenResty: 介绍 (摘抄)

    原文链接:https://www.cnblogs.com/duanxz/p/10396160.html Nginx 是俄罗斯人发明的, Lua 是巴西几个教授发明的,中国人章亦春把 LuaJIT VM ...

  7. Ubuntu 16.04安装ANSYS 2019 R1

    参考:<ANSYS15.0 for Linux下载及安装教程> 参考链接: https://wenku.baidu.com/view/92bdf21b312b3169a451a4b5.ht ...

  8. 【技术博客】Django中文件下载的实现

    开发组在开发过程中,都不可避免地遇到了一些困难或问题,但都最终想出办法克服了.我们认为这样的经验是有必要记录下来的,因此就有了[技术博客]. Django中文件下载的实现 1.背景 在VisualPy ...

  9. 关于JavaSE程序的小总结（不分先后顺序 后续继续补充）

    统计字符串中某个字符串出现的次数 package com.jiang.demo01; public class Demo01 { public static void main(String[] ar ...

  10. Qt SDK Issue cstdlib: fatal error: stdlib.h: No such file or directory

    *To reproduce the issue, I've tried the following solutions which did not help:* *1) Globally remove ...