1.注册事件(绑定事件)
1.1注册事件概述
1.2addEventListener事件监听方式
eventTarget.addEventListener(type,listener[‘事件类型’,useCapturel])
<button>1</button>
<button>22</button>
<script>
var btns=document.querySelectorAll('button');
//1.传统地方法注册事件
btns[0].onclick=function(){
alert('hi');
}
//2.事件侦听注册事件
btns[1].addEventListener('click',function(){
alert(22);
})
</script>
1.传统的方法具有唯一性,只能弹出一个对话框,且后面的会覆盖掉前面的
2.事件侦听不具有唯一性,可以弹出多个对话框,同一个元素同一个时间可以添加多个侦听器
3.DOM事件流
事件的一个传播过程
4.事件对象
阻止默认行为
阻止冒泡
事件委托
7.常用鼠标事件
7.1禁止选中文字和禁止右键菜单
7.2鼠标事件对象
<script>
//鼠标事件对象
document.addEventListener('click',function(e){
//1.client 鼠标在可视区的x和y坐标
console.log(e.clientX);
console.log(e.clientY);
console.log('-----------');
//2.page 鼠标在页面文档的x和y坐标(使用最多)
console.log(e.pageX);
console.log(e.pageY);
console.log('-----------');
//3.screen 鼠标在电脑屏幕的x和y坐标
console.log(e.screenX);
console.log(e.screenY);
})
</script>
7.3鼠标跟随案例
<style>
img {
position: absolute;
top: 2px;
width: 90px;
}
</style>
</head>
<body>
<img src="https://gd-hbimg.huaban.com/d9d607f5ed8fe9114c16cb649d258f13553d991613bcc-uDWpUV_fw658" alt="">
<script>
var pic=document.querySelector('img');
document.addEventListener('mousemove',function(e){
//1.mousemove只要我妈鼠标移动1px就会触发这个事件
// console.log(1);
//2.核心原理:每次鼠标移动都会获得新的鼠标坐标,把这个x和y坐标作为图片的top和left 值就可以移动图片
var x=e.pageX;
var y=e.pageY;
console.log('x坐标是'+x,'y坐标是'+y);
//3.千万不要忘记给left与top加一个px单位
pic.style.left=x-45+'px';
pic.style.top=y-45+'px';
})
</script>
8.键盘事件
<script>
document.addEventListener('keyup',function(){
console.log('我叹气了');
})
//2.keydown按键按下的时候触发
document.addEventListener('keydown',function(){
console.log('我按下了down');
})
//3.keypress按键按下的时候触发 不能识别功能键 比如ctrl shift 左右箭头等
document.addEventListener('keypress',function(){
console.log('我按下了press');
})
</script>
三个事件的执行顺序:keydown--keypress--keyup