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操作之常用事件的更多相关文章

  1. JS中基本window.document对象操作以及常用事件!

    一.找到元素 1.document.getELementById("id"):根据id找,最多找一个. var a=document.getELementById("id ...

  2. JS_DOM操作之绑定事件

    1 - 静态绑定:直接把事件写在标签元素中 <div id="div" onclick="foo(this)">click</div> ...

  3. ios手势操作,四个基本事件与六个常用事件

    基本事件包括begin,canceled,move,ended四项,如果对象的hidden属性为yes,则无效果,hidden属性必须为no;才能使用: -(void)touchesBegan:(NS ...

  4. jQuery的常用事件

    1.$(document).ready() $(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式.它和onload具有类似的效果 ...

  5. jQuery--引入,基本语法,以及常用事件

    一.初识jQuery jQuery是一个JavaScript函数库.主要包含的功能有:HTML元素的选取.操作,CSS操作,HTML事件函数,JavaScript特效和动画,HTML DOM遍历和修改 ...

  6. jQuery常用事件

    1.$(document).ready() $(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式.它和onload具有类似的效果 ...

  7. AJAX-URL-HTTP协议-缓存-DOM操作-HTML元素事件

    1.URL 1.URL的作用 用于来表示任意一个资源的位置(互联网上). 协议+主机名+文件目录结构+文件名称 2.详解 格式: <scheme>://<user>:<p ...

  8. 【repost】Javascript操作DOM常用API总结

    Javascript操作DOM常用API总结 文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...

  9. javaScript入门之常用事件

    JS中的常用事件 onfocus/onblur:聚焦离焦事件,用于表单校验的时候比较合适. onclick/ondblclick:鼠标单击和双击事件 onkeydown/onkeypress:搜索引擎 ...

随机推荐

  1. 关于C语言中的unsigned

    在C语言中,对unsigned做出(unsigned int)i>=0 判断,将会得到一个永真值. int i; for(i=10;i-sizeof(int)>=0;i--){ print ...

  2. Java程序设计(2021春)——第四章接口与多态笔记与思考

    Java程序设计(2021春)--第四章接口与多态笔记与思考 本章概览: 4.1 接口(接口的概念和声明接口.实现接口的语法) 4.2 类型转换 4.3 多态的概念 4.4 多态的应用 4.5 构造方 ...

  3. postman之变量

    前言:postman可以设置(环境变量)和(全局变量) (环境变量):环境变量只能在选择的环境中使用,可以有多组,常用在设置URL和密码当中 (全局变量):只能有一组,整个环境都可以应用 [环境变量] ...

  4. 物理机安装ESXi并优化部署虚拟机

    物理机配置 CPU,BIOS中启用虚拟化(VT-X) 内存和硬盘,内存尽量大.硬盘最好SSD,内存的大小和硬盘的速度直接决定了虚拟机运行的快慢 网络,至少一块千兆网卡(vSphere7.0版本以后支持 ...

  5. ABP框架使用Oracle数据库,并实现从SQLServer中进行数据迁移的处理

    ABP框架的数据访问底层是基于EFCore(Entity Framework Core)的,是微软标志性且成熟的ORM,因此它本身是支持多种主流数据库MySQL,SqlServer,Oracle,SQ ...

  6. 前端 | Nuxt.js axios baseURL,proxy 代理

    平时用 Vue 写前端时,对于 axios 请求的常规操作一般是 统一定义好一个 axios 对象,使用 axios.defaults.baseURL 设置 baseURL 也不是不能直接把服务器地址 ...

  7. Linux线程简单介绍

    1.进程与线程 2.使用线程的理由 3.有关线程操作的函数 4.线程之间的互斥 5.线程之间的同步 6.试题最终代码 1.进程与线程 进程是程序执行时的一个实例,即它是程序已经执行到何种程度的数据结构 ...

  8. 了解cookie和storage的区别及优缺点

    共同点:用于数据的存储. 区别: 1.是否需要添加到http请求头? HTTP Cookie(cookie):在客户端存储会话信息,要求服务器对任意HTTP请求发送set-cookie HTTP头作为 ...

  9. 通过白码SQL数据库对接功能改进原系统

    前言: 之前提到过之所以要使用数据库对接功能,就是因为原有系统上有些功能存在不完善甚至不好用的情况,需要二次开发来优化业务流程或是直接用白码用户端上的通用功能.对接了之后就不需要再写代码来搭建或者优化 ...

  10. 基于css的一些动画

    最近因为期末复习周,博客更新鸽了很久,趁着考完试还记得这件事,把之前的大作业里出现过的css动画总结一下 页脚的联系方式图标 这个图片原型是一个静态图 动画效果如下 html <div clas ...