• 事件对象(一)


       JavaScript在事件处理函数中默认传递了event对象,也就是事件对象。但由于浏览器的兼容性,开发者总是会做兼容方面的处理。jQuery在封装的时候,解决了这些问题,并且
    还创建了一些非常好用的属性和方法。

       事件对象

       事件对象就是event对象,通过处理函数默认传递接受。之前处理函数的e就是event事件对象,event对象有很多可用的属性和方法,我们在JavaScript课程中已经详细的了解
    过这些常用的属性和方法,这里,我们再一次演示一下。

       如html(部分)代码如下:

    <input type="button" value="按钮" />

       通过处理函数传递事件对象:

    $("input").bind("click", function(e) { //接受事件对象参数
        alert(e); //[object Object]
    });

       event对象的属性

    属性名 描述
    type 获取这个事件的事件类型,例如:click
    target 获取绑定事件的DOM元素
    data 获取事件调用时的额外数据
    relatedTarget 获取移入移出目标点离开或进入的那个DOM元素
    currentTarget 获取冒泡前触发的DOM元素,等同于this
    pageX/pageY 获取相对于页面原点的水平/垂直坐标
    screenX/screenY 获取显示器屏幕位置的水平/垂直坐标(非jQuery封装)
    clientX/clientY 获取相对于页面视口的水平/垂直坐标(非jQuery封装)
    result 获取上一个相同事件的返回值
    timeStamp 获取事件触发的时间戳
    which 获取鼠标的左中右键(1,2,3),或获取键盘按键
    altKey/shiftKey/ctrlKey/metaKey

    获取是否按下了alt、shift、ctrl(这三个非jQuery封装)或meta键(IE原生meta键,jQuery做了封装)

       有html代码如下:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>事件对象</title>
        <script type="text/javascript" src="jquery-1.12.3.js"></script>
        <script type="text/javascript" src="demo.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
         <input type="button" value="按钮" />
    
         <div style=" 200px; height: 200px; background-color: #ccc;">
             <span style=" 100px; height: 100px; background-color: #eee; display: block;">
             </span>
         </div>
    </body>
    </html>

       通过event.type属性获取触发事件名:

    $("input").bind("click", function(e) {
        alert(e.type); //通过event.type属性获取触发事件名
        alert(typeof e.type); //触发事件名的类型——string
    });

       通过event.target获取绑定的DOM元素:

    $("input").bind("click", function(e) {
        alert(e.target); //[object HTMLInputElement]
    });

       注意:target是获取触发元素的DOM,触发元素,就是你点了哪个就是哪个;currentTarget得到的是监听元素的DOM,你绑定的哪个就是哪个。

    $("input").bind("click", function(e) {
        alert(e.target); //[object HTMLInputElement]
    });
    
    $("input").bind("click", function(e) {
        alert(e.currentTarget); //[object HTMLInputElement]
    });

       当绑定到div元素上时,

    $("div").bind("click", function(e) {
        alert(e.currentTarget); //[object HTMLDivElement]
    });

       下面再来看relatedTarget属性:

    //获取移入到span之前的那个DOM元素
    $("span").bind("mouseover", function(e) {
        alert(e.relatedTarget); 
    });
    
    //获取移出span之后到达最近的那个DOM元素
    $("span").bind("mouseout", function(e) {
        alert(e.relatedTarget); 
    });
    $("div").bind("click", function(e) {
        alert(this == e.currentTarget); //获取绑定的那个DOM元素,相当于this,返回true
    });
    //this代表e.currentTarget(div元素),e.target获取触发元素
    //当点击<div>元素时,e.target即是div元素,所以返回true
    //当点击<span>元素时,e.target即是span元素,所以返回false
    $("div").bind("click", function(e) {
        alert(this == e.target); 
    });

       通过event.data获取额外数据,可以是数字、字符串、数组、对象。

       获取的数据是数字:

    $("input").bind("click", 123, function(e) { //传递data数据
        alert(e.data); //获取数字数据
    });

       获取的数据是字符串:

    $("input").bind("click", "abc", function(e) {
        alert(e.data); 
    });

       获取的数据是数组:

    $("input").bind("click", [1,2,3,'a','b'], function(e) {
        alert(e.data[3]); 
    });

       获取的数据是对象:

    $("input").bind("click", {user:'Lee', age:100}, function(e) {
        alert(e.data.age); 
    });

       pageX/pageY:相对于页面原点的水平/垂直坐标;

       screenX/screenY:相对于显示器屏幕位置的水平/垂直坐标(非jQuery封装);

       clientX/clientY:相对于页面视口的水平/垂直坐标(非jQuery封装)。

    $(document).bind("click", function(e) {
        alert(e.pageX+","+e.screenX+","+e.clientX); //3个值相等
    });
    $(document).bind("click", function(e) {
        alert(e.pageY+","+e.screenY+","+e.clientY); //有滚动条会更好的说明
    });

       获取上一次事件的返回值:

    $("input").bind("click", function(e) {
        return 123;
    });
        
    $("input").bind("click", function(e) {
        alert(e.result);
    });

       获取当前的时间戳:

    $("input").bind("click", function(e) {
        alert(e.timeStamp);
    });

       获取鼠标的左中右键:

    $("input").bind("mousedown", function(e) {
        alert(e.which);
    });

       获取键盘的按键:

    $("input").bind("keyup", function(e) {
        alert(e.which);
    });

       获取是否按下了ctrl键,meta键不存在,导致无法使用:

    $("input").bind("click", function(e) {
        alert(e.ctrlKey);
    });
  • 相关阅读:
    汉语-词语:什么
    汉语-词语:甚么
    汉语-汉字:心
    汉语-词汇:头脑
    汉语-词语:冰冷
    汉语-词汇:冷静
    两个int类型的数据相加,有可能会出现超出int的表示范围。
    两个int类型的数据相加,有可能会出现超出int的表示范围。
    成员变量与局部变量的区别_
    函数额基本概述
  • 原文地址:https://www.cnblogs.com/yerenyuan/p/5428479.html
Copyright © 2020-2023  润新知