一、事件

　　事件：触发-响应机制。

二、事件三要素

　　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. socket套接字及粘包问题

    socket套接字 1.什么是socket socket是一个模块,又称套接字,用来封装互联网协议(应用层以下的层) 2.为什么要有socket 实现应用层以下的层的工作,提高开发效率 3.怎么使用s ...

  2. python基础之一：input、if、while

  3. centos7+docker 安装和部署crawlab分布式爬虫平台,并使用docker-compose管理docker

    1.先决条件centos7+docker最新版本 sudo yum updat 2.配置一下镜像源,创建/etc/docker/daemon.conf文件,在其中输入如下内容 { "regi ...

  4. selenium--单选框和复选框的操作

    单选框操作 from selenium import webdriver import unittest class Test_radio(unittest.TestCase): def test_S ...

  5. SDSC 2018 day2解题报告

    目录 10.12考试总结 T1 最近公共祖先 错误原因 T2 即时战略 T3 欧皇 10.12考试总结 T1 最近公共祖先 预估得分: 100 实际得分: 20 最大得分: 100 用时:1小时10分 ...

  6. 每日一问：谈谈对 MeasureSpec 的理解

    作为一名 Android 开发,正常情况下对 View 的绘制机制基本还是耳熟能详的,尤其对于经常需要自定义 View 实现一些特殊效果的同学. 网上也出现了大量的 Blog 讲 View 的 onM ...

  7. BeanPostProcessor

    BeanPostProcessor简介 BeanPostProcessor是Spring IOC容器给我们提供的一个扩展接口.接口声明如下: public interface BeanPostProc ...

  8. c语言之连接符

    c语言之连接符 1.连接符 连接符的概念是结合define预编译指令的使用技巧,用户可以向define中传入字符串来调用不同功能的函数. 2.代码例子 #include <stdio.h> ...

  9. Orm 入门总指南

    注意:下面的pdf文件强烈建议下载或在线查看 1)旗舰版帮助文档点击查看或下载 2)http://pan.baidu.com/s/1hq7krFu(新手手册下载)(强烈推荐) 3)性能及规范下载,网友 ...

  10. 【神经网络与深度学习】DCGAN及其TensorFlow源码

    上一节我们提到G和D由多层感知机定义.深度学习中对图像处理应用最好的模型是CNN,那么如何把CNN与GAN结合?DCGAN是这方面最好的尝试之一.源码:https://github.com/Newmu ...