JS之onsubmit事件与组织事件外延

on是监听的意思

阻止事件发生：1、return false　　2、e.preventDefault()适用于onsubmit

outer外部　　inner内部

event.stopPropagation()阻止事件向外层div传播

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><form action="" id="form1"><input type="text" name="username"><input type="submit" value="提交">
</form><script>var ele=document.getElementById("form1");ele.onsubmit=function (e) {
//        console.log("hello")
        alert(1234);//return false//e.preventDefault()
    }
</script></body>
</html>

View Code

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.outer{width: 300px;height: 300px;background-color: antiquewhite;}.inner{width: 100px;height: 100px;background-color: rebeccapurple;}</style>
</head>
<body><div class="outer" onclick="func2()"><div class="inner"></div>
</div><script>var ele=document.getElementsByClassName("inner")[0];ele.onclick= function (e) {alert("I am inner!");e.stopPropagation()};function func2() {alert("I am outer!")}
</script>
</body>
</html>

View Code

转载于:https://www.cnblogs.com/jintian/p/11108953.html

JS之onsubmit事件与组织事件外延相关推荐

JS事件基础（鼠标事件，键盘事件及默认行为)
JS 事件基础 Document是一个最顶级的父节点,两个子节点分别为<!DOCTYPE>和HTML. window.onload = function() { alert(documen ...
【前端】JS的BOM和DOM，事件，表单验证案例
先看小练习1:开关灯用到的Dom相关知识点 * 功能:控制html文档的内容 * 获取页面标签(元素)对象:Element* document.getElementById("id值&qu ...
事件介绍、两种事件注册的介绍、onload事件、onclick事件、onblur事件、onchange事件、onsubmit事件
事件介绍事件就是电脑输入设备与页面进行交互的响应,被称之为事件常用的事件: onload 加载完成事件:页面加载完成之后,常用于做页面js代码初始化操作 onclick ...
js mouseover 改 mouseleave 、鼠标事件
示例引用: http://www.jsfoot.com/jquery/demo/2011-09-06/170.html <script type="text/javascript& ...
onload事件、onblur事件、onchange事件、onsubmit事件举例
一.onload.加载事件 load事件什么时候发生? onload事件是浏览器解析完页面之后就会自动触发的事,页面全部元素加载完毕之后才会发生 1.以下执行是错误的,因为代码执行的时候id=&quo ...
Java Script(三)——onload事件、onclick事件、onsubmit事件、onchange事件、onblur事件
js中的事件事件是电脑输入设备与页面进行交互的响应. 常用的事件: onload 加载完成事件: 页面加载完成之后,常用于做页面 js 代码初始化操作 onclick 单击事件: 常用于按钮的点击响 ...
js绑定事件和解绑事件
在js中绑定多个事件用到的是两个方法:attachEvent和addEventListener,但是这两个方法又存在差异性 attachEvent方法只支持IE678,不兼容其他浏览器 addEv ...
后处理程序文件大小的变量_【每日一题】(17题)面试官问：JS中事件流，事件处理程序，事件对象的理解？...
关注「松宝写代码」,精选好文,每日一题作者:saucxs | songEagle 2020,实「鼠」不易 2021,「牛」转乾坤风劲潮涌当扬帆,任重道远须奋蹄! 一.前言 2020.12.23 立 ...
js中的事件委托或是事件代理详解(转载)
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...

JS之onsubmit事件与组织事件外延

JS之onsubmit事件与组织事件外延相关推荐

最新文章

热门文章