DOM鼠标事件、 表单事件、添加事件监听
鼠标事件
click:单机事件
dblclick：双击事件
mousedown:鼠标按下时触发
mouseup:鼠标抬起是触发
mouseenter:鼠标移入触发
mouseleave：鼠标离开触发
mousemove:鼠标移动
var btn = document.querySelector(".btn");
btn.addEventListener("click",function(){
console.log("我是单击事件");
})
btn.addEventListener("mousedown",function(){
console.log("鼠标按下");
})
btn.addEventListener("mouseup",function(){
console.log("鼠标抬起来的时候触发");
})
mouseover,mouseout;事件冒泡过程
mouseenter,mouseleave；不遵循事件冒泡过程
btn.addEventListener("mouseenter",function(){
console.log("鼠标移入");
})
btn.addEventListener("mouseleave",function(){
console.log("鼠标离开");
})
btn.addEventListener("mouseover",function(){
console.log("mouseover鼠标移入");
})
btn.addEventListener("mouseout",function(){
console.log("mouseout鼠标离开");
})
事件冒泡(所以主流浏览器的默认事件触发过程，都为事件冒泡过程)
先触发子元素在触发父元素(事件会进行传递)
var test=document.querySelector(".test");
var one=document.querySelector(".one");
test.addEventListener("click",function(){
alert("我是父元素test");
})
one.addEventListener("click",function(){
alert("我是子元素one");
})
btn.addEventListener("mousemove",function(){
console.log("我是在btn按钮里面移动");
})
document.addEventListener("contextmenu",function(){
console.log("按下鼠标右键");
})
键盘事件
document.addEventListener("keyup",function(){
console.log("键盘被抬起了");
})
document.addEventListener("keydown",function(){
console.log("键盘被按下了");
})
document.addEventListener("keypress",function(){
console.log("键盘被按下后抬起了");
})
浏览器默认的事件传递过程是事件冒泡过程
事件冒泡:当给两个父子元素同时添加一个点击事件时，当点击子元素的时候，同时会触发父元素的点击事件
触发过程是：先触发子元素的点击事件再触发父元素的点击事件，
这个触发过程叫，冒泡过程。
事件捕获：事件传递过程和事件冒泡相反，先触发父元素的事件再触发子元素的事件
事件对象：就是当用在对网页操作的时候发生的事情，比如点击事件。。。。。
事件对象会以回调函数的第一参数形式传入给我们
1、他是一个对象
2、在事件发生的过程产生
3、以回调函数的参数形式获取
<div class="web">
<div class="one">div>
<input type="text" class="user" id="" value="" />
<textarea name="" rows="" cols="" maxlength="140" >textarea>
<form action="" method="post">
<input type="text" value="测试" />
<input type="reset" value="重置"/>
form>
<div class="test">div>
div>
var web = document.querySelector(".web");
var one = document.querySelector(".one");
web.addEventListener("mouseenter", function() {
console.log("我是父元素");
})
one.addEventListener("mouseenter", function() {
console.log("我是子元素");
})
document.addEventListener("keydown", function(e) {
// console.log("键盘按下了");
// console.log(event);
if(e.key == "A") {
console.log("你按下大写的A");
}
if(e.keyCode == 37) {
console.log("你按下左键");
}
// if(e.keyCode == 38){
// console.log("你按下上键");
// }
if(e.keyCode == 39) {
console.log("你按下右键");
}
if(e.keyCode == 40) {
console.log("你按下下键");
}
})
键盘事件不能够监听到某个具体元素
var isclick = true;
var conut = 0;
var w = 100;
//不能够通过style方法获取元素的属性值
//console.log(one.style.width);
var div = document.createElement("div");
one.appendChild(div);
div.style="width:30px;height:13px;border-radius:5px;background:pink;transition:2s;position:absolute;right:0;";
//通过获取元素one，在对元素进行移动的效果
one.addEventListener("click", function() {
document.addEventListener("keydown", function(e) {
if(e.keyCode == 37) {
//transform能够通过+=来叠加位置，因为他可以传入多个参数
//one.style.transform += "translateX(-30px)";
//conut++;
//width不能够通过加等于来叠加宽度，因为width只能有一个参数
//one.style.width +="20px";
w+=10;
one.style.width=w+"px";
}
if(e.keyCode == 38) {
one.style.transform += "translateY(-30px)";
}
if(e.keyCode == 39) {
one.style.transform += "translateX(30px)";
}
if(e.keyCode == 40) {
one.style.transform += "translateY(30px)";
}
if(e.keyCode==13){
div.style.right="-500px";
div.style.opacity="0";
}
})
})
对象事件
window.addEventListener("resize",function(){
console.log("浏览器窗口大小改变叫了");
})
window.addEventListener("scroll",function(){
console.log(window.pageYOffset);
})
document.body.addEventListener("unload",function(){
localStorage.setItem("页面关闭");
})
表单事件
blur:失去焦点时候触发
focus：获取焦点时触发
change:当表单元素内容改变的时（回车或失去焦点时）触发的
input:当表单元素内容发生时触发
select:选中文本时触发
var inp=document.querySelector(".user");
inp.addEventListener("blur",function(){
var res= confirm("填写完成了吗？");
if(res==false){
setTimeout(function(){
inp.focus();
},1000)
}else{
inp.blur();
}
})
inp.addEventListener("focus",function(){
console.log("获取焦点");
})
inp.addEventListener("change",function(){
console.log(inp.value);
})
inp.addEventListener("input",function(){
console.log(inp.value);
})
reset:当用户点击重置按钮时触发
注意：我们需要监听form
var btn = document.querySelector("form");
btn.addEventListener("reset",function(){
console.log(123);
})
inp.addEventListener("select",function(){
console.log("你选中了文本");
})
#剪贴板事件
copy：当用户复制内容的时候触发
cut:当用户剪切内容的时候触发
paste：当用户粘贴内容的时候触发
inp.addEventListener("copy",function(){
alert("请不要复制");
})
var Click = true;
one.addEventListener("click",function(){
if(Click){
one.style.transform+="translateX(20px)";
Click=false;
}
one.addEventListener("transitionend",function(){
Click = true;
})
})
添加事件监听
1、addEventListener()
可以注册多个事件监听
可以传入第三个参数，用来设置事件的传递方法，值为true，则为捕获；为false（默认值），则为冒泡过程
2、on~比如单击onclick
只能注册一个相同类型的事件监听
后面的点击事件监听会覆盖掉前面的点击事件监听
<div class="test1">
<div class="one">div>
div>
<div class="test2">
<div class="one">div>
div>
var test1 = document.querySelector(".test1");
var test2 = document.querySelector(".test2");
var one1 = test1.querySelector(".one");
var one2 = test2.querySelector(".one");
test1.onclick=function(){
console.log("我是通过onclick来点击的");
}
test1.onclick=function(e){
console.log(e)
console.log("我是通过onclick来第二次点击的");
}
one1.onclick=function(e){
//阻止事件冒泡
e.stopPropagation();
console.log("我是test1的儿子");
}
test2.addEventListener("click",function(e){
console.log(e)
console.log("我是通过addEventListener来点击的");
},true)
test2.addEventListener("click",function(){
console.log("我是通过addEventListener来第二次点击的");
},true)
one2.addEventListener("click",function(e){
//阻止事件冒泡
e.stopPropagation();
console.log("我是test2的儿子");
},true)
document.addEventListener("contextmenu",function(e){
//阻止默认事件
e.preventDefault()
console.log(123);
})