js事件学习的小demo

直接上代码:

<!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>

原文地址:https://www.cnblogs.com/moonsoft/p/10455028.html

时间: 2024-11-08 18:38:00

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

JS 事件学习笔记(二)

在JS事件学习笔记(一)中学习了事件流.事件处理程序.事件对象以及跨浏览器应该怎么做等知识,现在我们现在来学习浏览器中主要的各种事件. 一. load事件 load事件通常是通过JavaScript代码指定,在window对象上绑定,实际上根据DOM2规定,应该在document上而非window上触发load事件,但是所有浏览器都在window对象上实现了该事件.因此以确保兼容性推荐使用该方法: 另外,在window上发生的事件也可以作为body元素的属性在html代码中添加. load事件的

Vue.js之组件嵌套小demo

Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个组件文件 Header.vue文件: 1 <!--1模板:html结构 --> 2 <template> 3 <header> 4 <h1>{{title}}</h1> 5 </header> 6 </template> 7

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

昨天练习写了这个小demo,个人觉得通过设置定位元素left和top的值,来实现换行的功能,这种方法很巧妙~ 另外,如下代码中的随机颜色的获取,还请各位前辈多多指教:需要改进的地方:或者有没有更好的方法. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text

js操作数组的小Demo

var telStr=$("#TELNUM").val(); var telsPre=telStr.split(","); var tels=telsPre.reverse(); var size = tels.length; for(var i=0; i<size; i++){ if(""!=tels[i]) { var index=0; if(i==0){ d["CUSTOMER_TEL"] =tels[i]; in

关于js事件执行顺序

关于js事件执行顺序小技巧 js事件执行顺序是js中一个老生常谈的一个话题, 聊这个话题之前我们先谈谈怎么给页面元素绑定我们需要的事件 1.给页面元素绑定事件 a)直接在元素上面加上需要绑定的事件,如 <button type="button" onclick="console.log('111')"></button> 结果如下: 此方法不建议使用,有两方面的原因, 1)此方法绑定的方法必须为一个全局的方法,而通常我们需要绑定的方法都是针对

小demo原生js同步翻译,可以玩玩儿

1. 背景: 平时不知道用js写什么练手,这里就写了一个类似百度翻译的小demo.大家可以平时没事儿了看看书,写写像这种类型的小demo,调用以下公开的api即可.对于学生党,能进入学校实验室做项目更好.进不去的,平时写写小demo练练也不差.(我为什么没在实验室) 2. demo前准备工作: 页面布局 了解百度翻译API,所需配置参数 准备 MD5.js 加密算法函数(百度自己搜) 写js代码 3. 步骤: 1. 页面布局: 布局就不说了,直接贴图上代码: 可进行语言切换 html代码: <!

Android学习小Demo(20)关于Fragment的应用

Android在3.0之后引入了Fragment的概念,我猜测其想法可能只是想更好地兼容大屏幕或者平板的开发,因为大屏幕可以展示更多的内容,而内容一多,逻辑有可能就乱,而利用Fragment,则可以将不同的逻辑封装进不同的Fragment中,但是展现呢,还是在同一个Activity中,在同一个屏幕上显示.而对于屏幕并不大的手机来说,如果一个页面展示的东西并不多,那么其实将逻辑直接写在Activity,利用多个Activity实现多个页面的展示,我觉得也是可以接受的,毕竟用Activity还是用F

js入门学习~ 运动应用小例

要实现的效果如下: 鼠标移入各个小方块,实现对应的效果(变宽,变高,移入透明,移出恢复)~~ (且各运动相互之前不干扰)  主要是练习多个物体的运动框架~~ ----------------------------------------------------js代码如下 ----------------------------------------------------- //执行函数window.onload = function(){ //声明控制变量 var aDiv = docu

js html 交互监听事件学习

事件处理程序(handler): HTML事件处理程序: <input type="button" value="Click Here" onclick="showMessage();" /> <script type="text/javascript"> function showMessage() { alert('Clicked!'); } JavaScript指定事件处理程序: <inpu