js事件

事件类型

鼠标事件

当用户在文档上移动和单击鼠标时都会产生鼠标事件。这些事件在鼠标指针所对应的最深嵌套元素上触发。但其会冒泡直到文档的最顶层。 clientX和clientY属性指定了鼠标在窗口坐标中的位置。button和which属性指定了按下的鼠标键是哪个。 当鼠标辅助键按下的时候，对应的属性为altkey和ctrlkey和metakey和shiftkey会设置为true，对于click事件，detail属性指定了其是单击，双击，还是三击。 每当用户移动和拖动鼠标时，会触发mousemove事件，当用户按下或释放鼠标按键的时候触发mousedown和mouseup事件。 在mousedown和mouseup事件队列之后，浏览器也会触发click事件，如果用户在很短的时间内单击两次鼠标，则第二个事件为dblclic事件，当单击鼠标右键时，浏览器会显示上下文菜单，在显示菜单之前，也会触发contextmenu事件，如果取消这个事件将会阻止菜单的显示，该事件为获得鼠标右击通知的最简单方法。 当用户移动鼠标指针从而使它悬停到新元素上时，浏览器就会在该元素上触发mouseover事件，当鼠标移动指针从而使它不在悬停在某个元素上时，浏览器会触发mouseout事件，（该事件有relatedTarget属性指明这个过程涉及的其他元素） 当用户滚动鼠标的时候，浏览器触发mousewheel事件，传递事件对象属性指定轮子转动的大小和方向。

作者：mySoul 链接：juejin.cn/post/684490… 来源：掘金

常见鼠标事件

click   //点击事件
mousedown   //鼠标按下
mouseup     //鼠标抬起
mouseenter  //鼠标进入
mouseleave  //鼠标离开
mouseover   //鼠标悬停
mouseout    //鼠标离开
mousemove   //鼠标移动
...
//不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件,可以参考下这里:
http://www.w3school.com.cn/tiy/t.asp?f=jquery_event_mouseleave_mouseout

键盘事件

常见键盘事件

keydown     //按键按下
keypress    //按键持续按下
keyup   //按键抬起
...
//这里介绍个小技巧，由于某些原因(应该是避免误操作)，键盘在长按不抬起的情况下，每次键盘事件循环触发是有间隔的，会导致一种卡顿感，当遇到一些需要长按的使用场景时，建议可以使用一个状态标记，即按下时创建一个状态，当松开后才会修改该状态，这样就使得原本长按会一卡一卡的效果变得十分流畅了

UI事件

load    //资源加载完成触发事件
unload  //离开页面触发事件
resize  //浏览器窗口大小改变事件
scroll  //页面滚动事件

事件监听(原生JS)

//实现一个鼠标点击按钮更改背景颜色的样例（只列出js部分）
var btn = document.getElementById("btn");
btn.addEventListener('click',function(){
    body.style.backgroundColor = "blue";
},false);

addEventListener函数:第一个参数为监听的事件名，第二个参数为事件触发时的回调函数，第三个参数决定捕获(true)还是冒泡(false)

冒泡&捕获

当鼠标点击所看到的的按钮时，其实发生了一系列的事件传递，可以想象一下，button实际上是被body“包裹”起来的，body是被html“包裹”起来的，html是被document“包裹”起来的，document是被window“包裹”起来的。所以，在你的鼠标点下去的时候，最先获得这个点击的是最外面的window，然后经过一系列传递才会传到最后的目标button，当传到button的时候，这个事件又会像水底的泡泡一样慢慢往外层穿出，直到window结束。综上，一个事件的传递过程包含三个阶段，分别称为：捕获阶段，目标阶段，冒泡阶段

<div id="div1">
    <p id='p1'>
        <span id="span1">
            "Click Me!"
        </span>
    </p>
</div>

//给最外层元素div绑定事件
var div = document.getElementById('div1');
div.addEventListener("click",function(){
    console.log("div1");
},false);
//给p元素绑定事件
var p = document.getElementById('p1');
p.addEventListener("click",function(){
    console.log("p");
},false);

点击Click Me后结果如下：
> p
> div
//首先触发p的事件，然后触发div的事件，与冒泡模型期望一致
//可以尝试将冒泡模型更改为捕获模型试一下，打印结果应与现在相反
//将p元素绑定的事件代码修改如下:
p.addEventListener("click",function(event){
    event.stopPropagation();
    console.log("p");
},false);
//再次运行后发现打印结果为：
> p
//stopPropagation 可以阻止事件冒泡

事件代理

那什么叫事件委托呢？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。那这是什么意思呢？网上的各位大牛们讲事件委托基本上都用了同一个例子，就是取快递来解释这个现象: 有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台也会在收到寄给新员工的快递后核实并代为签收。

<ul id="list">
    <li>我是Li1</li>
    <li>我是Li2</li>
    <li>我是Li3</li>
    <li>我是Li4</li>
    <li>我是Li5</li>
</ul>

//针对上述html，想要给每个li都加一个事件无疑是比较麻烦的，而且也无法处理后面新加入的li元素，使用事件代理的方式可以轻松搞定:
var ul = document.getElementById('list');
ul.addEventListener('click',function(){
    console.log("click");
},false);
//你会发现点击每个li都会触发事件，这样就实现了一个简单的事件代理

event

在addEventListener参数中的回调函数是可以接收参数的，事件触发时会把事件作为第一个参数传递给回调函数，事件中记录了很多信息，包括是由谁触发的该事件等，可以将event打印出来查看都包含有哪些信息

作用域

<script src="https://7.url.cn/edu/jslib/jquery/1.9.1/jquery.min.js"></script>
<div id='test1'>
	<div id='test2'>
		Hello World!
	</div>
</div>

原生js：
var d1 = document.getElementById("test1");
d1.addEventListener('click',function(event){
    console.log(this);
},false);
//div2
jQuery:
$('#test1').on("click",'#test2',function(){
    console.log(this)
})
//div1