一看就会，一写就废的事件真的很难吗？汤姆告诉你非常简单

小伙伴们，欢迎大家和汤姆一起来学习事件，在学习事件之前，让我们先回顾一下之前学的dom。

一、dom里面获得元素的宽高可以用clientWidth/Height、offsetWidth/Height、scrollWidth/Height,

二、 元素与父元素距离可以用offsetLeft与相对父元素的左偏移值、offsetTop与相对父元素的垂直偏移值；offsetParent 相对父元素、元素的父辈元素有position非static值。

 

三、元素的滚动距离可以用elem.scrollTop、elem.scrollLeft .

四、学习事件要先了解事件的绑定和解绑，绑定可以使用btn.onclick = function(){}；btn.addEvent

Listener(type，funName)；解绑可以使用btn.onclick = null；btn.removeEventListener(type,funNa

me) ;同时还要注意匿名函数不能解绑。

 

 五、事件的对象，事件源对象event.target，相对于事件源偏移文字event.offsetX、event.offsetY

相对于页面偏移位置event.pageX、evnet.pageY。

 

六、 事件的传递，事件的传递分为冒泡:最具体元素最先捕捉到事件,传递给最不具体的元素

（document）； 捕获:最不具体的元素先捕获到事件,传递给最具体的元素。

1、默认都是冒泡,使用捕获elem.addEventlistener(事件类型,响应函数,是否为捕获) ；elem.add

EventListener("click",doit,true) ；阻止事件传递event.stopPropagation()；阻止默认事件event.

preventDefault()。 

 

七、键盘事件 keypress 按下弹起、keyup  键盘弹起、keydown 键盘按下、event.key键盘的名称

event.keyCode 键对应数字编码、event.which等于keyCode， 我们可以通过一个案例来感受一下

键盘事件的魅力。 

 

八、 鼠标事件，常用的鼠标事件mouseover 鼠标移入、mouseout 鼠标移出、mousedown 鼠标按

下、mouseup 鼠标弹起、mousemove 鼠标移动、click 单击、dblclick双击 。

九、表单事件，常见的表单事件 change 值发生变化、input 正在输入、focus 获取焦点、blur 失去

焦点 。

十、页面事件，load加载、resize 窗口变化、scroll滚动。

学完上面的事件我们可以看一个案例总结一下，就拿我们最常见的打分来讲， 

 

首先，我们要用到以下内容。 

 

 

 

通过以上方法就可以完成这个五星好评的案例，小伙伴们，学会了吗？