直接上代码：

<!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. React组件Components的两种表示方式

    函数式的表示: function Welcome(props) { return <h1>Hello, {props.name}</h1>; } Class式的表示: clas ...

  2. c# 委托访问listbox多线程操作

    c# 委托访问listbox多线程操作 using System;using System.Collections.Generic;using System.ComponentModel;using ...

  3. C# 利用Powershell获取网络相关信息

    利用Get-NetAdapter获取信息 Get-NetAdapter 参考链接:https://docs.microsoft.com/en-us/powershell/module/netadapt ...

  4. centos 7更新yum源与更新系统

    1.备份/etc/yum.repos.d/下的原有文件(假如你想保留原系统的yum源的话),举例 cp /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos ...

  5. jquery 去除字符串左右空格

    /*** 删除左右两端的空格*/String.prototype.trim=function(){return this.replace(/(^\s*)|(\s*$)/g, '');} 调用方式: v ...

  6. How to Setup a Private Proxy Server on EC2 in Under 10 Minutes

    How to Setup a Private Proxy Server on EC2 in Under 10 Minutes I’ve been slacking a bit with regular ...

  7. fiter 编码

    package com.itheima.web.filter; import java.io.IOException; import javax.servlet.Filter; import java ...

  8. 重新分析connection reset by peer, socket write error错误原因

    上次写<connection reset by peer, socket write error问题排查>已经过去大半年,当时把问题"敷衍"过去了. 但是此后每隔一段时 ...

  9. Long 和 Integer

    Integer 32位 其范围为 -2^31 到 2^31-1 之间,所以最大值是 2^31-1 Long 64位

  10. unity接入讯飞教程

    [全流程]<按照这个流程做即可,有不懂得可以看下面的2个><这个是<eclipse>> http://blog.csdn.net/qq_15267341/artic ...