如需在用户点击某个元素时执行代码，请向一个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. Win10不能直接拖文件/Foxmail不能拖文件解决办法

    在桌面新建一个文本文档   打开文本文档复制下面的文字然后保存. Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\M ...

  2. js判断IP字符串是否正确

    //判断ip地址的合法性 function checkIP(value){ var exp=/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0 ...

  3. Python 中的赋值、拷贝、引用

    在 python 中赋值语句总是建立对象的引用值,而不是复制对象.因此,python 变量更像是指针,而不是数据存储区域. 如图所示,当改变一个变量的值,另一个的值也会跟着改变.也就是浅拷贝. 若要实 ...

  4. C++基础之C++编译调试

     C++程序的实现(预处理,编译,连接)Linux平台编译gcc和g++都是GNU的编译器.1.对于.c后缀的文件,gcc把它当做是C程序:g++当做是C++程序:2.对于.cpp后缀的文件,gcc和 ...

  5. Boost Python学习笔记（二）

    你将学到什么 如何在Python中调用C++代码 如何在C++中调用Python代码 在Python中调用C++代码 首先定义一个动物类(include/animal.h) #pragma once ...

  6. 教大家一个看电视局免广告的方法--由UWP想到的

    将近一年(10个月)来一直在学习.NET技术,这其中包括C#.WPF.WCF和ASP.NET MVC,目前学习即将结束. 本人在学习WPF的过程中,也了解到有UWP这门技术,UWP技术目前来说主要是应 ...

  7. Codeforces Round #517 (Div. 2, based on Technocup 2019 Elimination Round 2)D（思维，DP，字符串）

    #include<bits/stdc++.h>using namespace std;char c[2007][2007];char ans[4007];int s[2007][2007] ...

  8. python之02数据类型学习

    参考链接:http://www.cnblogs.com/yuanchenqi/articles/5782764.html python的数据类型有:Number.Boolean.String .Lis ...

  9. 洛谷P3527 [POI2011]MET-Meteors（整体二分）

    传送门 整体二分 先二分一个答案,判断是否可行,把可行的全都扔到左边,不可行的扔到右边 判断是否可行用树状数组就行 具体细节看代码好了 整体二分细节真多……也可能是我大脑已经退化了? //minamo ...

  10. 小K的农场 差分约束

    题目描述 小K在MC里面建立很多很多的农场,总共n个,以至于他自己都忘记了每个农场中种植作物的具体数量了,他只记得一些含糊的信息(共m个),以下列三种形式描述: 农场a比农场b至少多种植了c个单位的作 ...