收藏
批改状态：未批改
老师批语：
事件由内向外,逐级向上传递,直到根元素
事件冒泡可以被禁用: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:BUTTON2:DIV3:BODY4:HTML*/</script></body>
事件主体：
子级上的事件，会自动传递到低级上的同名事件：冒泡
所有可以将原来需要添加到子级元素上的事件，直接委托到父级元素上执行
有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) //trueconsole.log(ev.currentTarget)console.log(this)}// 事件委托:事件主体不是主体元素/*事件主体：有2部分组成1。事件绑定主体:被添加了事件属性的元素 <ul>this=== ev.currentTarget2。事件触发的主体:用户实际点击的元素<li>ev.target*/</script></body>
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.loginform.onsubmit = function () {// alert("上传")return false} *//*禁用表单提交行为，是为了用户自定义提交行为4.禁用默认行为： ev.preventDefault()*/document.forms.login.onsubmit = function (ev) {//禁用默认行为ev.preventDefault()//禁用冒泡ev.stopPropagation()//当表单事件的默认行为被禁用后， this===ev.target===ev.currentTargetconsole.log(this)console.log(ev.target)console.log(ev.currentTarget)//表单中的任何一个控件，都有一个form属性，永远和当前表单元素绑定console.log(ev.currentTarget.email)//禁用默认提交行为后，我们可以对表单控件的内容进行验证操作//获取到emailconst email = this.email.value//获取 passwordconst 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();
}
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
