分享常用的冒泡处理：事件冒泡与事件委托 \实例演示表单常用事件与默认行为禁用方式。
一、实例演示事件冒泡与事件委托
1.事件冒泡
事件由内向外,逐级向上传递,直到根元素
事件冒泡可以被禁用:ev.stopPropagation()
<body>
<!-- 事件冒泡 -->
<div>
<button>点击</button>
</div>
<script>
/* 事件冒泡
子级触发事件，父级同名事件触发执行
每个上级都有同名事件，事件从子级触发后会一级一级向上传递并触发
*/
document.querySelector("button").onclick = function () {
// console.log(this)
console.log("1:" + this.tagName)
}
document.querySelector("div").onclick = function () {
// console.log(this)
console.log("2:" + this.tagName)
}
document.body.onclick = function () {
// console.log(this)
console.log("3:" + this.tagName)
}
document.documentElement.onclick = function () {
// console.log(this)
console.log("4:" + this.tagName)
}
/*
1:BUTTON
2:DIV
3:BODY
4:HTML
*/
</script>
</body>2.事件委托
事件主体：
子级上的事件，会自动传递到低级上的同名事件：冒泡
所有可以将原来需要添加到子级元素上的事件，直接委托到父级元素上执行
有2部分组成—父子关系
1.事件绑定主体:被添加了事件属性的元素 <ul> ` this=== ev.currentTarget` 2.事件触发的主体:用户实际点击的元素<li> ` ev.target`
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
<script>
/* 实现的功能：
单击li元素，显示出当前点击li的内容
*/
/* const li = document.querySelectorAll("li")
li.forEach(function (item) {
item.onclick = function () {
console.log(item.textContent)
}
}) */
/* 根据事件冒泡原理，li.onclick 必然会在ul.onclick上触发
ev：表示事件对象
事件对象参数：要么传“事件对象”，要么不要传参数
*/
const ul = document.querySelector("ul")
ul.onclick = function (ev) {
console.log(ev.target.textContent)
console.log(ev.currentTarget === this) //true
console.log(ev.currentTarget)
console.log(this)
}
// 事件委托:事件主体不是主体元素
/*
事件主体：有2部分组成
1。事件绑定主体:被添加了事件属性的元素 <ul>
this=== ev.currentTarget
2。事件触发的主体:用户实际点击的元素<li>
ev.target
*/
</script>
</body>二、实例演示表单常用事件与默认行为禁用方式
5.1 常用事件
submit: 提交
focus: 焦点
blur: 失去焦点
change: 值改变,且失去焦点时
input: 值一旦改变就触发, 不等失去焦点
5.2 禁用表单默认提交行为的 3 种方法
form.onsubmit = 'return false'form.button.type = 'button'event.preventDefault():禁用默认行为
<body>
<!-- 禁用表单提交的方式：
1. 在form 元素添加onsubmit事件属性禁止提交 onsubmit="return false" -->
<!-- <form action="login.php" method="post" id="login" onsubmit="return false"> -->
<form action="login.php" method="post" id="login">
<label class="title">用户登录 </label>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" value="" autofocus />
<label for="password">密码：</label>
<input type="password" id="password" name="password" value="" />
<!-- 2. 在button 按钮的type默认属性修改成 button，也能禁用表单的提交行为 -->
<button type="submit">登录</button>
<!-- <button type="button">登录</button> -->
</form>
<script>
/* //submit事件：默认提交进执行
3. 通过添加事件方法来 禁止提交表单 事件方法可用前面的事件属性表示 */
/* const form = document.forms.login
form.onsubmit = function () {
// alert("上传")
return false
} */
/*
禁用表单提交行为，是为了用户自定义提交行为
4.禁用默认行为： ev.preventDefault()
*/
document.forms.login.onsubmit = function (ev) {
//禁用默认行为
ev.preventDefault()
//禁用冒泡
ev.stopPropagation()
//当表单事件的默认行为被禁用后， this===ev.target===ev.currentTarget
console.log(this)
console.log(ev.target)
console.log(ev.currentTarget)
//表单中的任何一个控件，都有一个form属性，永远和当前表单元素绑定
console.log(ev.currentTarget.email)
//禁用默认提交行为后，我们可以对表单控件的内容进行验证操作
//获取到email
const email = this.email.value
//获取 password
const password = this.password.value
// 对 email和password非空验证
if (email.length === 0) {
alert("邮箱不能为空！")
return false
} else if (password.length === 0) {
alert("密码不能为空！")
return false
}
}
</script>
</body>8/12复习了表单事件
在表单中的任何元素中，都有一个form属性，通过这个属性可以获取表单中的任何元素
`event.preventDefault()`禁用默认行为是为了自定义行为。
`event`已经被废弃，通常都是通过传参的方式来做
document.form.login.onsubmit=function(){
event.preventDefault();
}
============
document.form.login.onsubmit=function(ev){
ev.preventDefault();
}
网友评论文明上网理性发言 已有0人参与
发表评论: