当前位置：网站首页>JS中表单操作、addEventListener事件监听器
JS中表单操作、addEventListener事件监听器
2022-08-09 22:05:00 【可可鸭~】
一、知识点1:
༼ つ ◕_◕ ༽つaddEventListener事件监听器
从菜鸟教程
HTML DOM addEventListener() 方法
document.getElementById("myBtn").addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
});
语法
//[]代表选传参数
element.addEventListener(event, function, [useCapture]) //useCapture 默认为false就是冒泡.true 事件捕获阶段
useCapture是可选参数，默认值为false,它代表：控制监听器是在捕获阶段执行还是在冒泡阶段执行，通常我们都没传递第三个参数（传 true 的情况太少了）。目前DOM 规范做了修订：addEventListener() 的第三个参数可以是个对象值了，也就是说第三个参数现在可以是两种类型的值了：
addEventListener(type, listener,[ useCapture ])
addEventListener(type, listener,[ options ])
第三参数为对象值的情况，目前规范中 options 对象可用的属性有三个：
document.addEventListener(type, fn, {
capture: false,
passive: false,
once: false
})
参数值
event事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Event.type Example</title>
<script>
var currEvent = null;
function getEvtType(evt) {
console.log("//Start------------getEvtType(evt)------------ ");
currEvent = evt.type;
console.log(currEvent);
//document.getElementById("Etype").firstChild.nodeValue = currEvent;
document.getElementById("Etype").innerHTML = currEvent;
console.log("//End--------------getEvtType(evt)------------ ");
}
//Keyboard events
document.addEventListener("keypress", getEvtType, false); //[second]
document.addEventListener("keydown", getEvtType, false); //first
document.addEventListener("keyup", getEvtType, false); //third
//Mouse events
document.addEventListener("click", getEvtType, false); // third
document.addEventListener("mousedown", getEvtType, false); //first
document.addEventListener("mouseup", getEvtType, false); //second
</script>
</head>
<body>
<p>Press any key or click the mouse to get the event type.</p>
<p>Event type: <span id="Etype" style="color:red">-</span></p>
</body>
</html>
冒泡阶段
由子元素向父元素执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<style>
.capture_1 {
width: 200px;
height: 200px;
background-color: pink;
}
.capture_2 {
width: 150px;
height: 150px;
background-color: rgb(88, 174, 224);
}
.capture_3 {
width: 100px;
height: 100px;
background-color: rgb(58, 216, 105);
}
.capture_4 {
width: 50px;
height: 50px;
background-color: rgb(241, 38, 38);
}
</style>
<div class="capture_1" id="capture_1">
1
<div class="capture_2" id="capture_2">
2
<div class="capture_3" id="capture_3">
3
<div class="capture_4" id="capture_4">4</div>
</div>
</div>
</div>
<script>
var fang1 = document.getElementById("capture_1");
var fang2 = document.getElementById("capture_2");
var fang3 = document.getElementById("capture_3");
var fang4 = document.getElementById("capture_4");
fang1.addEventListener(
"click",
function (e) {
console.log(1);
},
false
);
fang2.addEventListener(
"click",
function (e) {
console.log(2);
},
false
);
fang3.addEventListener(
"click",
function (e) {
console.log(3);
},
false
);
fang4.addEventListener(
"click",
function (e) {
console.log(4);
},
false
);
</script>
</body>
</html>
捕获阶段
由父元素向子元素执行
当既有冒泡也有捕获
先执行捕获,也就是从父元素到子元素,然后在执行冒泡也就是子元素到父元素
//当1,3为冒泡,2,4为捕获时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<style>
.capture_1 {
width: 200px;
height: 200px;
background-color: pink;
}
.capture_2 {
width: 150px;
height: 150px;
background-color: rgb(88, 174, 224);
}
.capture_3 {
width: 100px;
height: 100px;
background-color: rgb(58, 216, 105);
}
.capture_4 {
width: 50px;
height: 50px;
background-color: rgb(241, 38, 38);
}
</style>
<div class="capture_1" id="capture_1">
1
<div class="capture_2" id="capture_2">
2
<div class="capture_3" id="capture_3">
3
<div class="capture_4" id="capture_4">4</div>
</div>
</div>
</div>
<script>
var fang1 = document.getElementById("capture_1");
var fang2 = document.getElementById("capture_2");
var fang3 = document.getElementById("capture_3");
var fang4 = document.getElementById("capture_4");
fang1.addEventListener(
"click",
function (e) {
console.log(1);
},
false
);
fang2.addEventListener(
"click",
function (e) {
console.log(2);
},
true
);
fang3.addEventListener(
"click",
function (e) {
console.log(3);
},
false
);
fang4.addEventListener(
"click",
function (e) {
console.log(4);
},
true
);
</script>
</body>
</html>
一、知识点2:
༼ つ ◕_◕ ༽つJS中表单操作
表单使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
width: 800px;
background-color: #fff;
margin: 0 auto;
padding-top: 100px;
display: flex;
flex-direction: column;
align-items: center;
}
#task-form {
width: 100%;
}
.input-filter {
width: 100%;
height: 35px;
padding-left: 10px;
border: none;
border-bottom: 1px solid rgb(150, 149, 149);
}
input:focus {
outline: none;
}
li {
list-style: none;
padding: 5px 0;
border-bottom: 1px solid #ededed;
}
.body-content {
width: 100%;
margin-top: 20px;
}
ul {
margin-top: 20px;
width: 100%;
}
a {
padding-left: 20px;
color: #039ed6;
text-decoration: none;
padding-top: 5px;
}
h5 {
padding: 5px 10px;
}
.collection-item {
display: none;
}
.btn {
width: 100px;
height: 30px;
background-color: #269b91;
border: none;
border-radius: 2px;
color: #fff;
}
.btn_2 {
border: none;
border-radius: 2px;
height: 30px;
color: #fff;
background-color: #000000;
width: 120px;
}
</style>
<body>
<div>
<div class="container">
<h2>Task List</h2>
<form action="" id="task-form">
<input
type="text"
class="input-filter"
id="newTask_1"
placeholder="New Task"
/>
<div class="body-content">
<input type="submit" class="btn" id="addBtn" value="Add Task" />
</div>
</form>
</div>
<div class="container">
<h2>Tasks</h2>
<input
type="text"
class="input-filter"
id="newTask_2"
placeholder="Filter Task"
/>
<ul id="collection"></ul>
<div class="body-content">
<button id="clearBtn" class="btn_2">CLRER TASKS</button>
</div>
</div>
</div>
<script>
//选择生成新标签输入框
const newTask = document.getElementById("newTask_1");
const addBtn = document.getElementById("addBtn");
const collection = document.querySelector("#collection");
const clearBtn = document.getElementById("clearBtn");
const from = document.querySelector("#task-form");
from.addEventListener("submit", function (e) {
e.preventDefault();
if (newTask.value == "" || newTask.value.length == 0) {
alert("Please input search term!");
} else {
const li = document.createElement("li");
li.className = "delect-item seondary-content";
li.innerText = newTask.value;
collection.appendChild(li, document.create);
}
});
</script>
</body>
</html>
多选、多选框中的全选
// 实现全选操作
function checkBoxselect(){
var fav=document.getElementsByName("fav");
for(var i=0;i<fav.length;i++){
fav[i].checked=true;
}
}
多选、多选框中的反选
// 实现反选操作
function checkBoxchange(){
var fav=document.getElementsByName("fav");
for(var i=0;i<fav.length;i++){
//=是赋值符==和===才是判断符
if(fav[i].checked){
fav[i].checked=false;
}else{
fav[i].checked=true;
}
}
}
选中当前ul里面当前的点击的li
collection.addEventListener("click",function (e) {
console.log(e.target)
})
表单操作
<html>
<head>
<title>form表单操作</title>
<meta charset="UTF-8"/>
<script type="text/javascript">
function testForm(){
// 获取form对象 方法一,通过id,比较普遍的方法
var fm=document.getElementById("fm");
alert(fm); //输出fm的类型[object HTMLFormElement]
alert(fm.length); //输出所用的表单项(表单类型参考Lgin.html)输出值为8
}
function testOper(){
var fm=document.getElementById("fm");
// 输出表单的元素
// alert(fm.elements); //显示表单元素的类型[object HTMLFormControlsCollection]
// alert(fm.elements.length); //显示表单元素的个数
// 利用表单的action属性进行访问地址的动态改变
fm.action="http://www.baidu.com";
alert(fm.action); //返回了action的值
// 利用表单的submit属性使普通的按钮也具有提交功能
// fm.submit(); //可以直接访问修改后的网址
// alert(fm.submit()); //执行了submit操作并且返回了undefined
}
function testCheck(){
// 获取checkbox的对象
var fav=document.getElementsByName("fav");//通过Id无法获取，但是通过Name
// 实现选中遍历打印操作
for(var i=0;i<fav.length;i++){
if(fav[i].checked){
alert(fav[i].value); //其中fav没有值，但是fav.value有值，无法打印fav,但是可以打印fav.value
}
}
}
// 实现全选操作
function checkBoxselect(){
var fav=document.getElementsByName("fav");
for(var i=0;i<fav.length;i++){
fav[i].checked=true;
}
}
// 实现清空选择操作
function checkBoxclear(){
var fav=document.getElementsByName("fav");
for(var i=0;i<fav.length;i++){
fav[i].checked=false;
}
}
// 实现反选操作
function checkBoxchange(){
var fav=document.getElementsByName("fav");
for(var i=0;i<fav.length;i++){
//=是赋值符==和===才是判断符
if(fav[i].checked){
fav[i].checked=false;
}else{
fav[i].checked=true;
}
}
}
function selectoper(){
// 获取单选框对象
var sel=document.getElementById("Animation");
// 获取单选框内的选项
var os=sel.options;
for(var i=0;i<os.length;i++){
if(os[i].selected){
alert(os[i].value+":"+os[i].text);
}
}
}
</script>
</head>
<body>
<h3>form表单操作</h3>
<!--添加readonly表示标签只能读，添加disabled标签表示该标签不能进行任何操作-->
<input type="button" name="" id="" value="测试form表单" onclick="testForm()" />
<input type="button" name="" id="" value="测试form表单基本操作" onclick="testOper()" />
<input type="button" name="" id="" value="测试form表单checkbox" onclick="testCheck()" />
<input type="button" name="" id="" value="测试form表单checkbox全择" onclick="checkBoxselect()" />
<input type="button" name="" id="" value="测试form表单checkbox清空选择" onclick="checkBoxclear()" />
<input type="button" name="" id="" value="测试form表单checkbox反选" onclick="checkBoxchange()" />
<input type="button" name="" id="" value="测试form表单select操作" onclick="selectoper()" />
<hr />
<form action="#" method="get" id="fm" name="frm" target="_blank">
<b>用户名</b><input type="text" name="wd" id="" value="" disabled="disabled" /><br /><br />
<b>密码</b><input type="password" name="pwd" id="" value="" readonly="readonly"/><br />
<br />
爱好 <br />
动漫<input type="checkbox" name="fav" id="fav" value="动漫" checked="false"/><br />
游戏<input type="checkbox" name="fav" id="fav" value="游戏" checked="false"/><br />
电影<input type="checkbox" name="fav" id="fav" value="电影" checked=""true/><br />
敲代码<input type="checkbox" name="fav" id="fav" value="敲代码" checked="false"/><br />
<br /><br />
<select name="" id="Animation">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
<br /><br />
<input type="submit" name="" id="" value="登录" />
</form>
</body>
</html>
单任务和多任务删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
width: 800px;
background-color: #fff;
margin: 0 auto;
padding-top: 100px;
display: flex;
flex-direction: column;
align-items: center;
}
#task-form {
width: 100%;
}
.input-filter {
width: 100%;
height: 35px;
padding-left: 10px;
border: none;
border-bottom: 1px solid rgb(150, 149, 149);
}
input:focus {
outline: none;
}
li {
list-style: none;
padding: 5px 0;
border-bottom: 1px solid #ededed;
}
.body-content {
width: 100%;
margin-top: 20px;
}
ul {
margin-top: 20px;
width: 100%;
position: relative;;
}
a {
padding-left: 20px;
color: #039ed6;
text-decoration: none;
padding-top: 5px;
}
h5 {
padding: 5px 10px;
}
.collection-item {
display: none;
}
.btn {
width: 100px;
height: 30px;
background-color: #269b91;
border: none;
border-radius: 2px;
color: #fff;
}
.btn_2 {
border: none;
border-radius: 2px;
height: 30px;
color: #fff;
background-color: #000000;
width: 120px;
}
.fa{
position: absolute;
right: 20px;
width: 40px;
color: rgb(255, 0, 0);
}
</style>
<body>
<div>
<div class="container">
<h2>Task List</h2>
<form action="" id="task-form">
<input
type="text"
class="input-filter"
id="newTask_1"
placeholder="New Task"
/>
<div class="body-content">
<input type="submit" class="btn" id="addBtn" value="Add Task" />
</div>
</form>
</div>
<div class="container">
<h2>Tasks</h2>
<input
type="text"
class="input-filter"
id="newTask_2"
placeholder="Filter Task"
/>
<ul id="collection"></ul>
<div class="body-content">
<button id="clearBtn" class="btn_2">CLRER TASKS</button>
</div>
</div>
</div>
<script>
//选择生成新标签输入框
const newTask = document.getElementById("newTask_1");
const addBtn = document.getElementById("addBtn");
const collection = document.querySelector("#collection");
const clearBtn = document.getElementById("clearBtn");
const from = document.querySelector("#task-form");
from.addEventListener("submit", function (e) {
e.preventDefault();
if (newTask.value == "" || newTask.value.length == 0) {
alert("Please input search term!");
} else {
const li = document.createElement("li");
li.innerText = newTask.value;
//创建a标签样式
const link = document.createElement("a");
//添加字体图标
link.innerHTML = '<i class="fa fa-times">X</i>';
//添加a标签类名
link.className = "delect-item seondary-content";
//将a标签插入到ul中
li.appendChild(link);
//将li插入到ul中
collection.appendChild(li);
}
});
//
collection.addEventListener("click",function (e) {
console.log(e.target)
if(e.target.parentElement.classList.contains("delect-item")){
e.target.parentElement.parentElement.remove();
}
});
//清除任务按钮
clearBtn.addEventListener("click", function (e) {
//判断任务表中是否有任务
if (collection.getElementsByTagName("li").length > 0) {
//方法一
// collection.innerHTML = "";
//方法二
while(collection.firstChild){
collection.removeChild(collection.firstChild)
}
} else {
alert("暂存任务为0,请添加任务");
}
});
</script>
</body>
</html>
本地存储
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
width: 800px;
background-color: #fff;
margin: 0 auto;
padding-top: 100px;
display: flex;
flex-direction: column;
align-items: center;
}
#task-form {
width: 100%;
}
.input-filter {
width: 100%;
height: 35px;
padding-left: 10px;
border: none;
border-bottom: 1px solid rgb(150, 149, 149);
}
input:focus {
outline: none;
}
li {
list-style: none;
padding: 5px 0;
border-bottom: 1px solid #ededed;
}
.body-content {
width: 100%;
margin-top: 20px;
}
ul {
margin-top: 20px;
width: 100%;
position: relative;
}
a {
padding-left: 20px;
color: #039ed6;
text-decoration: none;
padding-top: 5px;
}
h5 {
padding: 5px 10px;
}
.collection-item {
display: none;
}
.btn {
width: 100px;
height: 30px;
background-color: #269b91;
border: none;
border-radius: 2px;
color: #fff;
}
.btn_2 {
border: none;
border-radius: 2px;
height: 30px;
color: #fff;
background-color: #000000;
width: 120px;
}
.fa {
position: absolute;
right: 20px;
width: 40px;
color: rgb(255, 0, 0);
}
</style>
<body>
<div>
<div class="container">
<h2>Task List</h2>
<form action="" id="task-form">
<input
type="text"
class="input-filter"
id="newTask_1"
placeholder="New Task"
/>
<div class="body-content">
<input type="submit" class="btn" id="addBtn" value="Add Task" />
</div>
</form>
</div>
<div class="container">
<h2>Tasks</h2>
<input
type="text"
class="input-filter"
id="newTask_2"
placeholder="Filter Task"
/>
<ul id="collection"></ul>
<div class="body-content">
<button id="clearBtn" class="btn_2">CLRER TASKS</button>
</div>
</div>
</div>
<script>
//选择生成新标签输入框
const newTask = document.getElementById("newTask_1");
const addBtn = document.getElementById("addBtn");
const collection = document.querySelector("#collection");
const clearBtn = document.getElementById("clearBtn");
const from = document.querySelector("#task-form");
//将本地任务添加到本地缓存
from.addEventListener("submit", function (e) {
e.preventDefault();
if (newTask.value == "" || newTask.value.length == 0) {
alert("Please input search term!");
} else {
const li = document.createElement("li");
li.innerText = newTask.value;
//创建a标签样式
const link = document.createElement("a");
//添加字体图标
link.innerHTML = '<i class="fa fa-times">X</i>';
//添加a标签类名
link.className = "delect-item seondary-content";
//将a标签插入到ul中
li.appendChild(link);
//将li插入到ul中
collection.appendChild(li);
storeTaskInLocalStorage(newTask.value);
}
});
//dom加载数完毕执行
document.addEventListener("DOMContentLoaded", function (e) {
let tasks;
if (localStorage.getItem("tasks") == null) {
tasks = [];
} else {
tasks = JSON.parse(localStorage.getItem("tasks"));
console.log(tasks);
tasks.forEach(function (task) {
const li = document.createElement("li");
li.innerText = task;
//创建a标签样式
const link = document.createElement("a");
//添加字体图标
link.innerHTML = '<i class="fa fa-times">X</i>';
//添加a标签类名
link.className = "delect-item seondary-content";
//将a标签插入到ul中
li.appendChild(link);
//将li插入到ul中
collection.appendChild(li);
});
}
});
collection.addEventListener("click", function (e) {
console.log(e.target);
if (e.target.parentElement.classList.contains("delect-item")) {
e.target.parentElement.parentElement.remove();
}
});
//清除任务按钮
clearBtn.addEventListener("click", function (e) {
//判断任务表中是否有任务
if (collection.getElementsByTagName("li").length > 0) {
//方法一
// collection.innerHTML = "";
//方法二
while (collection.firstChild) {
collection.removeChild(collection.firstChild);
}
} else {
alert("暂存任务为0,请添加任务");
}
localStorage.clear();
});
//filter
function filterTask(e) {
const text = e.target.value.toLowerCase();
document.querySelector(".collection").forEach(function (e) {
const item = e.firstChild.textContent;
if (item.toLowerCase().indexOf(text) != -1) {
e.style.display = "block";
} else {
e.style.display = "none";
}
});
}
//storeTaskInLocalStorage
function storeTaskInLocalStorage(task) {
let tasks;
if (localStorage.getItem("tasks") == null) {
tasks = [];
} else {
//从缓存中拿出来的是Json数据要进行解析
tasks = JSON.parse(localStorage.getItem("tasks"));
}
//将新的数据加入到缓存中
tasks.push(task);
//将数组存储在本地,将字符串数据转化成json数据
localStorage.setItem("tasks", JSON.stringify(tasks));
}
//removeTaskLocalStorage
// function removeTaskLocalStorage(taskItem){
// let tasks;
// if(localStorage.getItem("tasks") == null){
// tasks = [];
// }else{
// //从缓存中拿出来的是Json数据要进行解析
// tasks = JSON.parse(localStorage.getItem("tasks"));
// }
// tasks.forEach(function(task,index){
// if(task === taskItem){
// console.log(taskItem)
// //从index位置删除生成新数组
// tasks.splice(index,1)
// console.log(tasks)
// localStorage.setItem("tasks",JSON.stringify(tasks));
// }
// })
// }
</script>
</body>
</html>
边栏推荐
- 第十七期八股文巴拉巴拉说（数据库篇）
- charts.js插件实现的散点图样式
- 十步以内，用小程序快速生成App！
- 关于ETL的两种架构（ETL架构和ELT架构）
- R语言patchwork包将多个可视化结果组合起来、使用plot_annotation函数以及tag_level参数将组合图用大写字母进行顺序编码、为组合图的标签添加自定义前缀信息
- 你的 Link Button 能让用户选择新页面打开吗？
- 【软考 系统架构设计师】案例分析⑤ 质量属性和架构评估
- Five Star Holdings Wang Jianguo: Deepen the track with "plant spirit" and promote growth with "animal spirit"
- FileZilla搭建FTP服务器图解教程
- Users should clearly know that quantitative trading is not a simple procedure
猜你喜欢
信息系统项目管理师---第十一章项目风险管理历年考题
干涉BGP的选路---社团属性
Presto Event Listener开发
Chatting embarrassing scenes, have you encountered it?Teach you to get the Doutu emoticon package with one click, and become a chat expert
chart.js面积图曲线图统计插件
你真的了解乐观锁和悲观锁吗？
leetcode 39. 组合总和（完全背包问题）
Jinshanyun earthquake, the epicenter is in bytes?
leetcode：332. 重新安排行程
shell学习
随机推荐
Activiti7审批流
OSG笔记：使用setFontResolution设置字体分辨率
R语言修改dataframe数据列的名称：使用dplyr包的rename函数修改列名、使用colnmaes函数修改列名、在数据筛选的时候重命名列名
web 面试高频考点 —— 性能优化篇（手写防抖、手写节流、XXS攻击、XSRF攻击）
Let's talk about what DDL, DML, DQL and DCL are in SQL statements
大型分布式存储方案MinIO介绍，看完你就懂了！
继承关系下构造方法的访问特点
R语言使用mean函数计算样本（观测）数据中指定变量的相对频数：计算时间序列数据中大于前一个观测值的观测值所占的比例总体的比例
Domestic mobile phone manufacturers once fought for it, but now it is the first to collapse...
基于ABP的AppUser对象扩展
HUAWEI CLOUD escorts the whole process of "Wandering Ark" for the first time, creating a popular brand
Tencent continues to wield the "big knife" to reduce costs and increase efficiency, and free catering benefits for outsourced employees have been cut
【软考 系统架构设计师】案例分析④ 软件架构风格
（转）FreeType字体位图属性
C. Binary String Reconstruction
[Microservice~Nacos] Configuration Center of Nacos
xlrd 与 xlsxwritter 的基本操作
【TS技术课堂】时间序列预测
A1. Prefix Flip (Easy Version)
nvm下node安装；node环境变量配置