如需在用户点击某个元素时执行代码，请向一个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. 【Linux入门】

    文件系统结构:倒树状: 文件命名规则: Windows  8.3的命名规则:文件名8位以内,后缀名3位以内 linux中隐藏文件的方式:在文件名称前面加.  eg: 1.txt===> .1.t ...

  2. jexus处理静态文件（处理后缀）

    AspNet_Exts=txt就能把你指定的扩展名交给asp.net处理.同理,可以写很多个,AspNet_Exts=txt,htm,html

  3. 洛谷P1171 售货员的难题

    P1171 售货员的难题 题目背景 数据有更改 题目描述 某乡有n个村庄(1<n<20),有一个售货员,他要到各个村庄去售货,各村庄之间的路程s(0<s<1000)是已知的,且 ...

  4. 对不起，给pandas配表情包太难了，pandas你该这么学，No.6

    如果图片无法观看,请移步 https://blog.csdn.net/hihell 标题起的长,才能引起你的注意呢 昨天,有个家伙,留言给我说 嫌我不好好写博客 就知道给文章配表情包 在这里,郑重的回 ...

  5. 架构师分享 Docker 新手入门完全指南

    来源:架构师小秘圈 ID:seexmq Docker 最初 dotCloud 公司内部的一个业余项目 Docker 基于 Go 语言 Docker 项目的目标是实现轻量级的操作系统虚拟化解决方案 Do ...

  6. react native ios打包，即生产包

    参考文章:http://www.devio.org/2017/02/09/React-Native%E5%8F%91%E5%B8%83APP%E4%B9%8B%E6%89%93%E5%8C%85iOS ...

  7. AT2166 Rotate 3x3

    传送门 这个题网上有两种做法,一种是树状数组的,还有一种是暴力模拟的,暴力模拟显然不够优美,所以我用的树状数组 显然可以从初状态推到目标状态,我们也可以考虑倒推回去 首先可以容易发现每列的数字是不变的 ...

  8. thinkphp5实现文章上一篇，下一篇

    写在控制器 //列表是按照根据id降序排列的,所以上一篇 $prv=Db::table('qy_article')->where('at_id','>',$at_id)->where ...

  9. Git工具详解以及与GitHub的配合使用

    git和Github 概念 git --- 版本控制工具(命令). 工具介绍官方网站:http://git-scm.com 工具下载地址:http://git-scm.com/download/ gi ...

  10. flush logs时做的操作

    flush logs时做的操作:  对于一般查询日志和慢日志,先关闭文件再打开  对于binlog,关闭当前的,开始用下一个新的  用错误日志文件的话,先关闭再打开flush logs可以对一般查询日 ...