如需在用户点击某个元素时执行代码，请向一个HTML事件属性添加JavaScript代码  OnClick=JavaScriptcript

对事件做出反应

HTML事件属性

使用HTML DOM来分配事件

Onload/Onunload事件

Onchange事件

Onmouseover/Onmouseout事件

<body onload="checkCookies()">

    <p onclick="this.innerHTML='谢谢'">对事件做出反应</p>

    <p id="d1" onclick="changetext()">HTML事件属性</p>

    <p id="d2">使用HTML DOM来分配事件</p>

    请输入英文字符：<input type="text" id="fname" onchange="myfunction()" />

    <p>当你离开输入字段时，会触发将输入文本转换为大写的函数。</p>

    <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:

    green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

    <div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:

    blue;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>

    <script>

        function changetext()

        {

            document.getElementById("d1").innerHTML = Date();

        }

        document.getElementById("d2").onclick = function () { displaytext(this) };

        function displaytext(obj)

        {

            obj.innerHTML = "成功";

        }

        //onload 和 onunload 事件会在用户进入或离开页面时被触发。

        function checkCookies()

        {

            if(navigator.cookieEnabled==true)

            {

                alert("已启用 cookie");

            }

            else

            {

                alert("未启用cookie");

            }

        }

        //onchange事件常结合对输入字段的验证来使用

        function myfunction()

        {

            var x = document.getElementById("fname");

            x.value = x.value.toUpperCase();

        }

        //onmouseover和onmouseout事件可用于在用户的鼠标移至HTML元素的上方或移出元素时触发函数

        function mOver(obj)

        {

            obj.innerHTML = "谢谢";

        }

        function mOut(obj)

        {

            obj.innerHTML = "把鼠标移到上面";

        }

        //onmousedown、onmouseup和onclick

        function mDown(obj)

        {

            obj.style.backgroundColor = "#1ec5e5";

            obj.innerHTML = "请释放鼠标按钮";

        }

        function mUp(obj)

        {

            obj.style.backgroundColor = "blue";

            obj.innerHTML = "请按下鼠标按钮";

        }

    </script>

</body>

JavaScript_HTML DEMO_2_事件的更多相关文章

  1. JNI详解---从不懂到理解

    转载:https://blog.csdn.net/hui12581/article/details/44832651 Chap1:JNI完全手册... 3 Chap2:JNI-百度百科... 11 C ...

  2. Jquery的点击事件，三句代码完成全选事件

    先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  3. 关于 Chrome 浏览器中 onresize 事件的 Bug

    我在写插件时用到了 onresize 事件,在反复地测试后发现该事件在 Chrome 及 Opera(内核基本与 Chrome 相同,以下统称 Chrome)浏览器打开时就会执行,这种情况也许不能算作 ...

  4. MVVM设计模式和WPF中的实现（四）事件绑定

    MVVM设计模式和在WPF中的实现(四) 事件绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...

  5. C++中的事件分发

    本文意在展现一个C++实现的通用事件分发系统,能够灵活的处理各种事件.对于事件处理函数的注册,希望既能注册到普通函数,注册到事件处理类,也能注册到任意类的成员函数.这样在游戏客户端的逻辑处理中,可以非 ...

  6. 移动端IOS点击事件失效解决方案

    解决方案 解决办法有 4 种可供选择: 1 将 click 事件直接绑定到目标元素(即 .target)上 2 将目标元素换成 <a> 或者 button 等可点击的元素 3 将 clic ...

  7. Android笔记——Button点击事件几种写法

    Button点击事件:大概可以分为以下几种: 匿名内部类 定义内部类,实现OnClickListener接口 定义的构造方法 用Activity实现OnClickListener接口 指定Button ...

  8. HTML 事件(一) 事件的介绍

    本篇主要介绍HTML中的事件知识:事件相关术语.DOM事件规范.事件对象. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三 ...

  9. HTML 事件(二) 事件的注册与注销

    本篇主要介绍HTML元素事件的注册.注销的方式. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流.事件委托 4. ...

随机推荐

  1. HN669打包工具--游戏对接

    一. 将游戏工程拖入到工具的HN669Ploy目录下,如下图: 二. xCode打开游戏工程,将Core目录下的HN669SDKCore工程添加入游戏工程,并引用库,如图:   三.调用API 1.A ...

  2. Sharepoint2013商务智能学习笔记之Excel Service展示Sql Server数据Demo(五)

    第一步,打开Excel新建空白工作簿 第二步,使用Excel连接sql 数据库 第三步,画图 第四步 添加筛选器 最后效果如下: 第五步,将Excel上传到sharepoint任意文档库,并直接点击 ...

  3. MySQL的CURRENT_DATE()，NOW()，DATE_FORMAT()函数的应用，类型转换及操作汇总

    内容简介 datetime类型和timestamp类型的取值范围,CURRENT_DATE()函数应用,NOW()函数应用,DATE_FROMAT()函数取星期,日期.字符串.时间戳相互转换等. 时间 ...

  4. spark sql 导出数据

    如果用户希望在spark sql 中,执行某个sql 后,将其结果集保存到本地,并且指定csv 或者 json 格式,在 beeline 中,实现起来很麻烦.通常的做法是将其create table ...

  5. C#线程入门(一)

    入门 概述与概念 创建和开始使用多线程 线程同步基础 同步要领 锁和线程安全 Interrupt 和 Abort 线程状态 等待句柄 同步环境 使用多线程 单元模式和Windows Forms Bac ...

  6. Microsoft JDBC Driver 使用 getParameterMetaData 会报错？

    不知道为何使用 Microsoft JDBC Driver for SQL Server 驱动时,sql语句不带参数没有问题,但是如果带参数且使用 getParameterMetaData 就会提示某 ...

  7. JS——操作元素属性

    属性的操作包括:读和写 方法: 1)”.“操作 2)”[ ]“操作 eg: var oDiv = document.getElementById('div1'); var attr = 'color' ...

  8. lecture-9-hashmap

    1.hashmap基本操作 2.hash function,equals函数,hashCode 3.练习题 1)Two Sum Given an array of integers, return i ...

  9. SpringBoot | 第十章：Swagger2的集成和使用

    前言 前一章节介绍了mybatisPlus的集成和简单使用,本章节开始接着上一章节的用户表,进行Swagger2的集成.现在都奉行前后端分离开发和微服务大行其道,分微服务及前后端分离后,前后端开发的沟 ...

  10. rabbitmq的总结

    rabbitmq的术语 组件 Server(broker):接收客户端连接,实现AMQP消息队列的路由功能的进程.简单来说就是消息队列服务器实体. Vhost:虚拟主机,一个broker里可以开设多个 ...