HTML DOM事件

1.HTML事件包括：

（1）当用户点击鼠标时；

（2）当页面已加载时；

（3）当图像已加载时；

（4）当鼠标移动到元素上时；

（5）当输入字段被改变时；

（6）当提交HTML表单时；

（7）当用户触发按键时。

2.HTML事件属性

　　向HTML元素分配事件，可以使用事件属性。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>分配事件属性</title>
</head>
<body>
<p id="demo">你好！</p>
<!-- 为button分配onclick事件属性 -->
<button type="button" onclick="change()">问候</button>
<script type="text/javascript">
    function change(){
        document.getElementById("demo").innerHTML="你也好！";
    }
</script>
</body>
</html>

3.onload和onunload事件

（1）onload事件：在用户进入页面时触发；

（2）unonload事件：在用户离开页面时触发；

（3）onload事件可以用于检测访问者的浏览器类型和浏览器的版本，并基于这些信息来加载网页的正确版本；

（4）onload和onunload事件可以用于处理cookie。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onload事件和unonload事件</title>
</head>
<body onload="checkCookies()">
<script>
function checkCookies(){
    if(navigator.cookieEnable==true){
        alert("已启用Cookie");
    }else{
        alert("未启用Cookie");
    }
}
</script>
</body>
</html>

4.onchange事件

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

　　下面例子，当用户改变输入字段的内容时，会调用change函数。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onchange事件</title>
</head>
<body>
请输入英文字符：
<input type="text" id="demo" onchange="test()"/>
<script>
    function test(){
        var x = document.getElementById("demo");
        x.value = x.value.toUpperCase();
    }
</script>
</body>
</html>

5.onmousedown、onmouseup和onclick事件

（1）点击时触发onmousedown事件；

（2）释放点击时触发onmouseup事件；

（3）完成点击时触发onclick事件；

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<button id="demo" type="button" onmousedown="test1()" onmouseup="test2()" onclick="test3()">点击前</button>
<script>
function test1(){
    document.getElementById("demo").innerHTML="1";
}
function test2(){
    document.getElementById("demo").innerHTML="2";
}
function test3(){
    document.getElementById("demo").innerHTML="3";
}
</script>
</body>
</html>

6.onmouseover、onmouseout事件

（1）onmouseover事件：在鼠标移动上去时触发；

（2）onmouseout事件：在鼠标离开时触发。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onmouseover和onmouseout事件</title>
</head>
<body>
<p id="demo" onmouseover="test1()" onmouseout="test2()">哈哈</p>
<script>
function test1(){
    document.getElementById("demo").innerHTML="鼠标移动上去了";
}
function test2(){
    document.getElementById("demo").innerHTML="鼠标移动走了";
}
</script>
</body>
</html>

HTML DOM事件的更多相关文章

  1. DOM 事件深入浅出（二）

    在DOM事件深入浅出(一)中,我主要给大家讲解了不同DOM级别下的事件处理程序,同时介绍了事件冒泡和捕获的触发原理和方法.本文将继续介绍DOM事件中的知识点,主要侧重于DOM事件中Event对象的属性 ...

  2. DOM 事件深入浅出（一）

    在项目开发时,我们时常需要考虑用户在使用产品时产生的各种各样的交互事件,比如鼠标点击事件.敲击键盘事件等.这样的事件行为都是前端DOM事件的组成部分,不同的DOM事件会有不同的触发条件和触发效果.本文 ...

  3. DOM事件

    在慕课网上学习了DOM事件探秘课程,特此整理了一下笔记. 慕课网DOM事件探秘课程地址:http://www.imooc.com/learn/138 事件 是文档或浏览器窗口中发生的特定的交互瞬间.[ ...

  4. 理解DOM事件流的三个阶段

    本文主要解决两个问题: 1.什么是事件流 2.DOM事件流的三个阶段 事件流之事件冒泡与事件捕获 在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张 ...

  5. 你真的了解DOM事件么？

    你真的了解DOM事件么? 我们大家都知道,人与人之间的交流可以通过语言,文字,肢体动作,面部微表情等,但是你知道Javascript和HTML之间是通过什么进行交互的么?你又知道Javascript和 ...

  6. [DOM Event Learning] Section 4 事件分发和DOM事件流

    [DOM Event Learning] Section 4 事件分发和DOM事件流 事件分发机制: event dispatch mechanism. 事件流(event flow)描述了事件对象在 ...

  7. dom事件与event对象总结

    1 事件:就是文档或浏览器窗口中发生的一些特定的交互瞬间.    tips:js和xhtml的交互是通过当用户或浏览器操作网页时发生的事件来处理的. 1.1 事件流:即事件的顺序.        事件 ...

  8. DOM事件简介－－摘自admin10000

    Click.touch.load.drag.change.input.error.risize — 这些都是冗长的DOM(文档对象模型)事件列表的一部分.事件可以在文档(Document)结构的任何部 ...

  9. 从click事件理解DOM事件流

    事件流是用来解释页面上的不同元素接受一个事件的顺序,首先要明确两点: 1.一个事件的影响元素可能不止一个(同心圆理论),但目标元素只有一个. 2.如果这些元素都绑定了相同名称的事件函数,我们怎么知道这 ...

  10. DOM事件机制进一步理解

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

随机推荐

  1. MyEclipse启动失败

    日志的一部分: !SESSION 2014-09-24 11:47:03.156 -----------------------------------------------eclipse.buil ...

  2. php防sql注入

    [一.在服务器端配置] 安全,PHP代码编写是一方面,PHP的配置更是非常关键. 我 们php手手工安装的,php的默认配置文件在 /usr/local/apache2/conf/php.ini,我们 ...

  3. VC++2010 中Debug和Release配置

    刚刚遇到了Release模式正常运行,而直接切换到Debug报错的问题,后来发现是Debug模式和Release模式配置不同造成的,再此记录一下解决方法: 1.项目属性->切换到Release模 ...

  4. SQLServer出现 '其他会话正在使用事务的上下文' 的问题原因，什么是环回链接服务器?（转载）

    本人经过百度查找并且自己进行测试得到问题原因: MSDN上看了一下说是sql server 不支持在分布式事务处理中存在指向本地的链接服务器(环回链接服务器) 通过上面简单说明大家有可能没完全理解环回 ...

  5. NOIP201401珠心算测验

    珠心算测验  问题描述]  珠心算是一种通过在脑中模拟算盘变化来完成快速运算的一种计算技术.珠心算训练,既能够开发智力,又能够为日常生活带来很多便利,因而在很多学校得到普及.  某学校的珠心算老师采用 ...

  6. LoadRunner并发用户和集合点的深入讨论

    看到51上三个高手Zee, 大漠飞鹰,xingcyx的一场非常精彩的关于并发用户数和集合点的讨论,很有意义.如果对这两个概念不清楚的朋友,一定要仔细领悟了. 故事开始于xingcyx的一番话: 声明: ...

  7. 好用的SSH客户端 good SSH client recommended

    对于经常性地要登录服务器的同志们,选择一款优秀的SSH客户端非常有必要,不仅可以提高效率,而且赏心悦目,宅的几率更大.呵呵,我就是i一枚.很出名的就是PuTTY(Windows,Linux都有的), ...

  8. 编码-截取中文-去除HTML字符

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> < ...

  9. 【PHP设计模式 07_ZeRenLian.php】责任链模式

    <?php /** * [责任链模式] * 情景设置:根据不同的需求,去找相应级别的责任人解决问题 */ header("Content-type: text/html; charse ...

  10. Python代码项目目录规范v1.0

    程序目录规范:bin # 存放可执行程序 xxxx.py # 程序主程序(入口文件)config # 存放配置信息 settings.py # 全局配置文件(可能暂时未应用)db # 存放数据文件 c ...