事件:

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. 我编辑的JAVA日历程序

    class calendar { public static void main(String[]args) { int yearIn ; yearIn = Integer.parseInt(args ...

  2. 03——微信小程序官方demo讲解——page部分

    一个page由一个文件夹以及文件夹下四个文件组成. 比如一个页面叫index.则需要在pages目录下新建一个index目录,且包含由index+类型(js\wxml\wxss\json)为名组成的若 ...

  3. 关于linux网络基础记录

    1.linux操作系统是一套非常稳定的操作系统,作用永不止于提供网络服务那么简单.(www.Mail.FTP.DNS.DHCP.NAT.Router) 2.对于一个服务器而言,“搭建容易维护难”:维护 ...

  4. 0CTF题中的神奇宝贝WP

    前言: 今天被尘少拉去做题 然后做到一个脑洞打开的题..... 神奇宝贝!?!? 正文: 一开始来到这=-= 弱密码猜测:admin admin 验证码用calc去算 然后成功进入 第一次去做神奇宝贝 ...

  5. Rhythmk 一步一步学 JAVA (12) Spring-1 之入门

    (一)简单对象Spring  XML配置说明 使用Spring (Spring 3.0) 实现最简单的类映射以及引用,属性赋值: 1.1.新建类UserModel: package com.sprin ...

  6. 「小程序JAVA实战」小程序上传短视频（46）

    转自:https://idig8.com/2018/09/14/xiaochengxujavashizhanxiaochengxushangchuanduanshipin45/ 个人信息:用户上传短视 ...

  7. 一次性show 出所有配置

    cisco的全页打印显示配置信息的命令: #terminal length 0 #show run 华为和H3C的全页打印显示配置信息的命令: ]user-interface vty 0 4 ]scr ...

  8. grideh SelectedRows Bookmark

    VCL grideh 选中多行 TBookmark.Bookmark.GotoBookmark TBookmark bm= DataSet->GetBookmark(); DataSet-> ...

  9. C++builder 递归获取继承基类根类

    TClass ClassRef; ListBox1->Clear(); ClassRef = Sender->ClassType(); while (ClassRef != NULL) { ...

  10. Itext读取PDF模板文件渲染数据后创建新文件

    Maven导入依赖 <properties> <itextpdf.version>5.5.0</itextpdf.version> <itext-asian. ...