常用事件1
- 在事件中,事件需要加上 on 关键字
.onclick 点击事件
.onomuseover 鼠标移入事件
.onchange 改变事件(表单标签,选中状态切换的触发)
.onmouseout 鼠标移出时间
.onload 加载事件
.onreadystatechange 加载事件(ajax中,有状态码返回,比onload更全面)
.ontransitionend 过渡完成触发事件
.onanimationstart 动画开始触发事件
.onanimationend 动画结束触发事件
.onanimationieration 动画每次循环触发事件
window.onscroll 页面滚动触发事件
window.onresize 浏览器窗口大小改变时触发事件
window.onhashchange 浏览器地址hash值改变触发事件(#...改变)
事件监听器
常用事件2
- 事件监听器 中,事件 不用加on 关键字
鼠标相关事件:
鼠标移入移出事件 mouseover、mouseout
父级内如果移入子集,会触发移出父级事件
新鼠标移入移出事件 mouseenter、mouseleave
父级内如果移入子集,不会触发移出父级事件(这才是正常逻辑撒)
mousedown :鼠标按下事件
mouseup :鼠标抬起事件
mousemove :鼠标移动事件
contextmenu :鼠标右键事件
mousewheel :滚轮滚动事件chrome
DOMMouseScroll :滚轮滚动事件 火狐
e.wheelDelta 滚轮滚动方向。正数向上,负数向下(Chrome)
e.detail 滚轮滚动方向。正数向下,负数向上(火狐)
键盘相关事件:
keydown 键盘按下事件
keyup 键盘抬起事件
其他常用事件:
dbclick 双击事件
focus 获得焦点事件 (想要输入时触发)
blur 失去焦点事件
change 状态改变事件 (单选框复选框选中状态改变)
input 每次输入时触发事件
submit 提交按钮点击时触发
reset 重置按钮点击时触发
事件监听器与事件的区别
写事件缺点:项目中同一个按钮,两个人添加的点击事件不一样,那么会出现代码覆盖的情况
事件监听器:不会出现代码覆盖(其中事件不用加on关键字)
- 添加事件监听:addEventListener(“事件类型”,function(){})
事件监听的第三个参数:
1、 false:默认值,不填写。 true:表示为捕获执行
2、 {once:true} 此事件只能执行一次
3、 {passive:true} 阻止清除浏览器默认行为 - 取消事件监听:removeEventListener(“事件类型”,函数名) ------ 要取消事件监听器,只能用函数名不能用函数表达式。因为函数名是唯一的,函数表达式可以重复
<button class="box">点击</button>
var box = document.querySelector(".box");
box.addEventListener("click",function(){alert(1)})
box.addEventListener("click",function(){alert(2)})
var fn1 = function(){ alert(3); }
document.addEventListener("click",fn1);
//取消/删除事件监听必须用函数名
document.removeEventListener("click",fn1);
事件监听中事件执行顺序
- 冒泡执行:事件监听默认执行顺序:由内向外
点击里面的事件,会由内向外触发外层事件。点击外层事件,不会触发里面的事件 - 捕获执行:事件监听第三个参数为true:由外向内
点击里面的事件,会由外向内触发外层事件。点击外层事件,不会触发里面的事件 - 阻止冒泡:即点击里面的事件不会触发外层事件
方式一: e.cancelBubble = true;
方式二: e.stopPropagation();
<div style="width:300px;height:300px;background:red">
<p style="width:200px;height:200px;background:yellow">
<a href="#" style="border:1px solid blue;padding:10px">点击</a>
</p>
</div>
var div = document.querySelector("div");
var p = document.querySelector("p");
var a = document.querySelector("a");
a.addEventListener("click",function(e){
//e.stopPropagation(); //阻止冒泡
console.log("a冒泡");
})
p.addEventListener("click",function(e){
console.log("p冒泡");
})
div.addEventListener("click",function(e){
console.log("div冒泡");
})
结果:点a标签:打印顺序:a冒泡-p冒泡-div冒泡
点p标签:打印顺序:p冒泡-div冒泡
点div标签:打印顺序:div冒泡
如果哪层阻止冒泡,那么点此层,就不会触发外层的事件
捕获执行:打印顺序相反,因为是由外向内执行
事件代理
- 点击元素,操作他的父元素(祖父、曾祖父也能操作)
- 事件代理不能阻止冒泡
<ul id="list">
<li>
<h2>小红说:</h2>
<a href="javascript:;">删除</a>
</li>
<li><i>小白<i><li>
</ul>
list.addEventListener('click', function (e) {
// 事件委托/事件代理
if (e.target.tagName == 'A') {
var li = e.target.parentNode; //点击元素的父节点,是li标签
// console.log(li);
li.remove(); //然后父元素就被删除了
}
})
e的使用
1、获取鼠标位置:
e.clientX e.clientY 相对于可视区左上角的位置(滚动条滚动,可视区还是那么大)
e.pageX e.pageY 相对于页面左上角的位置(滚动条滚动,离左上角更远)
2、阻止浏览器默认行为 :
e.preventDefault() 阻止浏览器默认行为
浏览器默认行为: 浏览器自动添加的。比如a标签、右键菜单等
3、事件对象:
e.target 获取点击元素对象(点谁是谁)
e.currentTarget 获取事件源对象(事件是谁的就是谁的)
4、事件代理:通过判断点击元素对象的标签名 e.target.tagName 删除父节点(事件代理不能取消冒泡)
5、取消冒泡执行:
方式一: e.cancelBubble = true;
方式二: e.stopPropagation();
6、键盘:
e.key 按下的键
e.keyCode 按下的键码
e.ctrlKey 功能键布尔值(判断是否按下的ctrl键,返回true/false)
e.altKey 功能键布尔值(判断是否按下的alt键,返回true/false)
组合键使用
<p>这是一段不能复制的文字</p>
<script>
window.addEventListener("contextmenu", function (e) { //右键
e.preventDefault(); //阻止浏览器默认行为(右键、滚动条等)
})
window.addEventListener("keydown", function (e) {
// e.key 按下的键
// e.keyCode 按下的键码
// e.ctrlKey 功能键布尔值(判断是否按下的ctrl键,返回true/false)
// e.altKey 功能键布尔值(判断是否按下的alt键,返回true/false)
if (e.ctrlKey && e.keyCode == 67) {//如果按了ctrl+c
console.log("复制了")
e.preventDefault(); //阻止浏览器默认行为。即ctrl+c不能复制了
}
})
</script>