1.Event 对象
1.1事件对象介绍
1.Event对象是个事件对象
2.只有事件存在，才会存在的。系统传递个过来的，不是自己定义的！！
3. 事件对象包含了一系列相关数据的集合 (事件相关的！！！
1.2事件对象的写法
elem.click(事件类型) = fucnction(e){//传入e 即事件对象
// 兼容性的写法！！！
var e = e || window.event;//如果e存在执行e 否则 执行window.event
}
2.事件目标 target
2.1 事件目标的写法
e.target; 被（事件类型 如点击）的事件
2.2例题中的e.target指的就是 被点击的li;而不是ul;
2.2 事件目标的调用例题
<ul>
<li>
张世豪
</li>
<li>
李嘉诚
</li>
<li>
马云
</li>
</ul>
<script>
var ul = document.querySelector('ul');
//点击li时ul绑定的click会不会执行 会执行因为冒泡事件
ul.addEventListener('click',function (e){
var e = e || window.event;
console.log(e)
console.log(e.target);
for(var i = 0 ;i<ul.children.length;i++){
ul.children[i].style.background = 'white'
}
e.target.style.background = 'red'
})
//执行流程 先捕获事件——>执行事件在此案例中li点击没有 就不执行——>在由下到上冒泡事件 执行ul
</script>
3.取消冒泡事件
3.1取消冒泡事件的写法
//阻止向上冒泡 但自身的冒泡改变不了
方法一：e.stopPropagation();
方法二：e.cancelBubble = 'true';
3.2 取消冒泡例题练习
<style>
.grandfather {
width: 400px;
height: 400px;
border: 1px solid red;
}
.father {
width: 200px;
height: 200px;
border: 1px solid red;
}
.son {
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="grandfather">
<div class="father">
<div class="son"></div>
</div>
</div>
<script>
//阻止向上冒泡 但自身的冒泡改变不了
//方式1 e.stopPropagation() propagation传播
//方式2 e.cancelBubble='true'; cencel取消 Bubble冒泡
var grandfather = document.querySelector(".grandfather")
var father = document.querySelector(".father")
var son = document.querySelector(".son")
grandfather.addEventListener('click',function(){
console.log('这是grandfather的捕获')
},true)
grandfather.addEventListener('click',function(){
console.log('这是grandfather的冒泡')
},false)
father.addEventListener('click',function(){
console.log('这是father的捕获')
},true)
father.addEventListener('click',function(){
console.log('这是father的冒泡')
},false)
son.addEventListener('click',function(e){
console.log('这是son的捕获')
// console.log(e)
// e.stopPropagation(); 方法1
e.cancelBubble = 'true';
},true)
son.addEventListener('click',function(){
console.log('这是son的冒泡')
},false)
</script>
</body>
4.阻止默认执行
4.1阻止默认执行的方法
方法1：<a href="javascript:void(0)">点击一下</a>
方法2：e.preventDefault() 阻止默认
方法3：return:false;
4.2阻止默认执行的练习
<a href="http://www.baidu.com">点击一下</a>
<script>
//方式1 <a href="javascript:void(0)">点击一下</a>
//方式2 e.preventDefault() 阻止默认 prevent阻止 default 默认
//方式3 return false;
var a = document.querySelector('a');
a.onclick = function (e){
alert('阻止默认事件测试')
// e.preventDefault();
return false;
}
</script>
5.事件委托思想
5.1事件委托思想概念
委托事件 用的就是冒泡思想
利用冒泡思想和 e.target（事件源）
只给他们的父级设置事件 但是可借由冒泡思想来执行 子级被点击的（事件）
相当于给子级都添加了事件
5.2事件委托思想练习
- 例题中的e.target指的就是 被点击的li;而不是ul;
- 即相当于给每个li添加了一个事件
<ul>
<li>
张世豪
</li>
<li>
李嘉诚
</li>
<li>
马云
</li>
</ul>
<script>
var ul = document.querySelector('ul');
//点击li时ul绑定的click会不会执行 会执行因为冒泡事件
ul.addEventListener('click',function (e){
var e = e || window.event;
console.log(e)
console.log(e.target);
for(var i = 0 ;i<ul.children.length;i++){
ul.children[i].style.background = 'white'
}
e.target.style.background = 'red'
})
//执行流程 先捕获事件——>执行事件在此案例中li点击没有 就不执行——>在由下到上冒泡事件 执行ul
</script>
6.鼠标事件
6.1鼠标事件有哪些？
click 点击
dblclick 双击
contextmenu 右键单击
selectstart 鼠标不可选中
mouseover 进入father的子元素 也会触发
mouseout 离开 father进入子元素 离开子元素进入father都会触发
mouseenter 进入father只会触发一次！！！，对father里面的子元素进出，不会触发
mouseleave 离开father只会触发一次！！！，对father里面的子元素进出，不会触发
mousemove 随着鼠标的移动执行
6.2 练习
<div>
这是鼠标事件测试
</div>
<script>
var div = document.querySelector('div');
//click 单击 dblclick双击
//contextmenu 右键菜单 menu 菜单
//selectstart 无法被选择
document.addEventListener('contextmenu',function (e){
console.log(e)
alert('111')
e.preventDefault()
} );
document.addEventListener('selectstart',function (e){
e.preventDefault();
})
</script>
6.3练习
<script>
var father = document.querySelector(".father")
var son = document.querySelector(".son")
//mouseover 进入father的子元素 也会触发
//mouseout 离开 father进入子元素 离开子元素进入father都会触发
// father.addEventListener('mouseover',function(){
// console.log('mouseover的触发');
// })
// father.addEventListener('mouseout',function(){
// console.log('mouseout的触发')
// })
//mouseenter 进入father只会触发一次！！！，对father里面的子元素进出，不会触发
//mouseleave 离开father只会触发一次！！！，对father里面的子元素进出，不会触发
// father.addEventListener('mouseenter',function(){
// console.log('mouseenter的触发')
// })
// father.addEventListener('mouseleave',function(){
// console.log('mouseleave的触发')
// })
//mousemove 随着鼠标的移动执行
father.addEventListener('mousemove',function(){
console.log('mousemove的触发')
})
</script>
7.键盘事件类型
7.1键盘事件包含有
keyup：键盘松开
keydown:键盘按下
press:press与keydown功能基本一样 但是不能识别ctrl shift 左右箭头...
7.2 练习
<input type="text">
<script>
//keydown键盘按下 keyup键盘松开
//press与keydown功能基本一样 但是不能识别ctrl shift 左右箭头...
var input = document.querySelector('input');
// input.addEventListener('keyup',function (e){
// console.log(e)
// });
input.addEventListener('keydown',function(e){
console.log(e)
})
</script>
8.键盘事件属性
8.1 键盘事件属性
e.keyCode； 键盘事件 表示 ascii
8.2 练习
<input type="text" >
<script>
//e.keyCode 键盘事件 表示 ascii
var input = document.querySelector('input');
document.addEventListener('keydown',function (e){
console.log(e.keyCode)
if(e.keyCode == 80 ){
input.focus();
}
});
</script>
9. 事件位置属性
9.1事件位置属性写法
mousemove
当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。
mousemove() 方法触发 mousemove 事件，或添加当发生 mousemove 事件时运行的函数。
e.clientX e.clientY 可视区域的X Y
e.pageX e.pageY 文本文档中X Y
e.screeX e.screeY 在电脑屏幕中的X Y;
9.2 练习 鼠标跟随效果
<img src="./1.jpg" alt="tp">
<script>
// clientX 可视区域的X
// pageX 文本文档中的X
// screeX 在电脑屏幕中X
var img = document.querySelector('img');
document.addEventListener('mousemove',function (e){
var x = e.pageX;
var y = e.pageY;
img.style.left = x-50 +'px';
img.style.top = y-50 + 'px'
})
</script>
10.总结本次所学的所有事件类型 与 事件属性
10.1事件类型
鼠标
click 单击
dblclick 双击
contextmenu 右键单击
selectstart 鼠标不可选中
mouseover 进入father的子元素 也会触发
mouseout 离开 father进入子元素 离开子元素进入father都会触发
mouseenter 进入father只会触发一次！！！，对father里面的子元素进出，不会触发
mouseleave 离开father只会触发一次！！！，对father里面的子元素进出，不会触发
mousemove 随着鼠标的移动执行一直触发
键盘
keyup 键盘松开
keydown 键盘按下
press 键盘按下
位置
10.2 事件属性
e.target :可返回事件的目标节点（触发该事件的节点）
e.stopPorparation() :取消冒泡
e.cancelBubble ='true' :取消冒泡
e.preventDefaule();阻止默认
e.keyCode: 键盘事件 表示 ascii
e.client
e.page
e.scree
