直接上代码：

<!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. P3704 [SDOI2017]数字表格 （莫比乌斯反演）

    [题目链接] https://www.luogu.org/problemnew/show/P3704 [题解] https://www.luogu.org/blog/cjyyb/solution-p3 ...

  2. POJ2248 Addition Chains 迭代加深

    不知蓝书的标程在说什么,,,,于是自己想了一下...发现自己的代码短的一批... 限制搜索深度+枚举时从大往小枚举,以更接近n+bool判重,避免重复搜索 #include<cstdio> ...

  3. webpack 4.0 安装出现的小问题 （One CLI for webpack must be installed）

    安装的webpack版本是4.11.0,运行命令npm start 提示:One CLI for webpack must be installed. These are recommended ch ...

  4. DictionaryHelper

    /// <summary> /// DictionaryHelper /// </summary> public static class DictionaryHelper { ...

  5. HDU 2879 数论

    HeHe Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others)Total Submis ...

  6. knime 设置 小数点精度

    kinme 默认小数精度是保留三位小数. 如果0.0003,knime会自动舍弃,读出0.下面步骤教你怎么把小数精度全部显示. File->references->preferred re ...

  7. 使用Verilog描述RTL图

    题目要求 分别用两种方式表达此电路: 1)在一个模块中用两个过程来表达: 2)用顶层文件和例化语句的形式来表达. 给出下面RTL图的verilog描述. 1)纯过程语句描述 2)纯连续赋值语句描述 参 ...

  8. 树莓派开启wlan功能

    烧好系统之后,通过网线连接树莓派到路由器.通过ip登入系统,修改interfaces文件,添加下面内容 sudo nano /etc/network/interfacesauto wlan0allow ...

  9. VMware虚拟机上安装xp操作系统

    前提:安装好虚拟机 资料:windows xp 的虚拟机操作系统 上面这个文件最好保存好一份,防止以后虚拟机用坏了可以重新安装. 1 新建目录D:\virtual machine\vSQL\vm将我们 ...

  10. 关于如何绕开对通用VMware虚拟机检测的一些收集

    1,用记事本打开虚拟系统镜像文件的配置文件,这个文件扩展名为vmx,比如我的虚拟系统名为XP,那这个文件就叫XP.vmx,然后在其末尾添加这么一句,如下红色部分(注意,虚拟机不能在运行状态添加) mo ...