如需在用户点击某个元素时执行代码，请向一个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. 经典DP 嵌套矩形 （南洋理工ACM—16）

    本来是个很水的DP,结果被自己的代码习惯给打败了 代码: #include<iostream> #include<stdlib.h> #include<string.h& ...

  2. Dijkstra 路径规划 C#

    示例无向图如下:(起始点为v0) 邻接矩阵为: 注意:其中没有连接的边和自己到自己的点权值用10000表示. 代码: static void Main(string[] args) { , , , , ...

  3. 微信小程地图片未加载成功的情况 Failed to load local image resource

    在开发小程序的时候,发现在加载图片时并没有异常,但是后台却报错了. 例如以下我的一段代码: <view class="useage2 "> <image src= ...

  4. java线程基础知识----SecurityManager类详解

    在查看java Thread源码的时候发现一个类----securityManager,虽然很早就知道存在这样一个类但是都没有深究,今天查看了它的api和源码,发现这个类功能强大,可以做很多权限控制策 ...

  5. svn图标修复

    https://blog.csdn.net/doubleface999/article/details/55798736 前一阵用上了win8,装了最新版本的Tortoise SVN,但发现文件夹和文 ...

  6. HyperLedger Explore 浏览器配置启动教程

    Hyperledger Fabric维护的实际上是一个区块链网络.为了能够直观的观察网络上的节点,交易等行为,Hyperledger Explore随之诞生. 本文讲述如何搭建 Hyperledger ...

  7. Mysql-5-数据表的基本操作

    1.创建表:之前需要use database database_name 然后create table 表名(): 例:创建员工表tb_employee1,结构如下表所示 字段名称 数据类型 备注 i ...

  8. springmvc json 简单例子

    1.控制器层: @RequestMapping("/json.do") @ResponseBody //将会把返回值 转换为json对象 public List<User&g ...

  9. vue 中的.sync语法糖

    提到父子组件相互通信,可能大家的第一反应是$emit,最近在学着封装组件,以前都是用的别人封装好的UI组件,对vue中的.sync这个修饰符有很大的忽略,后来发现这个修饰符很nice,官方对她的描述是 ...

  10. MarkDown折叠语法

    1.语法代码 程序员的本质 程序的进阶和优化 1.简化人的操作,更少的代码做更多的事情 2.节省时间效率,在更短的时间内做更多的事情 3.占用内存,占更少的内存做更多的事情 <details&g ...