jQuery_事件对象

小咪咪 2022-05-20 23:52 252阅读 0赞

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

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

结果：  
![这里写图片描述][70]  
我们可以看到这个事件对象的一切信息

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,不会执行。  
![这里写图片描述][70 1]  
4.event.pageX //鼠标位置相对于浏览器文档的左侧距离  
5.event.pageY //鼠标位置相对于浏览器文档的上测距离  
6.event.stopPropagation() //阻止事件冒泡  
什么是冒泡呢？  
事件从dom 树的底层 层层往上传递，直至传递到dom的根节点。

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

具体参考冒泡事件

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

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

我们给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)
     });

结果：  
![这里写图片描述][70 2]  
9.event.which //鼠标的按键类型：左1、中2、右3  
判断按了鼠标的左键中键还是右键

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

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

控制台输出1  
![这里写图片描述][70 3]  
10.event.keyCode: //判断键盘按下的是哪一个键

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

当在键盘上按下“a”、‘b’、‘c’时，控制台打印出他们的编码：  
![这里写图片描述][70 4]

[70]: /images/20220521/6703a242870142788846483a81ee9b4b.png
[70 1]: /images/20220521/74682ea2a20742c2a21c291d60f76d7f.png
[70 2]: /images/20220521/80ae263a34b9482f8d05b2a0e1bd57e8.png
[70 3]: /images/20220521/103ed5ad91704ab8b660806d7a5bab3c.png
[70 4]: /images/20220521/3c7d52641e5c4053b2901cfbdb2d8b65.png