javascript里 添加事件句柄的参数有哪些？

你好，举个例子，先说JavaScript中事件句柄函数的this和even.target。

由于JavaScript的事件模型中，事件触发开始，有一个捕获阶段和冒泡阶段（详见：关于JavaScript的addEventListener第三个参数的注记）。所以触发元素分为精准触发元素和不精准触发元素。例如，在下面的结构中：

<div class="outer" id="outer">    <div class="mid" id="mid">

        <input type="button" class="active" id="inner" value="inner">

    </div></div>

假设三个相互嵌套的元素都有一个onclick点击事件句柄。那么当我点击按钮时触发点击事件，那么这个事件可以被这三个元素捕获，那么最内层的按钮元素，也就是我精确点击的元素，我称作：“精准触发元素”；相应的，剩下的两个就是“不精准触发元素”。

那么，由于触发事件句柄的回调函数中，第一个参数总是event实例，它有一个target的属性，指向的就是“精准触发元素”，而在“不精准触发元素”的回调函数中，this指向的就是元素本身，而event.target指向的就是那个“精准触发元素”，二者可以区分。

可以想见，在“精准触发元素”的事件函数内部，应该有this===event.target，而事实也确实如此。

如果用原生JavaScript代码或者jQuery都可以验证：

//原生

JavaScriptdocument.getElementById("inner").onclick=function(event){    console.log(this===event.target)

} //jQuery+匿名函数

$("#inner").click(function(event){    console.log(event.target===this)

})

但是当使用箭头函数验证时要格外注意。例如，下面代码验证的是错误的，因为箭头函数的this指向的不是本元素，而是全局变量window：

//错误

$("#inner").click((event)=>{    console.log(event.target===this)

})

我们需要给它手动绑定：

//正常

$("#inner").click((function(){    return (event)=>{        console.log(event.target===this)

    }

}).call($("#inner")[0]))

除了这2个，还有下面这些

传入的参数，一般是 函数名 参数多写在函数调用的。

希望采纳

在javascript中实现自定义事件的原理是创建一个管理事件的对象.如下代码是事件的定义:

function EventTarget(){

this.handlers = {}//存储事件处理程序,由n个键值对组成,键表示事件名,值是一个由事件处理程序组成的数组

}

EventTarget.prototype = {

constructor:EventTarget,

//添加事件

addHandler:function(type,handler){

if(typeof this.handlers[type] == "undefined"){

this.handlers[type] = []

}

this.handlers[type].push(handler)

},

//触发事件

fire:function(event){

if(!event.target){

event.target = this

}

if(this.handlers[event.type] instanceof Array){

var handlers = this.handlers[event.type]

for(var i=0,len=handlers.lengthi <leni++){

//将event传递给事件处理程序,event.target代表对象本身,

event.type代表事件名,你可以根据情况为添加event属性

handlers[i](event)

}

}

},

//移除事件

removeHandler:function(type,handler){

if(this.handlers[type] instanceof Array){

var handlers=this.handlers[type]

for(var i=0,len=handlers.lengthi <leni++){

if(handlers[i] == handler){

break

}

}

handlers.splice(i,1)

}

}

}

首先是定义了一个名为EventTarget的构造函数,为其定义的属性handlers用于存储事件处理程序,

然后有三个 *** 作方法添加到EventTarget的原型中,分别是addHandler fire remocveHander.

addHander是向handlers中添加事件处理程序

fire是触发handlers中的事件处理程序

removeHandler是向handlers中移除事件处理程序

注:事件处理程序通俗的讲就是事件被触发时需要执行的方法.

---