求解答js事件对象event的传入方式的困惑!

古道西风瘦马
  • 331
<input type="button" id="test" value="btn">

var btn = document.getElementById("test");
btn.onclick = function aa(event)
{ alert(event.type);}
不明白为什么event要以一个函数参数的方式传进去?
为什么不直接放在alert里用?
平常我所见到了传参都是先在函数里放个参数名,然后调用时给具体的值!
例如function aa(test){document.write(test)}
然后调用aa(123);之后输出了就是123.
可以是这个event有没传什么进去!求大神解答一下

回复
阅读 8.1k
6 个回答

我是这么理解的

事件对象传递原理

1、前置知识回顾

在讲传递原理前,我们先看看普通函数是如何传递参数的:

    let num1=1,num2=2,num3=3;
    function foo(){
        console.log(arguments);
    }
    
    function foo1(a,b,c){
        console.log(a,b,c);
    }
    
    foo(num1,num2,num3,num1,num2);
    foo1(num1,num2);

可以从例子中看到,给函数传递参数,是在我们执行函数的时候才能进行的。在建立函数的时候,不管你设定形参也好,还是不设定形参,都不影响函数参数的传递。

关键在于谁能执行函数,谁就能给函数传递参数。

我们设定形参,形参就能接收对应位置的实参。不设定形参,在arguments里面也能找到。

2、事件对象参数的传递模拟

现在我们来模拟一个事件对象参数的传递过程:

定义一个事件对象myEvent:

    let myEvent={
        type:"点击",
        clientX:"x方向坐标",
        clientY:"y方向坐标",
        target:"事件源"
    }

写一个事件函数:

function fn(){
   console.log(arguments[0]);
}

ele.onclick=fn;

假设我是点击事件,当触发我的时候,我就会执行fn函数:

fn(myEvent);

然后就会打印出参数。

执行fn不是开发人员去做的,所以开发人员不能传递实参给fn。只有事件自己可以传递实参给fn,那它现在想传的就是myEvent。

所以,对于开发人员而言,才说这个事件对象是自动传递进去的。

那为了方便,开发人员可以给fn函数设定形参,来接收这个自动传入的事件对象:

function fn(e){
    console.log(e);
    console.log(e.type);
}

触发事件,事件方法执行的时候,传入实参myEvent,这个实参自然会赋值给形参e,所以,e=myEvent。这样使用就方便了。

这就是事件对象传递原理。

Pacino
  • 1
新手上路,请多包涵

《JavaScript高级程序设计》(第三版)P355:“在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。”
也就是说,这个event的值是自动传入的。而在事件处理程序所绑定的的函数参数里加上这个event对象,只是为了方便在函数中使用这个对象而已。

event代表的是window.event对象,他把这个参数传进去了,如果你不传也没关系,但是要考虑到浏览器有没有window.event的问题,以前貌似FF是没有的;

触发click系统传了event,只不过这个代码你看不到。

在触发 DOM 上的某个事件时,会产生一个事件对象 event,这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。例如,鼠标操作导致的事件对象中,会包含鼠标位置的信息,而键盘操作导致的事件对象中,会包含与按下的键有关的信息。所有浏览器都支持 event 对象,但支持方式不同。

DOM 中的事件对象

兼容 DOM 的浏览器会将一个 event 对象传入到事件处理程序中。无论指定事件处理程序时使用什么方法(DOM1 级或 DOM2 级),都会传入 event 对象。来看下面的例子。

var btn = document.getElementById("myBtn");
btn.onclick = function(event){
    console.log(event.type);     // "click"
};
btn.addEventListener("click", function(event){
    console.log(event.type);     // "click"
}, false);

这个例子中的两个事件处理程序都会弹出一个警告框,显示由 event.type 属性表示的事件类型。这个属性始终都会包含被触发的事件类型,例如 "click"(与传入 addEventListener()removeEventListener() 中的事件类型一致)。

在通过 HTML 特性指定事件处理程序时,变量 event 中保存着 event 对象。请看下面的例子。

<input type="button" value="Click Me" onclick="console.log(event.type)"/>

以这种方式提供 event 对象,可以让 HTML 特性事件处理程序与 JavaScript 函数执行相同的操作。

event 对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样,可用的属性和方法也不一样。不过,所有事件都会有下表列出的成员。

  • bubbles,表明事件是否冒泡。

  • cancelable,表明是否可以取消事件的默认行为。

  • currentTarget,其事件处理程序当前正在处理事件的那个元素。

  • defaultPrevented,为 true 表示已经调用了 preventDefault()(DOM3 级事件中新增)。

  • detail,与事件相关的细节信息。

  • eventPhase,调用事件处理程序的阶段:1表示捕获阶段,2表示“处于目标”,3表示冒泡阶段。

  • preventDefault(),取消事件的默认行为。如果 cancelabletrue,则可以使用这个方法。

  • stopImmediatePropagation(),取消事件的进一步捕获或冒泡,同时阻止任何事件处理程序被调用(DOM3 级事件中新增)。

  • stopPropagation(),取消事件的进一步捕获或冒泡。如果 bubblestrue,则可以使用这个方法。

  • target,事件的目标。

  • trusted,为 true 表示事件是浏览器生成的。为 false 表示事件是由开发人员通过 JavaScript 创建的(DOM3 级事件中新增)。

  • type,被触发的事件的类型。

  • view,与事件关联的抽象视图,等同于发生事件的 window 对象。

更多内容可参考《JavaScript 闯关记》之事件

event是一个全局变量.传不传都是一样的,不传你也能在alert中访问.

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏