js 事件对象

Posted 2021-01-04 暗恋桃埖源

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js 事件对象相关的知识，希望对你有一定的参考价值。

/*
事件绑定的格式：
元素节点.on + 事件类型 = function(){

}

元素节点
事件类型
on+事件类型：事件处理函数
【注】上述三者一绑定：生成一个新的事件对象。
【注】触发事件以后，系统会去调用相关的事件处理函数。

事件对象获取：系统调用相关的函数的时候，会直接将生成的事件对象，当做参数传入到我们的函数内部。

已下代码演示用到的html结果：

<body>
    <button id = "btn1">按钮</button>
</body>

            window.onload = function(){
                var oBtn = document.getElementById(\'btn1\');
                /*所以
                oBtn.onclick = function(){}  就是一个事件对象
                oBtn 也是一个对象，所以我们把上面中的.onclick = function(){}看作是 oBtn对象的一个方法（函数）；
                我们把这个事件函数写在这以后，什么事件调用的呢？
                我们都知道，只有按钮被点击时才会调用这个事件函数，所以这个函数是系统给调用的。
                【注】我们自己调用得在页面写如下代码
                    oBtn.onclick();//我们自己调用
            
                */
                
            //}

继续看：

            window.onload = function(){
                var oBtn = document.getElementById(\'btn1\');
                
                oBtn.onclick = function(){
                    alert(1);
                } 
            
                oBtn.onclick();//我们自己调用     
                
            }

// 这样页面加载过程中就会弹出消息框 1，点击按钮后也会弹出消息框 1；

/* 我们再来看一下 oBtn.onclick = function(){} 在调用的时候我们并没有传参，我们利用arguments（函数内置的数组 arguments（只要声明一个
函数，系统就会自动分配一个arguments数组）用来存函数内的参数）；*/

//测试一我们自己调用时给传入实参会怎么

            window.onload = function(){
                var oBtn = document.getElementById(\'btn1\');
                
                oBtn.onclick = function(){
                    alert(arguments);
                } 
            
                oBtn.onclick(10);//我们自己调用   给他一个实参  10  
            
            }

//给我们的弹窗为 [object Arguments] 说明是一个Arguments对象

/*我们再来看一下我们传入的10 有没有存进去*/

            window.onload = function(){
                var oBtn = document.getElementById(\'btn1\');
                
                oBtn.onclick = function(){
                    alert(arguments[0]);//arguments函数内数组的0号下标
                } 
            
                oBtn.onclick(10);//我们自己调用   给他一个实参  10  
            
            }

//我们的测试结果是 10 说明我们的实参已经传入了进去。

/*测试二我们来看一下系统给我们调用时会给arguments 函数内数组传入什么*/

            window.onload = function(){
                var oBtn = document.getElementById(\'btn1\');
                
                oBtn.onclick = function(){
                    alert(arguments[0]);//arguments函数内数组的0号下标
                } 
                //点击页面上的按钮，让系统自己调用
                        
            }

//点击页面上的按钮给我们弹出 [object MouseEvent] 翻译出来是鼠标事件对象，刚好click就是鼠标事件类型的一种，
//所以系统在调用时传入的参数是一个事件对象

/*
通过上面的arguments[0]的方式我们可以拿到这个事件函数的事件对象，但是我们都知道，在编程中能不用arguments就不用
arguments，所以我们准备给事件函数添加一个自定义形参ev（因为事件的英语单词为event，所以我们就自定义了一个ev方便代码阅读）
即oBtn.onclick = function(ev){}；具体代码如下*/

            window.onload = function(){
                var oBtn = document.getElementById(\'btn1\');
                
                oBtn.onclick = function(ev){
                    alert(ev);//查看我们的形参
                } 
                        
            }

效果与上图相同

可以看出通过自定义形参的方式依然可以得到事件对象
但是在IE8以下不支持这中形式，但是IE给我们提供了一种方式通过window.event
具体代码如下

            window.onload = function(){
                var oBtn = document.getElementById(\'btn1\');
                
                oBtn.onclick = function(){
                    alert(window.event);//IE8下的方法 ，看看能弹出点什么
                } 
                        
            }

//弹出的内容为 [object PointerEvent] 也是鼠标事件对象的意思，所以我们可以通过这个方法获取，
//怎么才能兼容所有的浏览器呢，这里有个获取事件对象的固定格式写法，具体代码如下

            oBtn.onclick = function(ev){
                var e = ev || window.event;
                //alert(e);

            }

//利用或运算的短路操作给变量 e 赋值。
//var e = ev || window.event; 这句语句的意思是变量 e 如果浏览器有 ev 形参这种方式或运算后面的 window.event 就不计算了，
//所以e 也就等于 ev 了，如果没有ev这种形式，就执行后面的语句 e也就等于window。event了；

/*
费劲心思的拿到事件对象是因为事件对象有很多属性要加在事件对象上。
例如鼠标事件上的 .button .clientX .clientY .pageX .pageY .screenX .screenY
修改键（快捷键）属性 .shiftKey .ctrlKey .altKey .metaKey
加在键盘事件上的 keydown keyup keypress

以上是关于js 事件对象的主要内容，如果未能解决你的问题，请参考以下文章

js代码片段

VSCode自定义代码片段12——JavaScript的Promise对象

原生js如何绑定a连接点击事件？

AJAX相关JS代码片段和部分浏览器模型

HLS.js 获取视频片段信息