DOM事件流
DOM文档对象模型
注册事件:
<button>传统注册事件</button>
<button>监听注册事件</button>
<script>
/* 注册事件(也叫绑定事件)
传统注册事件:
注册事件的唯一性;
同一个元素同一个事件只能有一个函数,如果有多个,后面会覆盖前面的.*/
var btn = document.querySelectorAll('button')
btn[0].onclick = function () {
alert('first fn')
}
btn[0].onclick = function () {
alert('second fn')
}
//2.方法监听注册事件
//使用方法: addEventListener('type',listener, useCapture)
//useCapture 可选参数,默认值为false
//同一个元素同一个事件可以注册多个监听器(事件处理程序),并且按顺序依次执行
//事件类型必须带引号,而且不加on
btn[1].addEventListener('click', function () {
alert('方法监听注册事件')
});
btn[1].addEventListener('click', function () {
alert('方法监听注册事件2')
})
</script>
删除事件:
<div>1</div>
<div>2</div>
<div>3</div>
<script>
var div = document.querySelectorAll('div')
div[0].onclick = function () {
alert(1111);
//传统方式删除事件
div[0].onclick = null;
}
//2. 使用监听事件的removeEventListener()
div[1].addEventListener('click', fn)
function fn() {
alert(22222)
div[1].removeEventListener('click', fn)
}
事件流:
事件流描述的是从页面中接收事件的顺序.
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流.
事件流分3个部分,捕获阶段(从顶层到最底层), 当前目标阶段, 冒泡阶段 (从最里层到最外层 )
document ➡html➡body➡ div 捕获阶段
反之,则为冒泡阶段
css属性:
<style>
.son {
height: 200px;
width: 300px;
position: relative;
left: 200px;
top: 100px;
">aqua;
}
.father {
">rgb(68, 0, 255);
height: 400px;
width: 600px;
position: absolute;
left: 500px;
top: 200px;
}
</style>
主代码:
<body>
<div class="father">father
<div class="son"> son</div>
</div>
<script>
//JS代码只能执行捕获或冒泡其中的一个阶段 (即以下两种运行方式,同一时间只可运行一种)
//onclick和attachEvent只能得到冒泡阶段
// addEventListener() 当第三个参数为true时,按照捕获阶段的顺序访问
//当为false或不存在时,默认按照冒泡顺序
//我们最常用的就是冒泡排序
//第一种访问方式: 总是会先访问外层节点(广告就是这样恶心人的)
// let div = document.querySelector('.father');
// div.addEventListener('click', function () {
// alert('father')
// }, true)
// let div1 = document.querySelector('.son');
// div1.addEventListener('click', function () {
// alert('son')
// }, true)
//第二种访问方式: 会先访问最内层的节点,然后依次访问包含它的外层元素
let div = document.querySelector('.father');
div.addEventListener('click', function () {
alert('father')
//点击在father而不在son的区域,会弹出father和document
})
let div1 = document.querySelector('.son');
div1.addEventListener('click', function () {
alert('son')
//4.阻止事件冒泡的两种方式
//e.stopPropagation() //dom推荐使用的方法,此方法在这里使用后使用后,点击son元素, 只会弹出一个窗口
e.cancelBubble = true;//非标准方法
//如果son不在father的区域内,那点击son所在的div就不会访问father的click事件
})
document.addEventListener('click', function () {
alert('document')
})
</script>
事件对象
<body>
<div>1</div>
<script>
//事件对象:是包含了事件相关的一系列的数据集合
//1.没有事件,就没有事件对象,它是系统给我们创建的,不需要传递参数
//2.下面的event就是一个事件对象,写在侦听函数的括号内,看作形参,可以自由命名
//3.如果是鼠标事件,它就包括了鼠标的坐标信息,绑定对象等,
//如果是键盘信息就包括了按下了那个键等信息
var div = document.querySelector('div')
//传统方式
div.onclick = function (event) {
console.log(event)
}
//H5新增的addeventlistener
div.addEventListener('click', function (e) {
console.log(e)
})
// 常见事件对象的属性和方法
//1. e.target 返回的是触发事件的对象; this 返回的是绑定事件的对象(元素)
//区别:e.target是你点击了谁就返回谁,比如你点击了ul的子元素li,那么就返回该li
// this是哪个元素绑定了这个点击事件,就返回谁,你点击了ul的子元素li,但是只绑定了ul元素就返回ul
var ul = document.querySelector('ul')
ul.addEventListener('click', function (e) {
console.log(e.target) //如果点击aa,返回的是 <li>aa </li>
console.log(this)//如果点击aa,返回的是 ul整体 包含所有li
})
//2. e.currentTarget和this非常相似
//3. 返回事件类型 e.type 返回的是不带on的事件 如click
ul.addEventListener('click', fn)
ul.addEventListener('mousemove', fn)
ul.addEventListener('mouseout', fn)
function fn(e) {
console.log(e.type) //click
}
//4.0阻止默认行为(事件) 让连接不跳转 或 让提交按钮不提交
var a = document.querySelector('a');
a.addEventListener('click', function (e) {
e.preventDefault();// dom标准写法
})
//4.1传统的注册方式
a.onclick = function (e) {
// e.preventDefault(); //普通浏览器也可以用
// return false 也可以阻止默认行为,但是return后面的代码无法执行
}
</script>
</body>
鼠标和键盘事件
鼠标事件:mouseenter和mousemove的不同 :
document.addEventListener('click', function (e) {
//1.clientX/Y鼠标在浏览器窗口可视区的XY坐标,和滚动条位置无关
// 坐标系原点在左上角(0,0)
console.log(e.clientX);//相对于左边
console.log(e.clientY)//相对于上边
//2.pageX/Y 鼠标在整个文档页面的XY坐标
console.log(e.pageX)
console.log(e.pageY)
//3.screenX 相对于电脑屏幕的XY坐标
})
//案例: 让鼠标有个天使图片一直跟随
//鼠标移动事件: mousemove
//在整个页面中,给document注册事件
var img = document.querySelector('img')
document.addEventListener('mousemove', function (e) {
//原理: 每次移动鼠标,都获得最新的数遍坐标,把这个x和y坐标赋值给
//图的top和left值
// ps:一定要给top和left值拼接px
var x = e.pageX;
var y = e.pageY;
img.style.top = y - 25 + 'px';
img.style.left = x - 35 + 'px';
})
//常用的键盘事件(多用的是keydown和keyup)
//1.keyup 按键抬起的时候触发
// document.onkeyup = function () {
// console.log('弹起了一个键')
// }
document.addEventListener('keyup', function () {
console.log('弹起了一个键')
})
//2.keydown 按下的时候触发
document.addEventListener('keydown', function () {
console.log('按下了一个键down')
})
//3.keypress 按下的时候触发~ 但是它不识别功能键 如左右箭头 shift
//注意 可以识别enter!!!
document.addEventListener('keypress', function () {
console.log('我也按下了一个键press')
})
//4.对于按键: 三个事件的执行顺序是 down-press-up
//键盘事件对象
//键盘事件对象的keycode属性 可以返回对应的键的asxcII值
//01.keyup和keydown不区分大小写 a和A都是65
//02.keypress事件区分大小写 大写A 65 小写a 97
document.addEventListener('keyup', function (e) {
console.log('UP:' + e.keyCode)
})
document.addEventListener('keypress', function (e) {
console.log('press:' + e.keyCode) //97
if (e.keyCode === 97) {
alert('你按了a')
}
else {
alert('你没按a')
}
})
</script>
键盘事件案例
css:
<style>
.search {
position: relative;
width: 178px;
margin: 100px;
}
.jd {
position: absolute;
top: 0px;
}
.con {
display: none;
position: absolute;
top: -50px;
width: 171px;
border: 1px solid black;
box-shadow: 0 2px 4px black;
padding: 5px 0;
font-size: 18px;
line-height: 20px;
color: #333;
}
.con::before {
content: '';
width: 0;
position: absolute;
top: 28px;
left: 18px;
border: 8px solid rgb(82, 77, 77);
border-style: solid dashed dashed;
border-color: rgb(216, 223, 223) transparent transparent;
}
</style>
主代码:
<body>
<input type="text">
<div class="search">
<div class="con">123</div>
<input type="text" placeholder="请输入您的快递单号" class="jd">
</div>
<script>
//模拟京东搜索框,即按s键定位到搜索框输入内容
//思路:检测用户是否输入了s ,如果输入了,就把光标定位到搜索框里面
//使用键盘事件 keycode() 判断s的按下
// 使用focus()方法获得焦点
var inp = document.querySelector('input')
document.addEventListener('keyup', function (e) {
console.log(e.keyCode)
if (e.keyCode === 83) {
inp.focus();
}
})
//京东快递单号查询,在输入框的上面显示输入大号字体
//输入内容时,上面的大号字体盒子con 同步显示输入的内容
//如果快递单号为空,则隐藏大号字体盒子con
// 注意: keydown和keypress在文本框中的特点:这两个事件触发的时候,文字还未进入文本框
//所以这里用 keyup最合适
var con = document.querySelector('.con')
var input_jd = document.querySelector('.jd')
input_jd.addEventListener('keyup', function () {
if (this.value == '') {
con.style.display = 'none'
} else
con.style.display = 'block'
con.innerHTML = this.value;
})
//当输入文本框失去焦点时, 上面的大号字体盒子隐藏,反之出现
input_jd.addEventListener('blur', function () {
con.style.display = 'none';
})
input_jd.addEventListener('focus', function () {
if (this.value !== '') {
con.style.display = 'block';
}
})
</script>
浙公网安备 33010602011771号