JS事件_在同一元素上,同一事件只能绑定一个回调

事件

1.事件就是交互事件，用户点击实现回馈，是交互体验的核心功能。

绑定事件

1.ele.onxxxx = function(event){}
兼容性很好，但是一个元素的同一事件上只能绑定一个
基本等同于写在HTML行间上。

2.obj.addEventListener(type, listener, options)
IE9以上，可以为一个事件绑定多个处理程序。

3.obj.attachEvent(‘on’ + type, fn（事件处理函数）)；
IE独有，一个事件同样可以绑定多个处理程序

解除事件

1. el.onclick = null

var btn = document.getElementById("btn");
	 //事件注册
 btn.onclick = function(event){  
     alert(id); 
     btn.onclick = null;   
     //事件删除
 }
1
2
3
4
5
6
7

2.el.removeEventListener(type,fn,false); //这里 fn 必须是原有绑定的函数，否侧解除无效

var btn = document.getElemetById('id');
btn.addEventListener('click',test,false);
function test(){
　console.log('remove click')；
}
btn.removeEventListener('click',test,false);
1
2
3
4
5
6

事件冒泡

1.结构上（非视觉上）嵌套关系的元素，会存在事件冒泡功能，即同一事件，自子元素冒泡向父元素。（自底向上）
（1）当addEventListener 的第三个参数为false时：事件冒泡

事件捕获

1.结构上（非视觉上）嵌套关系的元素，会存在事件捕获功能，即同一事件，自父元素捕获至子元素（事件源元素）。（自顶向下）
2.IE没有捕获事件
（1）当addEventListener 的第三个参数为true时：事件捕获

事件的三个阶段

1.事件捕获阶段
2.执行当前点击元素
3.事件冒泡
三者都会发生

事件委托

1.不在事件的发生地设立监听函数，而是在事件发生地的父元素或者祖先元素设置监听器函数这样可以大大提高性能，因为可以减少绑定事件的元素(原理就是事件冒泡），比如：

<ul id = "ul">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
<script>
var ul = document.getElementById(‘ul');
ul.onclick = function(e){
//e 事件对象
console.log(e.target);
<script>
1
2
3
4
5
6
7
8
9
10
11

要给li元素绑定click事件，
使用事件委托，就只需要给ul绑定click事件就行了，
这样就不需要给每个li’绑定click事件，减小内存占用，提高效率。

事件对象

1.event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态.

2.事件发生后，跟事件相关的一系列信息数据的结合都放到这个对象里面，这个对象就是事件对象（event-----e）

3.使用方法

test.onclick = function(e) {
  //为了兼容IE
  e = e || window.event;
  console.log(e);
}
1
2
3
4
5

兼容性处理：e = e || window.event;

常见属性方法

e.target 和 this 区别

1.this 返回的是绑定事件的对象（元素），this 那个元素绑定了这个事件，那么就返回谁。

2.e.target 返回的是触发事件的对象（元素），e.target 点击了那个元素，就返回那个元素。

e.target兼容性处理

ul.onclick = function(e) {
  e = e || window.event;
  var target = e.target || e.srcElement;
}
1
2
3
4

三大事件（鼠标事件、键盘事件、html事件）

1.鼠标事件
click：单击
dblclick：双击
mousemove：鼠标移动
mousedown：鼠标按下
mouseup：鼠标抬起
mouseover：鼠标悬浮
mouseout：鼠标离开
mouseenter：鼠标进入
mouseleave：鼠标离开

2、键盘事件
keydown：按键按下
keyup：按键抬起
keypress：按键按下抬起

3、HTML事件
load：文档加载完成
select：被选中的时候
change：内容被改变
focus：得到光标
blur:失去光标
resize：窗口尺寸变化
scroll：滚动条移动

MouseEvent常用属性

clientX 相对于当前可视窗口X坐标
clientY 相对于当前可是窗口Y坐标
pageX 返回鼠标相对于文档界面得X坐标 IE9以上版本支持
pageY 返回鼠标相对于文档界面得Y坐标 IE9以上版本支持
screenX 返回鼠标相对于电脑屏幕得X坐标
screenY 返回鼠标相对于电脑屏幕得Y坐标