jQuery_事件对象

在浏览器客户端应用平台，基本上都是以事件驱动的，即某个事件发生，然后做出相应的动作。
浏览器的事件表示的是某些事情发生的信号。
一.什么是事件对象？

$('#btn').click(function(e){
 console.log(e);
})

结果：

我们可以看到这个事件对象的一切信息

event对象简介
eg：

$('button').one('click','ww', function (e) {
        alert(e.data);
 });
 //event.data 就是ww

2.event.currentTarget
在事件响应方法中等同于this，当前DOM对象
一定是===this

3.event.target
触发事件源，不一定==this
事件触发的源头

$('div').on('click',function(e){
  if(e.target===this){
   console.log('你点击的div')
 }
})

当点击div的时候，会执行console.log(‘你点击的div’)，当点击div的子元素p,不会执行。

4.event.pageX //鼠标位置相对于浏览器文档的左侧距离
5.event.pageY //鼠标位置相对于浏览器文档的上测距离
6.event.stopPropagation() //阻止事件冒泡
什么是冒泡呢？
事件从dom 树的底层 层层往上传递，直至传递到dom的根节点。

事件冒泡，当点击子元素的时候，子元素会将产生的事件往上冒泡，作为父节点和祖节点也会收到此事件，于是会做出事件响应，执行响应函数

具体参考冒泡事件

对某一个节点而言，如果不想它现在处理的事件继续往上冒泡的话，我们可以终止冒泡：

在相应的处理函数内，加入 event.stopPropagation() ,终止事件的广播分发，这样事件停留在本节点，不会再往外传播了
eg：
HTML：

<div class="box">
    <a href="http://baidu.com" class="link">百度链接</a>
</div>

我们给d父元素div和子元素a标签都添加click事件：

$('.link').on('click',function(e){
            //取消默认操作
            e.preventDefault();

        });
$('.box').on('click',function () {
       alert('我是父盒子！')
});

这时，当我们点击子元素a的时候，事件源a的点击事件会触发，同时父元素box的点击事件也会触发，

因为事件冒泡，会一级一级向上传递，当点击a元素的click事件，向上传递到父元素div，当div也有click事件的时候，div的click事件也会被触发，

这是我们不想要的，为了防止这种行为，我们要在子元素a添加阻止事件冒泡

$('.link').on('click',function(e){
            //取消默认操作
       e.preventDefault();
       e.stopPropagation();
 });
//        $('.box').on('click',function () {
//            alert('我是父盒子！')
//        });

这样点击子元素a就不会触发父元素div点击事件了

7.e.preventDefault() //阻止默认行为
eg：sumbit 点击自动提交，a标签href自动跳转

<div class="box">
    <a href="http://baidu.com" class="link">百度链接</a>
</div>
$('.link').on('click',function(e){
            //取消默认操作
            e.preventDefault();
 });

点击a标签将不会跳转到百度链接

8.event.type //事件类型：click、dbclick…

$('.link').on('click',function(e){
            //取消默认操作
            e.preventDefault();
            console.log(e.type)
 });

结果：

9.event.which //鼠标的按键类型：左1、中2、右3
判断按了鼠标的左键中键还是右键

 $(window).on('click',function (e) {
      console.log(e.which)
 });

当在浏览器中按下鼠标左键的时候：

控制台输出1

10.event.keyCode: //判断键盘按下的是哪一个键

$(window).on('keydown',function (e) {
   //输出的是键盘字母的编码
  console.log(e.keyCode);
 })

当在键盘上按下“a”、‘b’、‘c’时，控制台打印出他们的编码：