JS_DOM操作之常用事件
1 - onload 事件：加载完成后立即执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <script>
window.onload = function (){
ele = document.getElementById("i1")
console.log(ele.innerHTML);
}
</script> </head>
<body> <div id="i1">yuan</div> </body>
</html>
2 - onsubmit 事件：在表单提交时触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body> <form action="" id="i1">
用户名：<input type="text">
密码： <input type="password">
<input type="submit">
</form> <script> var ele = document.getElementById("i1");
var user = document.querySelector("#i1 [type=text]")
var pwd = document.querySelector("#i1 [type=password]")
ele.onsubmit = function (e){
console.log(user.value);
console.log(pwd.value); return false; // 终止事件执行
// e.preventDefault() // 阻止元素默认行为
} </script>
</body>
</html>
3 - onchange 事件：该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body> <select name="provonce" id="s1">
<option value="hebei">请选择省份</option>
<option value="hubei">湖北省</option>
<option value="hunan">湖南省</option>
<option value="hebei">河北省</option>
</select> <select name="provonce" id="s2">
<option value="hebei">请选择城市</option> </select> <script> var data={"hunan":["长沙","岳阳","张家界"],"hubei":["武汉","襄阳","荆州"],"hebei":["石家庄","保定","张家口"]};
console.log(data);
var ele = document.getElementById("s1");
var ele2 = document.getElementById("s2");
ele.onchange=function () {
console.log(this.value);
var citys = data[this.value];
console.log(citys);
// 清空操作
ele2.options.length=1;
// 创建标签
for (var i=0;i<citys.length;i++){
var option = document.createElement("option"); // </option></option>
option.innerHTML=citys[i];
ele2.appendChild(option)
}
} </script> </body>
</html>
4 - onmouse事件: 鼠标事件，包括以下内容：
| onmousedown | 鼠标按钮被按下。 | |
| onmouseenter | 当鼠标指针移动到元素上时触发。 | |
| onmouseleave | 当鼠标指针移出元素时触发 | |
| onmousemove | 鼠标被移动。 | |
| onmouseover | 鼠标移到某元素之上。 | |
| onmouseout | 鼠标从某元素移开。 | |
| onmouseup | 鼠标按键被松开。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#container{
width: 300px;
}
#title{
cursor: pointer;
background: #ccc;
}
#list{
display: none;
background:#fff;
} #list div{
line-height: 50px;
}
#list .item1{
background-color: green;
} #list .item2{
background-color: rebeccapurple;
} #list .item3{
background-color: lemonchiffon;
} </style>
</head>
<body>
<div id="container">
<div id="title">使用了mouseout事件↓</div>
<div id="list">
<div class="item1">第一行</div>
<div class="item2">第二行</div>
<div class="item3">第三行</div>
</div>
</div>
<script> // 1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。 // 2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。 var container=document.getElementById("container");
var title=document.getElementById("title");
var list=document.getElementById("list");
title.onmouseover=function(){
list.style.display="block";
}; container.onmouseleave=function(){ // 改为onmouseout试一下
list.style.display="none";
}; /* 因为mouseout事件是会冒泡的，也就是onmouseout事件可能被同时绑定到了container的子元素title和list
上，所以鼠标移出每个子元素时也都会触发我们的list.style.display="none"; */
</script>
</body>
</html>
5 - onkey 事件：键盘事件，包括以下内容：
| onkeydown | 某个键盘按键被按下。 | |
| onkeypress | 某个键盘按键被按下并松开。 | |
| onkeyup | 某个键盘按键被松开。 |
<input type="text" id="t1"/>
<script type="text/javascript">
var ele=document.getElementById("t1");
ele.onkeydown=function(e){
console.log("onkeydown",e.key)
};
ele.onkeyup=function(e){
console.log("onkeyup",e.key)
};
</script>
JS_DOM操作之常用事件的更多相关文章
- JS中基本window.document对象操作以及常用事件！
一.找到元素 1.document.getELementById("id"):根据id找,最多找一个. var a=document.getELementById("id ...
- JS_DOM操作之绑定事件
1 - 静态绑定:直接把事件写在标签元素中 <div id="div" onclick="foo(this)">click</div> ...
- ios手势操作,四个基本事件与六个常用事件
基本事件包括begin,canceled,move,ended四项,如果对象的hidden属性为yes,则无效果,hidden属性必须为no;才能使用: -(void)touchesBegan:(NS ...
- jQuery的常用事件
1.$(document).ready() $(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式.它和onload具有类似的效果 ...
- jQuery--引入，基本语法，以及常用事件
一.初识jQuery jQuery是一个JavaScript函数库.主要包含的功能有:HTML元素的选取.操作,CSS操作,HTML事件函数,JavaScript特效和动画,HTML DOM遍历和修改 ...
- jQuery常用事件
1.$(document).ready() $(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式.它和onload具有类似的效果 ...
- AJAX-URL-HTTP协议-缓存-DOM操作-HTML元素事件
1.URL 1.URL的作用 用于来表示任意一个资源的位置(互联网上). 协议+主机名+文件目录结构+文件名称 2.详解 格式: <scheme>://<user>:<p ...
- 【repost】Javascript操作DOM常用API总结
Javascript操作DOM常用API总结 文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...
- javaScript入门之常用事件
JS中的常用事件 onfocus/onblur:聚焦离焦事件,用于表单校验的时候比较合适. onclick/ondblclick:鼠标单击和双击事件 onkeydown/onkeypress:搜索引擎 ...
随机推荐
- C#曲线分析平台的制作（一，ajax+json前后台数据传递）
在最近的项目学习中,需要建立一个实时数据的曲线分析平台,这其中的关键在于前后台数据传递过程的学习,经过一天的前辈资料整理,大概有了一定的思路,现总结如下: 1.利用jquery下ajax函数实现: & ...
- 说说Java异步调用的几种方式
日常开发中,会经常遇到说,前台调服务,然后触发一个比较耗时的异步服务,且不用等异步任务的处理结果就对原服务进行返回.这里就涉及的Java异步调用的一个知识.下面本文尝试将Java异步调用的多种方式进行 ...
- MarkDown语法（Typora软件为例）
Hello !我又来了 这篇文章主要给大家讲一下MarkDown的一些基础语法,MarkDown语法是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML( ...
- WinUI 3学习笔记（2）—— 用ListView来展示集合
在WPF的时代,我们多是使用ListBox和ListView来展示,纵向滚动条显示的集合数据.这两个控件的默认样式,以及对触控的支持,已完全落后于时代.他们两个分别长这样,和Win10及Win11的风 ...
- Vue 脚手架学习
首先就是安装脚手架 npm install @vue/cil -g 全局安装 在这里我遇到一个问题:安装不了脚手架,报错显示: 通过苦逼的查找原因就是 以前使用的taobao镜像 导致的,删除镜像换成 ...
- 记一次mysql事务未提交导致锁未释放的问题
记一次mysql事务未提交导致锁未释放的问题 ## 查看未提交的事务(3秒内未操作的事务) SELECT p.ID AS conn_id, P.USER AS login_user, P.HOST A ...
- Specify Default JDK on Ubuntu
sudo update-alternatives --config java will produce: Selection Path Priority Status 0 /usr/lib/jvm/j ...
- 绿色djvu阅读软件
官方的djvu viewer都需要安装,总算找到一个绿色版的,名为STDU Viewer,可以阅读的格式包括DjVu, PDF, TIFF, XPS, FB2等,版本为1.6.2.
- 004 PCI Express体系结构（四）
一.PCI总线的中断机制 PCI总线使用INTA#.INTB#.INTC#和INTD#信号向处理器发出中断请求.这些中断请求信号为低电平有效,并与处理器的中断控制器连接.在PCI体系结构中,这些中断信 ...
- SwiftUI图片处理(缩放、拼图)
采用SwiftUI Core Graphics技术,与C#的GDI+绘图类似,具体概念不多说,毕竟我也是新手,本文主要展示效果图及代码,本文示例代码需要请拉到文末自取. 1.图片缩放 完全填充,变形压 ...