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

<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有没传什么进去！求大神解答一下

javascript

阅读 13.2k

6 个回答

hululu

我是这么理解的

事件对象传递原理

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

发布于
2017-04-18

更新于
2017-04-18

新手上路，请多包涵

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

crp205

3.9k3821

发布于
2016-10-31

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

x007

76311017

发布于
2016-10-31

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

劼哥stone

1.5k1214

发布于
2016-10-31

在触发 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()，取消事件的默认行为。如果 cancelable 是 true，则可以使用这个方法。
stopImmediatePropagation()，取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用（DOM3 级事件中新增）。
stopPropagation()，取消事件的进一步捕获或冒泡。如果 bubbles 为 true，则可以使用这个方法。
target，事件的目标。
trusted，为 true 表示事件是浏览器生成的。为 false 表示事件是由开发人员通过 JavaScript 创建的（DOM3 级事件中新增）。
type，被触发的事件的类型。
view，与事件关联的抽象视图，等同于发生事件的 window 对象。