前端之JavaScript 04 事件 （未全）
一、事件类型
常见的主要事件类型介绍如下：
onfocus 元素获得焦点。 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动） onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseleave 鼠标从元素离开 onselect 文本被选中。
onsubmit 确认按钮被点击。
二、onsubmit实例
onsubmit主要用在form表单进行submit提交时执行的事件，即通过form标签绑定此事件，点击form下的submit按钮执行事件。当表单在提交时触发， 该属性也只能给form元素使用。应用场景:：在表单提交前验证用户输入是否正确，如果验证失败，在该方法中我们应该阻止表单的提交。实例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" class="form">
<p><input type="text" class="inpt"><span class="error"></span></p>
<input type="submit" >
</form>
<script>
var ele_form=document.getElementsByClassName("form")[0];
var ele_inpt=document.getElementsByClassName("inpt");
var ele_error=document.getElementsByClassName("error")[0];
function foo() {
ele_error.innerHTML=""
}
ele_form.onsubmit=function () { //通过父级form节点绑定onsubmit事件
var inpt_value=ele_inpt.value;
if(inpt_value.length>5 && inpt_value.length<12){ }
else{
ele_error.innerHTML="输入内容长度需要大于5小于12";
setTimeout(foo,3000); //用定时器保证提示信息显示3秒后消失
return false //阻止提交事件的发生
}
}
</script>
</body>
</html>
onchange实例
onchange事件主要应用在select标签上，通过select标签绑定此事件，当选定一个select下面的内容，则会执行onchange事件下的内容，一个主要的应用就是三级联动，具体实例如下：
select联动
<!--定义和用法-->
<!--option 元素定义下拉列表中的一个选项（一个条目）。-->
<!--浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示。-->
<!--option 元素位于 select 元素内部。-->
<!DOCTYPE html>
<html lang="zh—CN">
<head>
<meta charset="UTF-8">
<title>select联动</title>
</head>
<body>
<select name="" id="s1" onchange="loadData();">
<option value="">请选择省份</option>
</select> <select name="" id="s2">
<option value="">请选择省份</option>
</select> <script>
var s1Ele = document.getElementById("s1"); var data = {"四川": ["成都", "攀枝花", "湘潭"],"广东": ["深圳", "梅州", "东莞"],
"江西": ["宜春", "南昌", "景德镇"]};
// 把data里面的key都拿出来，生成option标签，添加到s1这个select
var str = "";
for (var key in data) {
console.log(key); // 2 .往生成标签里加
var s = "<option>" + key + "</option>";
console.log(s);
str += s;
}
console.log(str); s1Ele.innerHTML = str; function loadData() {
var s2Ele = document.getElementById("s2");
s2Ele.options.length = 0; // 清空select 下面的option // 把data里面的key都拿出来，生成option标签，
// 添加到s1这个select
var indexValue = s1Ele.selectedIndex;
var optionEles = s1Ele.options;
var key = optionEles[indexValue].innerText;
var data2 = data[key]; for (var i=0; i<data2.length;i++) {
var optionEle = document.createElement("option");
optionEle.innerText = data2[i];
s2Ele.appendChild(optionEle);
}
}
</script>
</body>
</html>
定时器例子
<!DOCTYPE html>
<html lang="zh—CN">
<head>
<meta charset="UTF-8">
<title>定时器示例</title>
</head>
<body>
<input type="text" id="i1"> <input type="button" value="开始" onclick="start()">
<input type="button" value="结束" onclick="end()"> <script>
var t;
function f() {
// 获取时间
var dateObj = new Date();
// 获取i1 标签
var i1Ele = document.getElementById("i1");
i1Ele.value=dateObj.toLocaleString(); } //每隔一秒就执行一次f()
function start() {
f();
// 之创建一个定时器，有定时器的话我就不创建
if(t === undefined){ // 如果没有就创建t
t = setInterval(f,1000); // 1000为毫秒
}
} // 停止计时
function end() {
clearInterval(t);
t = undefined; // 清空,没请空，t还会有值，停止就启动不了
}
</script>
</body>
</html>
onkeydown及onselect实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="d1">
<script>
var ele=document.getElementById("d1");
// onkeydown事件：某个键盘键被按下，执行事件
ele.onkeydown=function (event) {
console.log(event.keyCode);
if(event.keyCode==13){ //event.keyCode==13为回车键
alert(123)
}
};
// onselect 事件：文本被选中时执行事件
ele.onselect=function () {
alert(1234)
}
</script>
</body>
</html>
onfocus及onblur实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="inp1" value="请输入用户名">
<script>
var ele_inp=document.getElementById("inp1");
//onfocus事件
ele_inp.onfocus=function () { //当点中输入框，默认value值消失
this.value="";
};
//onblur事件
ele_inp.onblur=function () { //当点中非输入框区域，输入框重新赋上默认值
if(!this.value.trim()){
this.value="请输入用户名"
}
}
</script>
</body>
</html>
mouseout与mouseleavequbie
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#container{
width: 300px;
} #title{
background-color: darkblue;
color: white;
line-height: 30px;
text-align: center;
} #list .item1{
background-color: gray;
line-height: 20px;
}
#list .item2{
background-color: #f0ad4e;
line-height: 20px;
}
#list .item3{
background-color: green;
line-height: 20px;
} .hide{
display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="title">使用了mouseout事件↓</div>
<div id="list" class="hide">
<div class="item1">第一行</div>
<div class="item2">第二行</div>
<div class="item3">第三行</div>
</div>
</div> <script>
var ele_title=document.getElementById("title");
var ele_list=document.getElementById("list");
var ele_container=document.getElementById("container"); // 1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。 // 2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。 ele_title.onmouseover=function () {
ele_list.classList.remove("hide");
}; ele_container.onmouseout=function () {
ele_list.classList.add("hide");
}; ele_container.onmouseleave=function () {
ele_list.classList.add("hide");
}
</script> </body> </html>
前端之JavaScript 04 事件 （未全）的更多相关文章
- 前端之JavaScript基础
前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...
- 第三篇：web之前端之JavaScript基础
前端之JavaScript基础 前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript ...
- 互联网公司前端初级Javascript面试题
互联网公司前端初级Javascript面试题 1.JavaScript是一门什么样的语言,它有哪些特点?(简述javascript语言的特点)JavaScript是一种基于对象(Object)和事件驱 ...
- JavaScript系列----事件机制
1.事件流 1.1.标准事件流 所谓的标准事件流指的的:EMCAScript标准规定事件流包含三个阶段,分别为事件捕获阶段,处于目标阶段,事件冒泡阶段. 下面是一段html代码,根据代码来说明标准事件 ...
- 前端(3)JavaScript
前端(3)JavaScript JavaScript概述 1ECMAScript和JavaScript的关系: 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaS ...
- 第三章、前端之JavaScript
目录 第三章.前端之JavaScript 一.javaScript的引入方式 二.JavaScript语言的规范 三.语言基础 变量声明 四.数据类型 五.流程控制 六.函数 函数的argument ...
- 第十一章 前端开发-JavaScript
第十一章 前端开发-JavaScript 11.3.1 js引入方式 行内样式 <p id="" class="" style="" ...
- 对javascript EventLoop事件循环机制不一样的理解
前置知识点: 浏览器原理,浏览器内核5种线程及协作,JS引擎单线程设计推荐阅读: 从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理 [FE]浏览器渲染引擎「内核」 js异步编程,Promise ...
- javascript通用事件封装
随着最近几年Html5的兴起,越来越多的应用采用html5进行实现,一个优秀的网页应用不但需要美观简洁的UI界面,更需要一个良好的交互.网页应用大部分的交互需要用javascript事件进行实现.虽然 ...
随机推荐
- 笔记-mysql 导出查询结果
语法: The SELECT ... INTO OUTFILE 'file_name' [options] form of SELECT writes the selected rows to a f ...
- pt-osc测试
pt-osc测试 1.原表必须存在主键 PRIMARY KEY 或者 UNIQUE KEY The new table `darren`.`_t_user_new` does not have a P ...
- CSS3：布局display属性的flex（弹性布局）
CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...
- kali 源设置sources.list
由于阿里源有些问题,可能我设置的问题,所以就去掉了,163的很快 # deb cdrom:[Debian GNU/Linux 2016.1 _Kali-rolling_ - Official Snap ...
- 利用SSH协议在Windows下使用PuTTY连接Ubuntu
利用SSH协议在Windows下使用PuTTY连接Ubuntu Ubuntu部分 首先我们要为Ubuntu配置一下环境,让它支持ssh服务,我们要做的其实也很简单,就一下两步: 安装OpenSSH软件 ...
- 【转】React Native中ES5 ES6写法对照
很多React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教程和例子都是 ...
- COS-2OS结构和硬件支持
操作系统(Operating System,简称OS),是电子计算机系统中负责支撑应用程序运行环境以及用户操作环境的系统软件,同时也是计算机系统的核心与基石.它的职责常包括对硬件的直接监管.对各种计算 ...
- yum安装mysql后root用户的临时密码
1.查看root用户临时随机密码 yum 安装mysql后,无法通过空密码登录数据库,如下: [root@ mysql]# mysql -u root -p Enter password: ERROR ...
- JNIjw04
1.VC6(CPP)的DLL代码: #include<stdio.h> #include "jniZ_JNIjw04.h" #include <string> ...
- FTP的安装配置使用
///////////////////////////////FTP///////////////////////////////////////////////////写在前面:在linux 环境下 ...