js事件

1 click　　点击事件

2 load　　用户进入某个页面的时候触发（onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。）

3 unload　　用户离开某个页面的时候触发（onload 和 onunload 事件可用于处理 cookie。）

4 change　　内容变化事件（常结合对输入字段的验证来使用）

5 mouseover　　鼠标移动到HTML元素上方的事件

6 mouseout　　鼠标移出HTML元素上方的事件

7 onmousedown　　鼠标按下的时候触发的事件

8 mouseup　　鼠标弹起触发的事件（onmousedown，onmouseup和onclick区别，onclick是鼠标完成点击事件的时候触发的事件）

9 focus　　元素获取焦点事件

10 blur　　元素失去焦点事件

11 abort　　图像的加载失败

12 dblclick　　双击事件

13 error　　当加载图像和文档时发生错误

14 keydown　　键盘按键被按下发生的事件

15 keyup　　键盘按键被松开发生的事件

16 keypress　　键盘按键按下并松开发生的事件

17 mousemove　　鼠标移动

18 resize　　窗口或者框架被重新调整大小

19 select　　文本被选中

20 reset　　重置按钮被点击

21 submit　　提交按钮被点击

事件绑定

什么是事件？

页面对不同访问者的响应叫做事件。

1、行内绑定（不利于后期维护）

<body>
    <div id="root" onclick="getMsg"></div>
</body>
    <script>
        function getMsg(a){
            console.log(a);
        }
    </script>

2、动态绑定（获取到dom元素，并在元素上绑定事件）

document.getElementById("btn").onclick = function(){
            alert("hello");
        }

3、事件监听(可以绑定多个事件)

<input type="button" value="click me" id="btn"
<script>
var btn = document.getElementById("btn");
    btn.onclick = function(){
        alert("hello1"); //不执行
    }
    btn.onclick = function(){
        alert("hello2");//执行
    }
</script>

jquery事件

jQuery 是为事件处理特别设计的。

常用的 jQuery 事件方法

$(document).ready()

$(document).ready() 方法允许我们在文档完全加载完后执行函数。

click()

click() 方法是当按钮点击事件被触发时会调用一个函数。

该函数在用户点击 HTMl 元素时执行。

js事件和jquery事件的区别

一、入口函数的不同

　　1、js：window.onload = function(){内部放js}　　　

　　实质就是一个事件，拥有事件的三要素，事件源，事件，事件处理程序。等到所有内容，以及我们的外部图片之类的文件加载完了之后，才会去执行。只能写一个入口函数；

　　2、jQuery: $(function(){})或者$ (document).ready(function(){})是在 html所有标签都加载之后，就回去执行，可以写多个；二、获取元素的方式不同

　　1、js：常用的以下几个，除了id，其他的结果都是伪数组；

　　2、jQuery：$(" ")通过和css雷同的选择器方式来获取元素。得到的是jquery对象（dom元素的数组，外加其他一些成员）。即使写的是id，唯一的，得到的对象都不是单一的；

　　本质上jquery方式和qs方式都是获取DOM数组，只不过jquery会多一些其他成员，DOM数组的每一个成员注册事件不能像jquery一样直接注册，必须分别给每个元素注册；

　　三、DOM对象和jquery对象的相互转换　

　　1、jQuery对象转换成DOM对象，

　　2、eq（0）得到jquery对象

　　DOM对象转换成jQuery对象：

　　$(document) -> 把DOM对象转成了jQuery对象

　　var btn = document.getElementById(“btn”);

　　btn -> $(btn)；$ (this)

　　Jquery得到的元素类型都是对象，内容是伪数组，无论是不是唯一的元素；

事件对象（event）

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！

1、event.preventDefault()

用于取消事件的默认行为，将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 "submit"的表单提交，a标签的默认行为是跳转到对应的URL，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单和链接跳转。注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。

2、event.stopPropagation()

该方法用于阻止事件的冒泡，不让事件从子元素向父元素及上层元素冒泡，但是默认事件仍让会执行，比如a标签的跳转行为仍然会执行。注意，使用 event.preventDefault() 可以取消事件的默认行为，但不能阻止事件冒泡，而使用 event.stopPropagation() 能阻止事件冒泡却不能取消事件的默认行为。如果既想取消事件的默认行为，又想阻止事件冒泡，则可以直接用 return false。

3、event.stopImmediatePropagation()

当使用 addEventListener 在同一个元素上绑定多个相同类型事件的事件监听函数时，比如先后绑定了click事件A 和 click事件B。正常情况下，我点击元素会先触发事件A，然后再触发事件B，但有时候我就只想触发事件A，而不想触发事件B，那该怎么办呢？这时就可以在事件A的处理函数中添加 event.stopImmediatePropagation() ，即可让剩下的监听函数不会被执行，包括事件冒泡行为。

4、event.target 和 event.currentTarget

target：触发事件的元素

currentTarget：事件绑定的元素

两者在没有冒泡的情况下，是一样的值，但在用了事件委托的情况下，就不一样了： event.target 是引发事件的目标元素(原始点击位置)，它在冒泡过程中不会发生变化。 event.currentTarget 是当前正在执行的监听函数所在的那个节点，在冒泡过程中值会发发生变化， event.currentTarget === this（this 指向触发事件的内部那个绑定监听函数的元素节点对象）。

事件的特性

冒泡型事件

事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。顺序是：div -> body -> html -> document ->

  <!-- 事件冒泡 -->
<div id="fu" @click="shiJian('fu')">fu  冒泡
            <div id="zi" @click.stop="shiJian('zi')">zi</div>
        </div>

事件捕获

捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。

<!-- 事件捕获 -->
        <div id="fu" @click.capture="shiJian('fu')">fu  捕获
            <div id="zi" @click="shiJian('zi')">zi</div>
        </div>

DOM事件流

同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。

对于非target节点则先执行捕获在执行冒泡
对于target节点则是先执行先注册的事件，无论冒泡还是捕获

JS事件