一.注册事件
给元素添加事件称为注册事件或者绑定事件
注册事件两种方式:传统方式和方法监听注册方式
传统方式:利用on开头比如:onclick
方法监听注册方式:addEventListener(type,listener【,useCapture】)
type:监听类型:不带on比如:click
listener:事件处理函数
useCapture:可选参数,布尔值
op(获取的元素).addEventListener(‘click’,function(){})
二。删除事件(解绑事件)
删除事件的方式
传统注册方式:op.οnclick=null
方法监听注册方式:
function fn(){alert(‘kk’)
removeEventListener(‘click’,fn)
}
三。DOM事件流
dom//事件流三个阶段
1.js代码中只能执行捕获或者冒泡其中的一个阶段
2.onclick和attachEvent(ie)只能得到冒泡阶段
3.捕获阶段,如果addEventListener第三个参数为true那么处于捕获阶段document-》html-》body-》fanter-》son(由内到外冒泡阶段,由外到内捕获阶段)
onblur,onfocus,onmouseenter,onmouseleave没有冒泡
捕获事件具体代码展示: 为true时,document-》html-》body-》fanter-》son(执行顺序)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dom事件流</title>
<style>
.father{
border: 1px solid aqua;
line-height: 180px;
text-align: center;
height: 185px;
width: 185px;
background-color: aqua;
}
.son{
text-align: center;
line-height: 100px;
margin:40px;
height: 100px;
width: 100px;
background-color: silver;
z-index: 1;
}
</style>
</head>
<body>
<div class="father">
<div class="son">son盒子</div>
</div>
</body>
<script>
var son=document.querySelector('.son');
son.addEventListener('click',function(){
alert('son');
},true);
var father=document.querySelector('.father');
father.addEventListener('click',function(){
alert('father');
},true);
</script>
</html>
冒泡事件具体代码展示: 为false时,son->father-》body-》html->document(执行顺序)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dom事件流</title>
<style>
.father{
border: 1px solid aqua;
line-height: 180px;
text-align: center;
height: 185px;
width: 185px;
background-color: aqua;
}
.son{
text-align: center;
line-height: 100px;
margin:40px;
height: 100px;
width: 100px;
background-color: silver;
z-index: 1;
}
</style>
</head>
<body>
<div class="father">
<div class="son">son盒子</div>
</div>
</body>
<script>
// var son=document.querySelector('.son');
// son.addEventListener('click',function(){
// alert('son');
// },true);
// var father=document.querySelector('.father');
// father.addEventListener('click',function(){
// alert('father');
// },true);
var son=document.querySelector('.son');
son.addEventListener('click',function(){
alert('son');
},false);
var father=document.querySelector('.father');
father.addEventListener('click',function(){
alert('father');
},false);
</script>
</html>
四.事件对象
var div=document.querySelector('.box');
div.οnclick=function(event){console.log(event);
}1.event就是一个事件对象,写在监听函数小括号里面(e,event,ev常写)
2.有了事件才会有事件对象,它是系统自动创建的,不需要我们传递参数
3.事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如:鼠标点击里面就包含了鼠标得到相关信息
事件对象常见的属性和方法
e.target //返回触发事件的对象 标准
e.srcElement //返回触发事件的对象 非标准 ie6-8使用
e.type //返回事件的类型 如:click,mouseover,不带on
e.cancelBubble //该属性阻止冒泡 非标准 ie6-8使用
e.stopPropagation() //阻止冒泡 标准
e.returnValue //该属性阻止默认事件 非标准 ie6-8如不让链接跳转
e.preventDefault() //该方法阻止默认事件 标准 不让链接跳转
五.事件委托
原理 :不是子节点单独设置事件监听器,而是事件监听设置在其父节点上,然后利用冒泡原理影响设置每个子节点
案例:给ul注册点击事件,然后利用事件对象的target来找到当前点击的li,事件冒泡到ul上,ul有注册事件就会触发事件监听器
<script>
window.onload=function(){
var ul = document.querySelector('ul');
ul.addEventListener('click',function(e){
e.target.style.color="blue";
},true)
}
六.常用的鼠标事件(补充)
1.contextmenu // 禁用右键菜单 控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单
document.addEventListener('contextmenu',function(e){
e.preventDefault();//阻止默认行为
})2.selectstart //禁止鼠标选中
document.addEventListener('selectstart',function(e){
e.preventDefault();//阻止默认行为
})
event对象代表事件的状态,跟事件相关的一系列信息的集合,现阶段我们主要是用鼠标事件对象mouseEvent和键盘事件对象KeyboarEvent
鼠标事件对象:
e.clientX //返回鼠标相对于浏览器窗口可视区的x坐标
e.clientY //返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX //返回鼠标相对于文档页面的X坐标 ie9+支持
e.pageY //返回鼠标相对于文档页面的Y坐标 ie9+支持
e.screenX //返回鼠标相对于电脑屏幕的X坐标
e.screenY //返回鼠标相对于电脑屏幕的Y坐标
七.图标跟随鼠标案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图标跟随鼠标</title>
<style>
img{
position: absolute;
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<div class="mouse">
<img src="img/2.jpeg"/>
</div>
<script type="text/javascript">
var img=document.querySelector('img');
document.addEventListener('mousemove',function(e){
var x=e.pageX;
var y=e.pageY;
img.style.top=y-20+'px';
img.style.left=x-20+'px';
})
</script>
</body>
</html>
八.常用的键盘事件
onkeyup //某个键盘按键被松开时触发,不区分字母大小写
onkeydown//某个键盘按键被按下时触发,不区分字母大小写
onkeypress //某个键盘按键被按下时触发,但它不识别功能按键比如ctrl shift 箭头等,区分字母大小写
e.keyCode可以得到相应按键的ASCII值
案例:按下s健光标定位到搜索框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>按下按键光标定位到搜索框</title>
<style>
.search{
background-color: gainsboro;
height: 100vw;
width: 1300px;
margin: 0 auto;
}
.search input{
border:0;
height: 25px;
width: 220px;
margin-top: 20px;
margin-left: 550px;
outline: none;/* 点击无边框 */
}
.search span{
display: inline-block;
height: 25px;
width: 25px;
transform: translateY(8.5px);
background: url('icon/search.png')no-repeat;
background-size: contain;
background-color: red;
}
</style>
</head>
<body>
<div class="search">
<input type="search" placeholder="111" /><span></span>
</div>
<script>
window.onload=function(){
var input=document.querySelector('input');
document.addEventListener('keypress',function(e){
if(e.keyCode===115){
input.focus();
}
})
}
</script>
</body>
</html>
案例:模拟京东快递单号查询(文本框输入内容时,文本框自动显示大字号内容)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模拟京东大字号内容显示</title>
<style>
.search{
margin: 45px;
}
.big{
line-height: 35px;
height: 35px;
width: 168px;
border: 1px solid gray;
box-shadow: 1px 1px 4px gray;
display: none;
}
input{
margin-top: 10px;
}
.big::before{
content: '';
width: 0;
height: 0;
position: absolute;
top: 82px;
left: 88px;
border: 8px solid #000;
border-style:solid dashed dashed;
border-color:#fff transparent transparent;
}
</style>
</head>
<body>
<div class="search">
<div class="big"></div>
<input type="text" placeholder="输入快递单号" id="jd">
</div>
<script>
var big=document.querySelector('.big');
var jd=document.getElementById('jd');
jd.addEventListener('keyup',function(){
if(this.value==''){
big.style.display='none';
}else{
big.innerText=this.value;
big.style.display='block';
}
jd.onblur=function(){
big.style.display='none';
}
})
jd.onfocus=function(){
big.style.display='block';
}
</script>
</body>
</html>