直接上代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>JavaScript事件</title>

    </head>

    <body>

        <p>示例使用 addEventListener() 方法在同一个按钮中添加多个事件。</p>

        <button id="myBtn">点我</button>

        <p id="demo"></p>

        <script>

        var obj = document.getElementById("myBtn");

        obj.addEventListener("mouseover", myFunction);

        obj.addEventListener("click", mySecondFunction);

        obj.addEventListener("mouseout", myThirdFunction);

        function myFunction() {

            document.getElementById("demo").innerHTML += "Moused over!<br>"

        }

        function mySecondFunction() {

            document.getElementById("demo").innerHTML += "Clicked!<br>"

        }

        function myThirdFunction() {

            document.getElementById("demo").innerHTML += "Moused out!<br>"

        }

        </script>

    </body>

</html>

js事件学习的小demo的更多相关文章

  1. js特效 15个小demo

    js特效和15个小demo 代码如下:images文件夹未上传 1.图片切换: <!DOCTYPE html> <html> <head> <title> ...

  2. js存款计算器原生小demo

    大家好,本人是初入前端的一枚程序猿,深知js底层开发的重要性,这也是我的软肋所在(曾经以为),渐渐的明白了一个道理,饭要一口口吃,路要一步步走,这也是我想告诉给所有刚刚进入IT行业的技术员们,沉下心, ...

  3. Vue.js之组件嵌套小demo

    Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个 ...

  4. 关于js事件执行顺序小技巧

    js事件执行顺序是js中一个老生常谈的一个话题, 聊这个话题之前我们先谈谈怎么给页面元素绑定我们需要的事件 1.给页面元素绑定事件 a)直接在元素上面加上需要绑定的事件,如 <button ty ...

  5. 原生JS写了一个小demo，根据输入的数字生成不同背景颜色的小方块儿~

    昨天练习写了这个小demo,个人觉得通过设置定位元素left和top的值,来实现换行的功能,这种方法很巧妙~ 另外,如下代码中的随机颜色的获取,还请各位前辈多多指教:需要改进的地方:或者有没有更好的方 ...

  6. Vue.js学习TodoMVC小Demo

    实现效果如下: 把玩了添加和删除功能,代码如下: index.html: <!doctype html> <html lang="en"> <head ...

  7. 基于Two.js实现的一个小demo，星球环绕动画效果

    下面是核心js code HTML就不贴了,需要引入two.js文件: var elem = document.getElementById('draw-animation'); var two = ...

  8. 《java语言程序设计》初步学习——各种小Demo

    发现现在的天下几乎都是java的天下啊,虽然我个人对java没什么好感,但是迫于生活压力,还是学一下吧,我关注的应该主要还是web方面,所以应该学的是 java server page(JSP),所以 ...

  9. 利用css3和js实现旋转木马图片小demo

    先看效果图: 上源码 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

随机推荐

  1. Myeclipse经常弹出Subversion Native Library Not Available

  2. Apache Shiro(六)-基于URL配置权限

    数据库 先准备数据库啦. DROP DATABASE IF EXISTS shiro; CREATE DATABASE shiro DEFAULT CHARACTER SET utf8; USE sh ...

  3. [转] 你并不需要Underscore/Lodash

    [From] https://segmentfault.com/a/1190000004460234 Lodash 和 Underscore 是非常优秀的当代JavaScript的工具集合框架,它们被 ...

  4. 关于Ehcache缓存中timeToLiveSeconds和timeToIdleSeconds

    [From] http://blog.csdn.net/vtopqx/article/details/8522333 闲来无事测试了下Ehcache与MemCache比较,在此发现了Ehcache中一 ...

  5. Spark (Python版) 零基础学习笔记（一）—— 快速入门

    由于Scala才刚刚开始学习,还是对python更为熟悉,因此在这记录一下自己的学习过程,主要内容来自于spark的官方帮助文档,这一节的地址为: http://spark.apache.org/do ...

  6. JENKINS安装及新建用户，权限配置

    JENKINS安装及新建用户,权限配置 1. 下载安装 jenkins 官网地址https://jenkins.io/index.html 下载地址https://jenkins.io/downloa ...

  7. PIE SDK地图图层控制

    1. 功能简介 地图图层控制就是图层的相关操作,如地图图层数据的添加.删除.移动和拖拽等功能. 2. 功能实现说明 2.1. 实现思路及原理说明 第一步 图层添加是调用AddLayer方法将图层添加到 ...

  8. c++读取list.txt中每行的字符串以及写入二进制文件

    #include <fstream> #include <fstream> string path = ""; FILE* fp = fopen(path. ...

  9. 网站ico那点事儿

    一. 如何获取某个网站的favicon.ico http://moco.imooc.com/player/report.html 今天看到这个网站上,左侧的小图片挺好看的,想弄下来,检查源码,也没有看 ...

  10. golang中的文件操作

    一.文件的基本介绍 文件是数据源(保存数据的地方)的一种,比如经常使用的word文档,txt文件,excel文件都是文件.文件最主要的作用就是保存数据,它既可以保存一张图片,也可以保持视频,声音等等. ...