事件:

1 在js中可以说一整套事件能完成一个功能； 事件的定义：当什么时候执行什么事；

使用事件的基本结构：事件源+事件类型=执行的指令

2 事件三要素:事件源 事件类型, 驱动程序(匿名函数).

举例:我拿喇叭 说话 喇叭录音.

3 常见的事件有:

4 代码实例

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        div {

            width: 100px;

            height: 100px;

            background-color: pink;

            cursor: pointer;

        }

        .aaa {

            background-color: red;

        }

    </style>

</head>

<body>

    <div id="box" onclick="fn()"></div>

<script>

    //1.获取事件源

    var div = document.getElementById("box");

    //2.绑定事件 （事件源.事件 = function(){ 事件驱动程序 }）

    //1.匿名绑定

    div.onclick = function () {

        //3.书写事件驱动程序。

        //可以操作标签的属性和样式。

        div.className = "aaa";

    }

javascript总结30 :DOM事件的更多相关文章

  1. 二、JavaScript语言--事件处理--DOM事件探秘

    第一章 事件流 事件:是文档或浏览器窗口中发生的.特定的交互瞬间.JavaScript和HTML之间的交互都是通过事件来实现的. 事件流:描述的是从页面中接受事件的顺序 IE:事件冒泡流 Netsca ...

  2. 二、JavaScript语言--事件处理--DOM事件探秘--下拉菜单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. JavaScript HTML DOM 事件

    JavaScript HTML DOM 事件 HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应. 实例 Mouse Over Me 对事件做出反应 我们可以在事件发生时执行 ...

  4. javascript中0级DOM和2级DOM事件模型浅析

    Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...

  5. javascript系列之DOM(三)---事件

    原文:javascript系列之DOM(三)---事件 事件是javascript跳动的心脏,是DOM所有成分结合的万金油.当我们在WEB 上进行某些交互时,事件也就发生了.点击某些内容,鼠标经过特定 ...

  6. 走进javascript——DOM事件

    DOM事件模型 在0级DOM事件模型中,它只是简单的执行你为它绑定的事件,比如你为某个元素添加了一个onclick事件,当事件触发时,它只是去调用我们绑定的那个方法,不再做其他的操作. 在2级DOM事 ...

  7. JavaScript DOM事件模型

    早期由于浏览器厂商对于浏览器市场的争夺,各家浏览器厂商对同一功能的JavaScript的实现都不进相同,本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类. 1.DOM事件模型.DO ...

  8. JavaScript Dom 事件

    JavaScript  Dom 事件 对于事件需要注意的要点: // this标签当前正在操作的标签. this // event封装了当前事件的内容. even 常用事件 // 鼠标单击.触发事件 ...

  9. 【总结整理】JavaScript的DOM事件学习（慕课网）

    事件:在文档或者浏览器窗口中发生的一些,特定的交互瞬间 HTML和JavaScript的交互通过事件 来实现 比如:1.滚动条向下滑动,加载图片 2.图片轮播,鼠标由2-5页调换 本章内容1.理解事件 ...

随机推荐

  1. 一次hadoop集群机器加内存的运维过程

    由于前期的集群规划问题,导致当前Hadoop集群中的硬件并没有完全利用起来.当前机器的内存CPU比例为2G:1core,但一般的MapReduce任务(数据量处理比较大,逻辑较复杂)的MR两端都需要将 ...

  2. PyQt 5的基本功能

    PyQt5常用的模块 PyQt5的类别分为几个模块,包括: QtCore:包含非核心的GUI功能,此模块用于处理时间.文件和目录.各种数据类型.流.URL.MIME类型.线程或进程 QtGui:包括窗 ...

  3. mac下mysql5.7.18修改root密码

    参考:http://blog.csdn.net/lijilong_/article/details/70991809 第一步:苹果->系统偏好设置->最下面点MySQL,关闭mysql服务 ...

  4. CentOS7.6安装JDK(Openjdk)

    安装开始: 第一步: 使用yum源安装 OpenJDK,yum install -y java-1.8.0-openjdk 第二步: 查看安装版本,java -version 运行时发现错误汇总: 错 ...

  5. 16_Java正则和日期对象

    01正则表达式的概念和作用 * A: 正则表达式的概念和作用 * a: 正则表达式的概述 * 正则表达式也是一个字符串,用来定义匹配规则,在Pattern类中有简单的规则定义. 可以结合字符串类的方法 ...

  6. new及placememt new 异同点

    new与定位new 区别如下: 简单概括: new 分配的内存地址空间来自于heap堆,用完需使用delete 释放内存 定位new 使用的不是heap堆内存,因此不需要使用delete 释放 定位n ...

  7. [Z]CiteSeer统计的计算机领域的期刊和会议的影响因子

    稍微有点早,04年的,但很全 http://emuch.net/html/200510/128286.html 另附一个不明来路的排名:http://www.wi2.uni-erlangen.de/_ ...

  8. 一个不明觉厉的貌似包含很多linux资料索引的网页

    http://man.lupaworld.com/content/other/Linux/linuxmanage/node108.html 貌似是个官方的doc之类的...

  9. Sping实战之通过JAVA代码装配Bean

    尽管在很多场景下通过组件扫描和自动装配实现Spring的自动化配置是更为推荐的方式,但有时候自动化配置的方案行不通,因此需要明确配置Spring.比如说,你想要将第三方库中的组件装配到你的应用中,在这 ...

  10. 解决办法 Field userService in com.sxsj.controller.RegistLoginController required a bean of type

    转自:https://blog.csdn.net/awmw74520/article/details/82687288 APPLICATION FAILED TO START Error starti ...