HTML DOM事件
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事件的更多相关文章
- DOM 事件深入浅出(二)
在DOM事件深入浅出(一)中,我主要给大家讲解了不同DOM级别下的事件处理程序,同时介绍了事件冒泡和捕获的触发原理和方法.本文将继续介绍DOM事件中的知识点,主要侧重于DOM事件中Event对象的属性 ...
- DOM 事件深入浅出(一)
在项目开发时,我们时常需要考虑用户在使用产品时产生的各种各样的交互事件,比如鼠标点击事件.敲击键盘事件等.这样的事件行为都是前端DOM事件的组成部分,不同的DOM事件会有不同的触发条件和触发效果.本文 ...
- DOM事件
在慕课网上学习了DOM事件探秘课程,特此整理了一下笔记. 慕课网DOM事件探秘课程地址:http://www.imooc.com/learn/138 事件 是文档或浏览器窗口中发生的特定的交互瞬间.[ ...
- 理解DOM事件流的三个阶段
本文主要解决两个问题: 1.什么是事件流 2.DOM事件流的三个阶段 事件流之事件冒泡与事件捕获 在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张 ...
- 你真的了解DOM事件么?
你真的了解DOM事件么? 我们大家都知道,人与人之间的交流可以通过语言,文字,肢体动作,面部微表情等,但是你知道Javascript和HTML之间是通过什么进行交互的么?你又知道Javascript和 ...
- [DOM Event Learning] Section 4 事件分发和DOM事件流
[DOM Event Learning] Section 4 事件分发和DOM事件流 事件分发机制: event dispatch mechanism. 事件流(event flow)描述了事件对象在 ...
- dom事件与event对象总结
1 事件:就是文档或浏览器窗口中发生的一些特定的交互瞬间. tips:js和xhtml的交互是通过当用户或浏览器操作网页时发生的事件来处理的. 1.1 事件流:即事件的顺序. 事件 ...
- DOM事件简介--摘自admin10000
Click.touch.load.drag.change.input.error.risize — 这些都是冗长的DOM(文档对象模型)事件列表的一部分.事件可以在文档(Document)结构的任何部 ...
- 从click事件理解DOM事件流
事件流是用来解释页面上的不同元素接受一个事件的顺序,首先要明确两点: 1.一个事件的影响元素可能不止一个(同心圆理论),但目标元素只有一个. 2.如果这些元素都绑定了相同名称的事件函数,我们怎么知道这 ...
- DOM事件机制进一步理解
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
随机推荐
- android中在代码中设置margin属性
1,不多说,小知识点,直接上代码 LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(15, 15);// 创 ...
- paper 37 : WINCE的BIB文件解析
WINCE的BIB文件解析 BIB的全称为Binary Image Builder,在Wince编译过程中的最后MakeImage阶段会用到BIB文件,BIB文件的作用是指示构建系统如何构建二进制映像 ...
- Mysql 修改字段长度、修改列名、新增列
alter table 表名 modify column 字段名 类型; 例如 数据库中user表 name字段是varchar(30) 可以用 ) ; --修改字段长度 )--修改表列名 ); -- ...
- 远程mysql服务器无法连接解决方案
错误现象:Habon被拒绝. 远程服务器无法连接从两个方面看 1.是否能ping通远程服务器 windows下查看防火墙是否已关闭 linux下查看iptables等 2.数据库是否有开用户管理权限 ...
- 关于mybatis的参数2个使用经验(类似于struts2的通配所有页面的action配置,xmlsq语句参数类型为基本类型时的快捷指定办法)
1.我们都知道在struts2中为防止浏览器绕过struts过滤器直接请求页面,所以我们都会配置一个拦截所有页面的action,如下: <action name="*"> ...
- linux时区的设置
到目前为止,个人的理解就是linux中设置时区就是修改配置文件 /etc/localtime 而通常的做法就是让这个文件作为符号链接,链接到 /usr/share/zoneinfo/ 中的某个特定的时 ...
- Junit单步调试
单步调试:主要查看变量内容的变化 1.设置断点位置,设置在可能出现问题的代码 2.点击项目右键以Debug as方式运行程序 3.F5 --> step into 进入方法内部进行调试 ...
- linux下串口控制
/* 本程序符合GPL条约 * Beneboy 2003-5-16 */ #include <stdio.h> // printf #include < ...
- :not(selector)
描述: 用于筛选的选择器 查找所有未选中的 input 元素 HTML 代码: <input name="apple" /> <input name=" ...
- virtualbox -centos ping不通外网
centos上配置网卡自动获取ip 在路由器上配置了ip和mac绑定.ping不通外网.删除路由器上的静态mac绑定后OK,不明