直接上代码：

<!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. 【KMP】洛谷P2375 [NOI2014]动物园 题解

        一开始的方向应该对了,但是没有想到合理的优化还是没写出来…… 题目描述 近日,园长发现动物园中好吃懒做的动物越来越多了.例如企鹅,只会卖萌向游客要吃的.为了整治动物园的不良风气,让动物们凭自己 ...

  2. bzoj3262 陌上花开 cdq分治（入门）

    题目传送门 思路:cdq分治处理偏序关系的模板题,主要就是学cdq分治吧,还在入门中. 代码其实也很好理解,记得树状数组操作的上限是 z的最大值,不是n的最大值,这个细节wa了好久. #include ...

  3. 关于jstl taglib的错误 Can not find the tag library descriptor for “http://java.sun.com/jstl/core”

    在查了N个帖子之后,决定记录一下关于jstl taglib的配置方法. 首先我遇到的错误是: Can not find the tag library descriptor for "htt ...

  4. hdu1702 ACboy needs your help again!（栈处理）

    ACboy needs your help again! Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ( ...

  5. 微信小程序中如何使用setData修改数组或对象中的某一参数

    本人也是刚开始接触微信小程序,在微信小程序中经常会遇到修改数组中某一项的值,比如array[0]或者是对象中object.item的值.这些值在微信小程序中都需要使用一个名为setData的方法,而这 ...

  6. MySQL Flashback 闪回功能详解

    1. 简介 mysqlbinlog flashback(闪回)用于快速恢复由于误操作丢失的数据.在DBA误操作时,可以把数据库恢复到以前某个时间点(或者说某个binlog的某个pos).比如忘了带wh ...

  7. 委托delegate 泛型委托action<> 返回值泛型委托Func<> 匿名方法 lambda表达式 的理解

    1.使用简单委托 namespace 简单委托 { class Program { //委托方法签名 delegate void MyBookDel(int a); //定义委托 static MyB ...

  8. django（6）model表语句操作、Form操作、序列化操作

    1.model建表操作之创建索引.元数据 # 单表操作,创建表 class User(models.Model): name = models.CharField(max_length=32) ema ...

  9. Js常用的设计模式(1)——单例模式

    <Practical Common Lisp>的作者 Peter Seibel 曾说,如果你需要一种模式,那一定是哪里出了问题.他所说的问题是指因为语言的天生缺陷,不得不去寻求和总结一种通 ...

  10. double类型计算

    下面两个例子体现两个运算规则 一.四舍五入 //四舍五入 double doublenum = Math.Round(12.5, MidpointRounding.AwayFromZero); //两 ...