直接上代码：

<!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. LeetCode记录之26——Remove Duplicates from Sorted Array

    国外的表达思维跟咱们有很大差别,做这道题的时候很明显.简单说本题就是让你把有序数组中的重复项给换成正常有序的.比如 1 2 2 3换成 1 2 3 3,根本不需要考虑重复的怎么办,怎么删除重复项等等. ...

  2. bzoj1087 互不侵犯King 状压dp+bitset

    题目传送门 题目大意:中文题面. 思路:又是格子,n又只有9,所以肯定是状压dp,很明显上面一行的摆放位置会影响下一行,所以先预处理出怎样的二进制摆放法可以放在上下相邻的两行,这里推荐使用bitset ...

  3. POJ - 1948 二维01背包

    T了两发,DP方程很简单粗暴 dp[i][j][k]:用前i物品使得容量分别为j和k的背包恰好装满 背包的调用只需一次即可,第一次T就是每次check都丧心病狂地背包一次 对于sum的枚举,其实i j ...

  4. Advanced Data Structures in competitive programming

    1.bit #define isOn(S, j) (S & (1 << j)) #define setBit(S, j) (S |= (1 << j)) #define ...

  5. dapper源码(.net 4.0)

    http://blog.csdn.net/ahshow/article/details/42773929

  6. python操作Spark常用命令

    1. 获取SparkSession spark = SparkSession.builder.config(conf = SparkConf()).getOrCreate() 2. 获取SparkCo ...

  7. Oracle utl_file_dir参数详解

    1 UTL_FILE_DIR参数定义 UTL_FILE_DIR是Oracle中的一个"静态参数",可以设置一个或多个路径.用于在PL/SQL中进行文件I/O操作(可以用utl_fi ...

  8. Web API 解决跨域问题

    一.跨域问题的由来 同源策略:出于安全考虑,浏览器会限制脚本中发起的跨站请求,浏览器要求JavaScript或Cookie只能访问同域下的内容. 正是由于这个原因,我们不同项目之间的调用就会被浏览器阻 ...

  9. SpringBoot---开发的热部署

    1.模板的热部署 在SpringBoot中,模板引擎的页面默认是开启缓存的: 如果修改了页面的内容,则刷新不到修改后的页面: 可以在application.properties中关闭模板引擎的缓存: ...

  10. oracle 错误实例分析(ORA-01126)

    问题描述 SQL> shutdown immediate ORA-01109: database not open Database dismounted. ORACLE instance sh ...