您的位置: 首页  >  文章  >  event对象

event对象

分类: 文章 • 2023-12-12 23:27:46

1、event对象作为windows对象的一个属性被访问和使用；

    windows.event

windows引用部分可选，脚本可像全局引用一样使用event对象

     event.propertyName

2、在W3C事件模型中，event对象的引用比较复杂。多数情况下，必须明确的将event对象作为一个参数传递到事件处理函数中。event对象也可自动作为参数传递，这取决于事件处理函数与对象绑定的方式。

如果使用原始方法将事件处理函数与对象绑定(通过元素标记的一个属性)，则必须把event对象作为参数传递：

    onKeyUp="example(event)"

全局引用一样明确引用event对象，这个引用只作为事件处理函数的参数，在别的内容中不起作用，如果有多个参数，则event对象引用可以以任意顺序排列：

    onKeyUp="example(this,event)"

与元素绑定的函数定义中，应该有一个参数变量来“捕获”event对象参数：

    function example(widget,evt){...}

还可以使用其他方式将事件处理函数绑定到对象（使用属性赋值和W3C DOM的addEventListener()方法），将这些事件处理函数的引用赋值给文档中所需的对象：

    document.forms[0].someButton.οnkeyup=example;

    document.getElementByld("myButton").addEventListener("keyup",example,false);

函数需要一个参数变量来接收传递event对象：

    function example(evt){...}

3、event对象的属性

（1）altLeft属性用于设置或获取Alt键的状态。检索左Alt键的当前状态，返回值为true表示关闭，返回false表示开启：

    语法格式：[window.]event.altLeft

    由于altLeft属性是boolean值，因此可用于if语句中，根据获取的值执行不同的操作

（2）ctrlLeft属性用于设置或获取Alt键的状态。检索左Ctrl键的当前状态，返回值为true表示关闭，返回false表示开启：

    语法格式：[window.]event.ctrlLeft

    由于ctrlLeft属性是boolean值，因此可用于if语句中，根据获取的值执行不同的操作

（3）shiftLeft属性用于设置或获取Alt键的状态。检索左shift键的当前状态，返回值为true表示关闭，返回false表示开启：

    语法格式：[window.]event.shiftLeft

    由于shiftLeft属性是boolean值，因此可用于if语句中，根据获取的值执行不同的操作

由于这三个实行值都是Boolean类型的，可以将他们组合成一个条件在if语句中应用，并且可以和altKey、ctrlKey及shiftKey属性使用。

例子：

将altKey、ctrlKey及shiftKey属性组合成一个综合条件，应用if语句判断Ctrl键、Shift键和Alt键同时按下时执行的操作：

event对象

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8" http-equiv="Content-Type" content="text/html">
<title>无标题文档</title>
    <script>
        function example(){
            if(window.event.ctrlKey && window.event.shiftKey && window.event.altKey){
                alert('欢迎！');
                
            }
        }
        document.onkeydown = example;
    </script>
</head>

<body>
    <p>同时按下Ctrl、shift和Alt键</p>
</body>
</html>

 

（4）button属性用于获取事件发生时用户所按得鼠标键

语法格式：[window.]event.button

该属性的值说明：0：按下鼠标左键；1：按下鼠标中键；2：按下鼠标右键。

例子：当按下鼠标右键会弹出提示框，单击“确定”按钮后会跳转到新的地址：

event对象

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>button属性</title>
    <script>
        function button(){
            if(event.button==2){
                alert('欢迎你的到来！');
                window
                .open("https://mp.****.net/console/editor")
            }
        }
        document.οnmοusedοwn=button;
    </script>
</head>

<body>
    <p>按下鼠标右键有惊喜哦！</p>
</body>
</html>

 

 

相关推荐