html对事件处理,html中事件处理中的this和event对象

在用js编写页面事件处理代码时，会常常涉及到this和event对象，但有时在采用不一样的事件处理，尤为是在与自定义的对象关联时，这些对象的指向变的有些复杂。html

本文来详细介绍下各类场景下 这些对象 真正指向。jquery

1、事件直接写在html标签中函数

一、案例1：测试

测试this

处理代码如编码

function clickBtn(){

alert(this.location.href);

}spa

这时的 this 是指向全局 Window对象。 prototype

二、案例2：code

测试htm

处理代码如

function clickBtn(obj){

alert(obj.innerHTML);

}

这时的 上述方法中的 obj指向的是按钮自己。也就是在 οnclick="clickBtn(this)"传入的this对象指向事件触发的按钮。

三、冒泡

测试

由于html事件的冒泡特性，虽然上面的onclick事件写在div上，这时不管是点击按钮仍是div区域，都会触发div上绑定的事件。

但不管点击的是哪一个，会发现 事件响应传入的 this指向的是 div，不是button.

在这种方式下，咱们除了能够将this对象传给事件处理函数外，还能够将event对象传给事件处理函数。event对象包含了触发事件的各类信息。

测试

四、事件响应函数为对象的方法

咱们看下，若是事件响应的函数为对象的方法，会出现什么变化。

测试

代码以下

functionHandleDemo(){this.msg="good";

}

HandleDemo.prototype.clickBtn=function(obj){

alert(obj.innerHTML);

alert(this.msg);

}var handleDemo = newHandleDemo();

这时会发现 clickBtn 方法中的 this 指向的是 handleDemo 对象。 参数obj由于是传入的，指向的是button对象，这个没变。

说明：直接在html标签中绑定事件，是一件很是很差的编码习惯，强烈不建议推荐。下面咱们介绍用jquery进行事件处理。

2、利用jquery绑定事件

一、方式一：

测试

脚本代码

alert(this.innerHTML);

alert(event.currentTarget.innerHTML);

}

上面代码 经过调用jquery对象的 click方法，参数就是事件响应处理函数。

这个函数能够带一个参数，jquery会把事件对象event传入。参数名能够是任意的，不必定叫event。

若是不定义参数，在函数中也可直接使用event。但通常若是须要用到event对象，最好显式定义下。

这时咱们会发现，在函数体中直接使用的this指向的是 button对象。 咱们能够不显示的定义对象，采用匿名函数的方式，如：

alert(this.innerHTML);

alert(ev.currentTarget.innerHTML);

});

这个代码与上面代码的效果彻底同样。

咱们再来看下，若是传给click方法的是对象的方法呢？

functionHandleDemo(){this.msg="good";

}

HandleDemo.prototype.clickBtn=function(ev){

alert(this.innerHTML);

alert(ev.currentTarget.innerHTML);

}var handleDemo = newHandleDemo();

$("#btn").click(handleDemo.clickBtn);

这时，咱们发现clickBtn中的 this指向的依然是 button对象，并非咱们想象中的 handleDemo对象。

这样就带来一个很大的问题，由于clickBtn方法是handleDemo对象的成员，若是咱们想要在clickBtn方法中访问handleDemo对象的其它成员，却没办法了。

除非直接使用全局变量，而这是很不推荐的。

下面咱们介绍jquery的另一种事件绑定方法。

二、方式二：bind方法

html代码依然不变

测试

脚本代码

functionclickBtn(ev){

alert(this.innerHTML);

alert(ev.currentTarget.innerHTML);

}

$("#btn").bind("click",clickBtn);

这时，事件处理方法依然有一个参数指向event对象。

咱们发现 clickBtn中的 this 指向的是 button对象。

bind函数，有三个参数，第一个是表明事件类型；第二个是传递给事件处理的额外信息对象(会赋值给event的data属性)；第三个是事件处理函数。

上面例子咱们只使用了第1个和第3个。下面咱们看下例子：

functionclickBtn(ev){

alert(this.innerHTML);

alert(ev.currentTarget.innerHTML);

alert(ev.data.msg);

}

$("#btn").bind("click",{msg:"hello"},clickBtn);

采用这种方式，咱们传递了额外的对象给事件处理函数。这在某些场景下仍是能用到的。

下面咱们看下这种方式下传入的事件处理函数是对象的方法：

functionHandleDemo(){this.msg="good";

}

HandleDemo.prototype.clickBtn=function(ev){

alert(this.innerHTML);

alert(ev.currentTarget.innerHTML);

alert(ev.data.msg);

}var handleDemo = newHandleDemo();

$("#btn").bind("click",handleDemo,handleDemo.clickBtn);

咱们能够将对象自己做为bind方法的第二个参数传入。以解决在方法中没法访问对象其它成员的问题。

注意：采用jquery的事件绑定，不管是用bind方法，仍是上一种方法。 若是调用屡次，会绑定屡次，而不会后面的覆盖前面的，事件触发时，事件函数会被屡次执行。