JavaScript中DOM操作常用事件总结
目录
- 常用事件
- 演示得到焦点和失去焦点
- 演示 鼠标划过和离开
- 点击事件
- load加载页面事件
- onkeyup 键盘弹起事件
- 内容变化事件
- 选中时触发
上一篇聊了如何同JavaScript获得页面元素，而获得页面元素的的目的就是操作这个元素的一行为，而这个行为是通过某个条件进行触发的。而这个一系列在JavaScript中称之为事件。
由此可以看出事件分三个部分：
事件源头： 也就是要操作的元素是谁。
事件类型： 也就是事件触发条件，比如鼠标点击以及鼠标滑过等。
事件处理： 如果触发了这个行为，如何操作，以及操作结果。
常用事件
现在说一下常用的事件，这个不是全部的事件，如果需要了解全部的事件可以看官方文档。
常用的事件有：
| 事件类型 | 描述 |
|---|---|
| onblur | 对象失去焦点的时候触发 |
| onfous | 当获得焦点的时候触发 |
| onclick | 用户鼠标左键点击的时候触发 |
| ondblclick | 用户双击时候触发 |
| onchange | 当对象或者选中区内容改变的时候触发 |
| onkeyup | 当用户释放键盘按键时候触发（还有两个事件onkeydown和onkeypress） |
| onload | 浏览器加载完毕后立即触发 |
| onmouseout | 当用户将鼠标移出对象范围时触发 |
| onmouseover | 当用户数鼠标在对象上滑动的时候触发 |
| onselect | 当当前选择区改变时触发 |
| onunload | 对象卸载前理解触发 |
下面演示的时候会有些涉及到涉及到一些属性的变化，可以先不关心而是关系这个事件是如何触发发。后面单独为再写一篇关于属性的修改以及赋值。
演示得到焦点和失去焦点
演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
</head>
<body>
<!--可以在标签上直接绑定事件类型-->
<label>姓名</label> <input id="testid" type="text" onfocus="test_foncus()" value="请输入">
<script>
var element=document.getElementById("testid");
function test_foncus() {
if (element.value=="请输入"){
element.value="";
}
}
// 也可以主页绑定事件类型
element.onblur=function () {
console.log(element.value);
if (element.value==""){
element.value="请输入";
}
}
</script>
</body>
</html>
演示 鼠标划过和离开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
<style>
div {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="testid" ></div>
<script>
var element=document.getElementById("testid");
element.onmouseover=function () {
element.style='background-color:pink;';
}
element.onmouseout=function () {
element.style='background-color:blue;';
}
</script>
</body>
</html>
点击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
<style>
</style>
</head>
<body>
<button id="testid">点击按钮</button>
<script>
var element=document.getElementById("testid");
element.onclick=function () {
confirm("你确定你要点击？")
}
</script>
</body>
</html>
load加载页面事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
<style>
</style>
</head>
<body>
<div id="testid1"></div>
<hr>
<div id="testid2"></div>
<script>
var element1=document.getElementById("testid1");
var element2=document.getElementById("testid2");
// 一般onload加载是监控的是这个页面的加载所以一般都是window调用
window.onload=function () {
element1.innerText="innerText插入";
element2.innerHTML="<h1>innerHTML插入</h1>"
}
</script>
</body>
</html>
补充 innerText和innerHTML区别
- innerText 在页面上输出文本内容，直接将标签删除
- innerHTML在页面上输出标签效果以及其内容。
onkeyup 键盘弹起事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
<style>
</style>
</head>
<body>
<input id="testid" type="text">
<script>
var element=document.getElementById("testid");
element.onkeyup=function () {
alert("你在输入内容啊")
}
</script>
</body>
</html>
内容变化事件
演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
<style>
</style>
</head>
<body>
<input id="testid" type="text">
<script>
var element=document.getElementById("testid");
// 到鼠标离开的时候就会变得是否内容修改
element.onchange=function () {
alert("你在修改吗？")
}
</script>
</body>
</html>
选中时触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
<style>
</style>
</head>
<body>
<input id="testid" type="text" value="点击两次选选择">
<script>
var element=document.getElementById("testid");
element.onselect=function () {
alert(element.value);
}
</script>
</body>
</html>
到此这篇关于JavaScript中DOM操作常用事件总结的文章就介绍到这了,更多相关JavaScript DOM事件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
理解javascript中DOM事件
首先,此文不讨论繁琐细节,但是考虑到读者的心灵感受,本着以积极向上的心态,在此还是会列举示例说明. 标题为理解DOM事件,那么在此拿一个简单的点击事件为例,希望大家看到这个例子后能触类旁通. 最初我们给页面实现点击,就像下面这样的简单操作. 先定义一个块如<div id="weiyuzhou">微宇宙</div>,之后在<script type="text/javascript"></script>内部实现id为we
-
详解用js代码触发dom事件的实现方案
背景 前端编写测试用例时,在测试界面上的一些效果时,通常都希望能够模拟一些用户操作,而模拟用户操作最主要的方式就是用代码触发指定事件.通常一些元素上会自带一些触发事件的方法,例如click.focus等,但是如果是其他的事件,例如mousedown.mouseup.mouseenter,这些事件怎么模拟呢? 思路 其实思路很简单,web标准中定义了一系列API接口,其中dispatchEvent允许我们向一个指定的事件目标派发一个事件,而且使用这个方法触发的事件是可以正常触发我们的标准事件处理规
-
JavaScript的DOM事件详解
目录 1.事件对象 2.事件流 3.事件委托 4.综合案例 总结 1.事件对象 [获取事件对象] 什么是事件对象:是个对象,这个对象里有事件触发时的相关信息. 事件对象的语法 元素.addEventListener('click',function(e){}) [事件对象常用属性] type:获取当前的事件类型 clientX/clientY:获取光标相对于浏览器可见窗口左上角的位置 offsetX/offsetY:获取光标相对于当前DOM元素左上角的位置 key:用户按下的键盘的值 [案例]:
-
js DOM的事件常见操作实例详解
本文实例讲述了js DOM的事件常见操作.分享给大家供大家参考,具体如下: 一.JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. BOM:浏览器对象模型,操作浏览器部分功能的API.比如让浏览器自动滚动. 二.事件 JS是以事件驱动为核心的一门语言. 事件的三要素 事件的三要素:事件源.
-
JavaScript DOMContentLoaded事件案例详解
DOMContentLoaded 事件 字面上看,它会在dom加载完成后触发. 与window.onload事件非常相似,但有一定区别: DOMContentLoaded 事件是在文档完全加载和解析之后触发: window.onload 事件不但文档完全加载和解析完毕,相关资源都要加载完毕,比如图片和CSS文件等: 下一个问题是什么时候dom加载完毕,这得从浏览器渲染说起,浏览器显示网页的过程可以做如下描述: 1. 请求得到html文档,根据文档请求更多的img,css及其它资源文件: 2.
-
JavaScript中DOM操作常用事件总结
目录 常用事件 演示得到焦点和失去焦点 演示 鼠标划过和离开 点击事件 load加载页面事件 onkeyup 键盘弹起事件 内容变化事件 选中时触发 上一篇聊了如何同JavaScript获得页面元素,而获得页面元素的的目的就是操作这个元素的一行为,而这个行为是通过某个条件进行触发的.而这个一系列在JavaScript中称之为事件. 由此可以看出事件分三个部分: 事件源头: 也就是要操作的元素是谁. 事件类型: 也就是事件触发条件,比如鼠标点击以及鼠标滑过等. 事件处理: 如果触发了这个行为,如何
-
JavaScript中Dom操作实例详解
本文实例讲述了JavaScript中Dom操作.分享给大家供大家参考,具体如下: 博主将按照增删改查的方式来介绍一下Dom的主要操作. 1.增加节点 添加节点的操作主要分为3步: (1)创建要添加的新节点 (2)找到要添加到的父节点 (3)父节点添加新节点 参考代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Com
-
jquery中dom操作和事件的实例学习-表单验证
很显然,这样做能提升更好的用户体验. html代码: 复制代码 代码如下: <form method="post" action=""> <div class="int"> <label for="username">用户名:</label> <input type="text" id="username" class="r
-
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
但感觉这样写很没意思. jquery的优势就是简单的代码就能带来更好的用户体验. 所以就找几个我感觉实用的例子,拿出来介绍下.顺带把其中用到的操作和事件介绍下. html代码: <input type="text" id="address" value="请输入邮箱地址"/> jquery代码: 复制代码 代码如下: $(document).ready(function(){ $('#address').focus(function(
-
jquery中dom操作和事件的实例学习 下拉框应用
今天这个demo是有关下拉框的. 复制代码 代码如下: <div class="centent"> <select multiple="multiple" id="select1" style="width:100px;height:160px;"> <option value="1">选项1</option> <option value="2
-
jQuery中DOM操作实例分析
本文实例讲述了jQuery中DOM操作的方法.分享给大家供大家参考.具体分析如下: 这里主要设计的dom操作包括:dom对象的创建(JS方式和jquery方式).属性的修改.样式的修改.动态绑定事件 代码如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="jquery-1.3.
-
JavaScript基于DOM操作实现简单的数学运算功能示例
本文实例讲述了JavaScript基于DOM操作实现简单的数学运算功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"
-
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
本文实例讲述了JavaScript基于Dom操作实现查找.修改HTML元素的内容及属性的方法.分享给大家供大家参考,具体如下: 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model).HTML DOM 模型被构造为对象的树. 通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML.例如:改变HTML元素,改变HTML属性,改变CSS样式,事件响应. 效果图: 代码: <!DOCTYPE html PUBLIC "-//W3C
-
jQuery中DOM操作原则实例分析
本文实例讲述了jQuery中DOM操作原则.分享给大家供大家参考,具体如下: 一丶Get and Set in One(读写一体) 原则 为了更加易于使用,jQuery提供了简洁的DOM操作API,其方法往往是读写一体的.也就是说,某个方法既可用于读取操作,也可用于设置操作.如果没有为其传入表示值的参数,则表示获取操作,将返回获取到的数据:如果为其传入了表示值的参数,则表示设置操作,它将设置DOM元素指定属性的值. 示例代码 // 没有传入value参数,返回第一个匹配元素的value元素 va
-
JavaScript中5个常用的对象
目录 1.JavaScript对象 1).Array对象 2).Boolean对象 3).Date对象 4).Math对象 5).Number对象 6).String对象 前言: 相信做网站对JavaScript再熟悉不过了,它是一门脚本语言,不同于Python的是,它是一门浏览器脚本语言,而Python则是服务器脚本语言,我们不光要会Python,还要会JavaScript,因为它对做网页方面是有很大作用的. 1.JavaScript对象 在JavaScript中有许多有用的对象,它们可以用来