第一节
浏览器的默认行为
提交表单的时候，浏览器会根据action属性进行跳转，这个动作就是“浏览器的默认动作”
常见的默认行为
链接<a href="/index.php">点我</a> 往属性href指定的地址跳转
提交按钮<input type=”submit”> 往form表单属性action指定的地址跳转
通过事件对象阻止默认行为.
通用方法:
e.preventDefault();
说明：preventDefault是事件对象Event的一个方法，作用是取消一个目标元素的默认行为。如果元素没有默认行为，调用无效。
IE则是使用：
e.returnValue = false;
也可以用 return false;不仅返回值也会停止代码向下执行
阻止默认行为的函数封装
function stopDefault(event) {
var e = event || window.event;
if (e.preventDefault){
e.preventDefault(); // 标准浏览器
}else{
e.returnValue = false; // IE浏览器
}
}
例1:阻止a标签的跳转行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
</style>
</head>
<body>
<a href="demo.html" id="form">点击跳转</a>
<script>
var fo = document.getElementById('form');
fo.onclick = stopDefault;
function stopDefault(evnet){
var e = event || window.event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
}
</script>
</body>
</html>
例2:阻止表单的提交行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
</style>
</head>
<body>
<form action="come.html" id="form">
<input type="text" name="">
<input type="submit" value="提交">
</form>
<script>
var fo = document.getElementById('form');
fo.onsubmit = stopDefault;
function stopDefault(evnet){
var e = event || window.event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
}
</script>
</body>
</html>
事件的监听器[掌握]
事件就是用户或者浏览器自身执行某种动作，比如click、load、mouseover。
而响应某个事件的函数就叫做事件处理程序（事件监听器），
DOM0级事件处理程序的名字以on开头，click=>onclick、load=>onload,change=onChange
DOM2级事件
ie6、7、8
添加DOM2级：节点对象.attachEvent（事件类型，事件处理）
取消DOM2级：节点对象.detachEvent（事件类型，事件处理）
主流浏览器
添加DOM2级：节点对象.addEventListener（事件类型，事件处理，[事件流]）
取消DOM2级：节点对象.removeEventListener（事件类型，事件处理，[事件流]）
事件流指从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序,主要是冒泡和捕获.
脚下留心
ie6、7、8事件类型需要“on”，主流浏览器不需要“on”
如果设置事件时，明确知道该事件需要取消，这时候只能写有名函数
设置事件和取消事件的格式必须一一对应
例1:设置和取消DOM2级事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>
不吃苦中苦,难成人上人.
</p>
<input type="button" value="取消事件" onclick="reFn()" >
<script>
// DOM2级事件
var pObj = document.querySelector('p');
// 主流浏览器要去掉on
pObj.addEventListener('click',addFn)
function addFn(){
alert('DOM2级事件绑定上了')
}
// 取消DOM2级事件
function reFn(){
pObj.removeEventListener('click',addFn)
}
</script>
</body>
</html>
例2:使用DOM0和DOM2的三种凡是分别同时设置3个事件,查看效果
DOM0级动态绑定事件
通过DOM0级添加同类型的事件，只能是最后一个事件处理起作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="one">回眸一笑百媚生</div>
<br />
<div id="two">六宫粉黛无颜色</div>
<script>
// 给id=one绑定三个dmo0级事件
var oneObj = document.querySelector('#one');
oneObj.onclick =function(){
alert('DOM1第一次');
}
oneObj.onclick =function(){
alert('DOM1第二次');
}
oneObj.onclick =function(){
alert('DOM1第三次');
}
// 给id=two绑定三个dom2级事件
var twoObj = document.querySelector('#two');
twoObj.addEventListener('click',fn1);
twoObj.addEventListener('click',fn2);
twoObj.addEventListener('click',fn3);
function fn1(){
alert('DOM2第一次')
}
function fn2(){
alert('DOM2第二次')
}
function fn3(){
alert('DOM2第三次')
}
// 总结:使用DOM1级绑定三个相同事件,只有最后一个触发,前面被覆盖了
// DOM2级绑定的三个事件,则会依次出发
</script>
</body>
</html>
DOM2级事件
DOM2级事件好处
DOM2级事件给设置多个同类型的事件.
DOM2级事件可以处理事件流.
DOM2级事件的函数封装
function addEvent(obj,inci,back){
if(obj.addEventListener){
obj.addEventListener(inci,back);
}else if(obj.attachEvent){
obj.attachEvent("on" + inci,back);
}else{
obj["on"+inci] = back;
}
}
function removeEvent(obj,inci,back){
if(obj.removeEventListener){
obj.removeEventListener(inci,back,false);
}else if(obj.detachEvent){
obj.detachEvent("on" + inci,back);
}else{
obj["on"+inci] = null;
}
}
事件流(了解)
事件捕获:不太具体的节点应该更早的接收到事件，而最具体的节点，应该最后接收到事件
三种状态：
事件冒泡
事件捕获
目标阶段
捕获型（从外向里）.先执行
冒泡型（从里向外),后执行
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ctaszaGH-1662550160324)(/1589534610013.png)]
第二节:练习与应用
1．掌握兼容问题
<!docEventType html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function(){
var EventUtil={
addHandler:function(DOM,EventType,fn){
if(DOM.addEventListener){
DOM.addEventListener(EventType,fn,false);
}else if(DOM.attachEvent){
DOM.attachEvent('on'+EventType,fn)
}else{
DOM['on'+EventType]=fn
}
},
removeHandler:function(DOM,EventType,fn){
if(DOM.removeEventListener){
DOM.removeEventListener(EventType,fn,false)
}else if(DOM.detachEvent){
DOM.detachEvent('on'+EventType,fn)
}else{
DOM['on'+EventType]=null;
}
}
}
var oDiv=document.getElementById('div');
var fnAlert=function(){
alert(1)
}
EventUtil.addHandler(oDiv,'click',fnAlert);
EventUtil.removeHandler(oDiv,'click',fnAlert)
}
</script>
</head>
<body>
<div id="div">123</div>
</body>
</html>
2．自定义右键菜单
oncontextmenu 事件在元素中用户右击鼠标时触发
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul{width: 100px;height: 500px;background: #eee;border: solid 1px #ccc;display: none;position: absolute;margin: 0;}
</style>
</head>
<body>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</body>
<script type="text/javascript">
var oul = document.querySelector("ul")
document.oncontextmenu = function(eve){
// console.log(1)
var e = eve || window.event;
oul.style.display = "block"
oul.style.left = e.clientX + "px";
oul.style.top = e.clientY + "px";
stopDefault(e)
// return false;
}
function stopDefault(e){
if(e.preventDefault){
e.preventDefault()
}else{
e.returnValue = false
}
}
document.onclick = function(){
oul.style.display = "none";
}
</script>
</html>
第三讲:
事件委托机制[掌握]
场景
有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。
原理
事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件.
这里用父级ul做事件处理，当li被点击时，由于冒泡原理，事件就会冒泡到ul上，因为ul上有点击事件，所以事件就会触发，当然，这里当点击ul的时候，也是会触发的，那么问题就来了，如果我想让事件代理的效果跟直接给节点的事件效果一样怎么办，比如说只有点击li才会触发，不怕，我们有绝招：
好处:减少对DOM的操作.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VuO9Ynbt-1662550160325)(/1568686645101.png)]
实现方法
Event对象提供了一个属性叫target，可以返回事件的目标节点，我们成为事件源，也就是说，target就可以表示为当前的事件操作的dom.当前点击的dom
用法:
window.onload = function(){
var oUl = document.getElementById("ul1");
oUl.onclick = function(ev){
var ev = ev || window.event;
// 获取当前点击的标签
var target = ev.target || ev.srcElement;
console.log(target)
console.log(target.nodeName)
// 获取标签的名字
if(target.nodeName.toLowerCase() == 'li'){
alert(123);
alert(target.innerHTML);
}
}
}
例:点击某一个 Li 标签时，将 Li 的背景色显示在 P 标签内，并将 P 标签中的文字颜色设置成 Li 的背景色
HTML代码
<ul class="palette">
<li style="background-color: red">111</li>
<li style="background-color:blue">222</li>
<li style="background-color:yellow">333</li>
<li style="background-color:black">444</li>
</ul>
<p class="color">11222</p>
传统实现方式
// 传统方法实现绑定事件
var list = document.querySelectorAll("li");
for (var i = 0, len = list.length; i < len; i++) {
list[i].onclick = function(e) {
var t = e.target;
var c = t.style.backgroundColor;
var p = document.getElementsByClassName("color")[0];
p.innerHTML = c;
p.style.color = c;
}
}
使用事件委托机制
var ulist = document.getElementsByClassName('palette')[0];
ulist.onclick = function(event){
var ev = event || window.event;
// 返回当前真正点击的节点
var target = ev.target || ev.srcElement;
//console.log(target);
//根据节点名称判断当前点击的是否为Li
if(target.nodeName.toLowerCase()=='li'){
// 获取li的背景颜色
var c= target.style.backgroundColor;
//获取p标签
var p=document.getElementsByClassName('color')[0];
p.innerHTML = c;
p.style.color = c;
}
// console.log()
}
因为把事件绑定到了父节点上，因此省了绑定事件。就算后面新增的子节点也有了相关事件，删除部分子节点不用去销毁对应节点上绑定的事件
父节点是通过event.target来找对应的子节点的。（事件处理程序中的this值始终等于currentTarget的值，指向的是绑定到的那个元素）
拖拽效果
onmousedown/onmousemove/onmouseup
步骤分析
拖拽分解：
按下鼠标 ----> 移动鼠标 ----> 松开鼠标
1.给目标元素添加onmousedown事件，拖拽的前提是在目标元素按下鼠标左键
2.当onmousedown发生以后，此刻给document添加onmousemove事件，意味着此刻鼠标在网页的移动都将改变目标元素的位置
3.在onmousemove事件中，设定目标元素的left和top，
公式
目标元素的left = 鼠标的clientX – （鼠标和元素的横坐标差，即offsetX）
目标元素的top = 鼠标的clientY– （鼠标和元素的纵坐标差，即offsetY）
4.当onmousedown发生以后，此刻给document添加onmouseup事件，意味着此刻鼠标在网页的任意位置松开鼠标，都会放弃拖拽的效果
在onmouseup事件中，取消document的onmousemove事件即可。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b0rO0YSu-1662550160326)(/1568705196482.png)]
例:div元素的拖拽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{width: 100px;height: 100px;background: red;position: absolute;left: 0;top: 0;}
</style>
</head>
<body>
<div id="box">hello world</div>
</body>
<script type="text/javascript">
var obox = document.getElementById("box")
// documentElement 返回根节点
var clientW = document.documentElement.clientWidth
var clientH = document.documentElement.clientHeight
obox.onmousedown = function(eve){
var e = eve || window.event;
// 鼠标按下的一瞬间获取到,鼠标在当前元素身上的坐标
var disX = e.offsetX;// 相对于容器的横坐标
var disY = e.offsetY;
document.onmousemove = function(eve){
var e = eve || window.event;
// 移动的时候,计算left和top
var l = e.clientX - disX; // clientX 鼠标指针的位置
var t = e.clientY - disY;
// 边界限定
if(t<0) t=0;
if(l<0) l=0;
if(l>clientW - obox.offsetWidth) l=clientW - obox.offsetWidth
if(t>clientH - obox.offsetHeight) t=clientH - obox.offsetHeight
// 生效位置
obox.style.left = l + "px";
obox.style.top = t + "px";
}
// 抬起的时候,清除事件
document.onmouseup = function(){
document.onmousemove = document.onmouseup = null;
}
// 默认阻止选中拖块的字
if(e.preventDefault){
e.preventDefault()
}else{
e.returnValue = false
}
}
</script>
</html>
鼠标滚轮事件(了解)
onwheel 事件在鼠标滚轮在元素上下滚动时触发
以前的叫法:onmousewheel
e.wheelDelta //IE/Opera/Chrome
滚轮往上走就是:150
滚轮往下走就是-150
Firefox DOMMouseScroll 必须用addEventListener来实现绑定
evnet.detail
滚轮往上走:就是-3
滚轮往下走:就是3
<body>
<p>
<label for="wheelDelta"> 滚动值:</label>(IE/Opera)
<input type="text" id="wheelDelta" />
</p>
<p>
<label for="detail"> 滚动值:(Firefox)</label>
<input type="text" id="detail" />
</p>
<script type="text/javascript">
var scrollFunc = function(e) {
// e是FF的事件。window.event是chrome/ie/opera的事件
var ee = e || window.event;
// console.log(ee); //可以看看ee.wheelDelta和e.detail在浏览器中的值；
var t1 = document.getElementById("wheelDelta");
var t2 = document.getElementById("detail");
if(ee.wheelDelta) { //IE/Opera/Chrome
t1.value = ee.wheelDelta;
} else if(ee.detail) { //Firefox
t2.value = ee.detail;
}
}
/*注册事件*/
if(document.addEventListener) {
//W3C FF
document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
//IE/Opera/Chrome/Safari
window.onwheel = document.onwheel = scrollFunc;
</script>
</html>
练习与应用
2．登录窗口的拖拽
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.login-header {
width: 100%;
text-align: center;
height: 30px;
font-size: 24px;
line-height: 30px;
}
ul,
li,
ol,
dl,
dt,
dd,
div,
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
a {
padding: 0px;
margin: 0px;
}
.login {
width: 512px;
height: 280px;
position: absolute;
border: #ebebeb solid 1px;
left: 50%;
right: 50%;
background: #ffffff;
box-shadow: 0px 0px 20px #ddd;
z-index: 9999;
left: 500px;
top: 140px;
display: none;
}
.login-title {
width: 100%;
margin: 10px 0px 0px 0px;
text-align: center;
line-height: 40px;
height: 40px;
font-size: 18px;
position: relative;
cursor: move;
-moz-user-select: none;
/*火狐*/
-webkit-user-select: none;
/*webkit浏览器*/
-ms-user-select: none;
/*IE10*/
-khtml-user-select: none;
/*早期浏览器*/
user-select: none;
}
.login-input-content {
margin-top: 20px;
-moz-user-select: none;
/*火狐*/
-webkit-user-select: none;
/*webkit浏览器*/
-ms-user-select: none;
/*IE10*/
-khtml-user-select: none;
/*早期浏览器*/
user-select: none;
}
.login-button {
width: 50%;
margin: 30px auto 0px auto;
line-height: 40px;
font-size: 14px;
border: #ebebeb 1px solid;
text-align: center;
-moz-user-select: none;
/*火狐*/
-webkit-user-select: none;
/*webkit浏览器*/
-ms-user-select: none;
/*IE10*/
-khtml-user-select: none;
/*早期浏览器*/
user-select: none;
}
.login-bg {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background: #000000;
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
display: none;
}
a {
text-decoration: none;
color: #000000;
}
.login-button a {
display: block;
}
.login-input input.list-input {
float: left;
line-height: 35px;
height: 35px;
width: 350px;
border: #ebebeb 1px solid;
text-indent: 5px;
}
.login-input {
overflow: hidden;
margin: 0px 0px 20px 0px;
}
.login-input label {
float: left;
width: 90px;
padding-right: 10px;
text-align: right;
line-height: 35px;
height: 35px;
font-size: 14px;
}
.login-title span {
position: absolute;
font-size: 12px;
right: -20px;
top: -30px;
background: #ffffff;
border: #ebebeb solid 1px;
width: 40px;
height: 40px;
border-radius: 20px;
}
</style>
</head>
<body>
<div class="login-header">
<!--如果a的href属性值中.协议名是javascript. 那么点击a标签的时候,就会执行:后面的代码-->
<a id="link" href="javascript:;">点击，弹出登录框</a>
</div>
<div id="login" class="login">
<div id="title" class="login-title">登录会员
<span>
<a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a>
</span>
</div>
<div class="login-input-content">
<div class="login-input">
<label>用户名：</label>
<input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
</div>
<div class="login-input">
<label>登录密码：</label>
<input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
</div>
</div>
<div id="loginBtn" class="login-button">
<a href="javascript:void(0);" id="login-button-submit">登录会员</a>
</div>
</div>
<!-- 遮盖层 -->
<div id="bg" class="login-bg"></div>
</body>
</html>
<script>
// 1 获取节点
var loginObj = document.getElementById('login');
var bgObj = document.getElementById('bg');
var titleObj = document.getElementById('title');
var aObj = document.getElementById('link');
// 获取屏幕的宽度和高度
var cliW = document.documentElement.clientWidth;
var cliH = document.documentElement.clientHeight;
// 2 点击登陆时,设置登录框和遮罩层的样式
aObj.onclick = function(){
loginObj.style.display = 'block';
bgObj.style.display = 'block';
}
// 3 给登录框的头部,绑定鼠标按下事件
titleObj.onmousedown = function(event){
var e = event || window.event;
// 4 获取鼠标在元素中位置,方便后续计算登录框的位置
var loginMX = e.offsetX;
var loginMY = e.offsetY;
// 5 给documen绑定移动事件
document.onmousemove = function(eve){
var ee = eve || window.event;
// 6 获取实时的鼠标的位置
var mouTmpX = ee.clientX;
var mouTmpY = ee.clientY;
// 7 计算并且判断,登录框的位置值
var loginPosL = mouTmpX-loginMX;
var loginPosT = mouTmpY - loginMY;
/********设置边界问题************/
// 宽度的设置
if(loginPosL<0){ //最小值判断
loginPosL =0;
}
// 最大的宽度值,屏幕宽-div的宽
var maxW = cliW-titleObj.offsetWidth-21;
if(loginPosL>maxW){ // 判断最大值
loginPosL = maxW;
}
//高度的设置,注意关闭按钮的操作
if(loginPosT<21) loginPosT=21;
//计算最大高度
var maxH = cliH-loginObj.offsetHeight;
if(loginPosT>maxH) loginPosT = maxH;
// 8 设置登录框的位置
loginObj.style.top = loginPosT+'px';
loginObj.style.left = loginPosL+'px';
}
}
// 当鼠标弹起时,清除document上的移动事件
// 这样如果鼠标除了titleObj,再松开,就不能监听到up事件
// titleObj.onmouseup = function(){
// document.onmousemove = null;
// }
// 在页面中,任何地方松开,都可以检测到
document.onmouseup = function(){
document.onmousemove = null;
}
</script>
3．**扩展案例：**拖拽轨迹回放
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0035)http://fgm.cc/learn/lesson6/01.html -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>完美拖拽</title>
<style type="text/css">
html,
body {
overflow: hidden;
}
body,
div,
h2,
p {
margin: 0;
padding: 0;
}
body {
color: #fff;
background: #000;
font: 12px/2 Arial;
}
p {
padding: 0 10px;
margin-top: 10px;
}
span {
color: #ff0;
padding-left: 5px;
}
#box {
position: absolute;
width: 300px;
height: 150px;
background: #333;
border: 2px solid #ccc;
top: 50%;
left: 50%;
margin: -75px 0 0 -150px;
}
#box h2 {
height: 25px;
cursor: move;
background: #222;
border-bottom: 2px solid #ccc;
text-align: right;
padding: 0 10px;
}
#box h2 a {
color: #fff;
font: 12px/25px Arial;
text-decoration: none;
outline: none;
}
</style>
<script type="text/javascript">
window.onload = function () {
var positionArray = [];
var box = document.getElementById("box");
box.onmousedown = function (evt) {
positionArray = [];
var x = evt.offsetX;
var y = evt.offsetY;
document.onmousemove = function (evt) {
box.style.left = evt.clientX - x + "px";
box.style.top = evt.clientY - y + "px";
//console.log({ left: box.offsetLeft, top: box.offsetTop })
positionArray.push({ left: box.offsetLeft, top: box.offsetTop });
}
}
box.onmouseup = function () {
document.onmousemove = null;
console.log(positionArray);
}
// 冒泡:触发父级元素的同类型事件
// 给a标签绑定mousedown,阻止其冒泡到div上
box.children[0].firstElementChild.onmousedown = function (e) {
var eve = e || window.event;
eve.stopPropagation();
}
box.children[0].firstElementChild.onclick = function (eve) {
var e = eve || window.event;
e.stopPropagation();
// console.log(1111);
var index = positionArray.length - 1;
console.log(positionArray);
var timer = setInterval(function () {
if (index < 0) {
clearInterval(timer);
return;
}
box.style.left = positionArray[index--].left + "px";
box.style.top = positionArray[index--].top + "px";
}, 30);
}
};
</script>
</head>
<body>
<div id="box" style="margin-left: 0px; margin-top: 0px; left: 533px; top: 231px;">
<h2>
<a href="javascript:;">点击回放拖动轨迹</a>
</h2>
<p>
<strong>Drag:</strong>
<span>false</span>
</p>
<p>
<strong>offsetTop:</strong>
<span>231</span>
</p>
<p>
<strong>offsetLeft:</strong>
<span>533</span>
</p>
</div>
</body>
</html>
More
表达重复提交
web表单常见的问题就是用户常常两次点击提交按钮,在设计扣款的情况下这是很严重的问题.
可以通过监听submit事件,在第一次提交后仅用提交按钮
<form action="" method="post" name="form2" >
<input type="text" name="pwd" id="" value="" />
<input type="text" name="user" id="" value="" />
<input type="submit" name="sub-btn" value=" 提交" />
</form>
<script type="text/javascript">
// console.log(document.forms[0]);
// function fn(eve){
// var e = eve || window.event;
// }
document.forms[0].addEventListener('submit',eve=>{
eve.preventDefault();
var btn = eve.target.elements['sub-btn'];
btn.disabled = true;
})
作业:
1 实现元素的拖拽
tyle=“margin-left: 0px; margin-top: 0px; left: 533px; top: 231px;”>
点击回放拖动轨迹
Drag:
false
offsetTop:
231
offsetLeft:
533
More
表达重复提交
web表单常见的问题就是用户常常两次点击提交按钮,在设计扣款的情况下这是很严重的问题.
可以通过监听submit事件,在第一次提交后仅用提交按钮
<form action="" method="post" name="form2" >
<input type="text" name="pwd" id="" value="" />
<input type="text" name="user" id="" value="" />
<input type="submit" name="sub-btn" value=" 提交" />
</form>
<script type="text/javascript">
// console.log(document.forms[0]);
// function fn(eve){
// var e = eve || window.event;
// }
document.forms[0].addEventListener('submit',eve=>{
eve.preventDefault();
var btn = eve.target.elements['sub-btn'];
btn.disabled = true;
})
作业:
1 实现元素的拖拽
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
