事件的属性方法和绑定、解绑

~~开发工具与关键技术： 前端
作者：梁锦豪
撰写时间：2019/5/ 6

在编程时要学习很都的事件，比如鼠标点击事件、键盘按下（键盘弹起事件）
页面加载事件….等等各种各样的事件我们要做的就是把这些事件绑定到元素
里面，可以和页面进行互动。
我们就拿简单的鼠标点击事件做为例子，绑定鼠标的点击事件有两个方法：
第一个方法，是在源码里绑定用οnclick=”函数名称”，如图：

而savaUpdate就是你所需要绑定的事件，onclick就是点击事件

这种方法可以使一个元素绑定多个事件，比如刚刚那个例子我们也可以给其绑定多一个键盘按下（键盘弹起事件），但是却不能绑定两个相同的事件，如果你给其绑定两个onclick事件是不行的。

第二个方法，是在JavaScript脚本中通过元素的ID（好像name值也可以吗，建议用ID值因为ID是唯一的）进行事件的绑定，

PS：图片来自老师，on就是自定义名称
这种方法可以多个事件绑定不同函数

通过可空格进行分离，传递不同的事件名，做到可以同时绑定多个事件，每个事件执行自己的回调方法。

既然可以绑定事件，那么就可以解除对事件的绑定，而解除对事件的绑定我们一称之为卸载事件：
卸载事件是用off（）这个方法，在上面讲到的通过“.on（）”绑定的事件处理程序，现在就通过off（）这个方法移除对事件的绑定。
我们先绑定好俩个事件，如图：

然后删除一个事件，如图：

而删除所有事件就是这样：

你想快捷方法删除所有事件的时候，那么里面就不需要传递事件的名称了，在节点上绑定的所有事件都将会被销毁，如图：

我们再来说一下jQuery的事件的对象的属性和方法：
事件对象的属性和方法有很多，当是我们经常用得却只有那么几个： event.type：获取事件的类型
触发元素的事件类型

event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标
通过这2个属性，可以确定元素在当前页面的坐标值，鼠标相对于文档的左边缘的位置（左边）与 （顶边）的距离，简单来说是从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化
event.preventDefault() 方法：阻止默认行为
这个用的特别多，在执行这个方法后，如果点击一个链接（a标签），浏览器不会跳转到新的 URL 去了。
们可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了
event.stopPropagation() 方法：阻止事件冒泡
事件是可以冒泡的，为防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数
event.which：获取在鼠标单击时，单击的是鼠标的哪个键
event.which 将 event.keyCode 和 event.charCode 标准化了。
event.which也将正常化的按钮按下(mousedown 和 mouseupevents)，左键报告1，中间键报告2，右键报告3
event.currentTarget : 在事件冒泡过程中的当前DOM元素
泡前的当前触发事件的DOM对象, 等同于this.
this和event.target的区别：
js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；
this和event.target都是dom对象
如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用；
Ps:此处简介部分引用自jQuery手册、老师的讲解