第一节
浏览器的默认行为
提交表单的时候,浏览器会根据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 实现元素的拖拽