注册事件的方法
1.点语法注册事件: 事件源.事件类型 = 事件处理函数
* 特点：不能注册‘同名事件’， 否则会覆盖
2.事件源.addEventListener('事件类型',事件处理函数)
* 特点：可以注册多个‘同名事件’，依次触发
移除事件
1.点语法:
* 事件源.事件类型=null
2.addEventListener方法
* let fn = 事件源.addEventListener('事件类型',事件处理函数)
移出:事件源.addEventListener('事件类型',fn)
阻止默认事件(form,a)
代码格式:给事件函数加个形参event或ev或e 函数体:e.preventDefault()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<!-- 点击a标签：默认会跳转href网页 -->
<a href="http://www.baidu.com">跳转到百度</a>
<!-- 点击form里面的按钮，默认会跳转action网页 -->
<form action="http://www.itheima.com">
<input class="username" type="text" placeholder="请输入用户名">
<br>
<input class="password" type="text" placeholder="请输入密码">
<br>
<button class="btn">登录</button>
</form>
<script>
let btn = document.querySelector('.btn')
let a = document.querySelector('a')
btn.onclick = function (e) {
e.preventDefault()
alert('111')
}
a.onclick = function (e) {
e.preventDefault()
alert('222')
}
</script>
</body>
</html>
事件对象
1.事件对象 : 是存储与事件相关的对象。
* 当用户触发事件的时候，浏览器会自动捕捉触发时(鼠标坐标和键盘按键)的信息,存入对象中。这个对象称之为事件对象。
2.如何获取事件对象 : 给事件处理函数添加形参 event ev e
3.事件对象常用属性 :
* e.pageX / e.pageY 获取鼠标触发点距页面左上角的距离
* e.target 获取鼠标点击的元素
事件委托
事件委托:给父元素注册事件委托子元素完成
事件委托原理:事件冒泡
事件目标获取:e.target
<!DOCTYPE html>
<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>
<button class="btn">点我新增一行li元素</button>
<ul>
<li>我是班长1</li>
<li>我是班长2</li>
<li>我是班长3</li>
<li>我是班长4</li>
<li>我是班长5</li>
<li>我是班长6</li>
</ul>
<script>
//需求： 点击页面每一个li元素，自己的颜色修改为红色
let ul = document.querySelector('ul')
let btn = document.querySelector('.btn')
btn.onclick = function () {
let newLi = document.createElement('li')
newLi.innerText = '我是新来的'
ul.appendChild(newLi)
}
ul.onclick = function (e) {
console.log(e.target)
e.target.style.backgroundColor = 'red'
}
</script>
</body>
</html>
事件冒泡
事件冒泡:当子元素触发时,所有父元素同名的事件都会依次触发
顺序:子元素->父元素->body->html->document->window(整个网页窗口)
事件捕获
事件捕获 : 当触发子元素的事件时候，先从最顶级父元素，一级一级往里触发
规则： window->document->html->body->父元素->子元素
默认情况下，所有的注册事件都是冒泡事件。 只有唯一一种方式可以注册捕获事件：
元素.addEventListener('事件类型',事件处理函数,true)
事件流的三个阶段
阻止事件流:给函数体加 e.eventPhase
事件捕获
目标阶段
事件冒泡
