Javascript元素添加事件分析

元素添加事件是最简单和向后兼容性最好的Javascript事件添加方法,例如:

<input type="text" value="Happy everyday!" onclick="alert(this.value)" />

这时鼠标点击文本字段,则会弹出该文本字段属性value的值"Happy everyday!"。

往往事件处理不仅有 alert(this.value) ,会包含很多行代码,所以通常会把代码写入事件处理函数中,用onclick属性调用处理函数。

例一:

<input type="text" value="Happy everyday!" onclick="myFunc()" />

<script>
function myFunc(){
  alert(this.value); // output undefined
  //more of the script statements
}
</script>

点击鼠标后,结果却输出 undefined ,我们先接着看下面的实例:

例二:

<input type="text" value="Happy everyday!" onclick="myFunc()" />

<script>
var value = 'Happy New Year!';
function myFunc(){
  alert(this.value); // output "Happy New Year!"
  //more of the script statements
}
</script>

可以发现输出为"Happy New Year!",根据以上两个实例,可以得出this指向的是window对象,或者说函数myFunc无法找到其调用对象,所以输出的是window对象value属性的值"Happy New Year!"。为什么this指向window对象呢?请接着看实例:

例三:

<input type="text" value="Happy everyday!" onclick="myFunc(this)" />

<script>
var value = 'Happy New Year!';
function myFunc(obj){
  alert(obj.value); // output "Happy everyday!"
  //more of the script statements
}
</script>

这次终于得到我们期望的结果"Happy everyday!",根据例二、例三,我得出非官方的结论:

在每一个事件处理函数外部都会初始化的被加入一个匿名函数,所以函数myFunc找不到其调用对象,根据js作用域机制,this只能指向window对象,下面举个不恰当但能解释此结论的例子:

例四:

<input type="text" value="Happy everyday!" />

<script type="text/javascript">
var value = 'Happy New Year!';
function myFunc(){
  alert(this.value); // output "Happy New Year!"
  //more of the script statements
}
document.getElementsByTagName('input')[0].onclick = function () {
  alert(this.value);  // output "Happy everyday!"
  myFunc();  // output "Happy New Year!"
}
</script>

至此,元素添加事件分析完毕,还望指教!

现今国内互联网环境,在html元素上添加事件还很常见,但大多是较为复杂的前端交互中用到,最典型的是邮箱;在各个js框架中,则清一色的选择addEventListener || attachEvent,这也是w3c与前端大佬们都推荐的;而我图省事,在没有框架的小的项目中,会选择对象添加事件。

每一种添加事件的方式都有利弊吧,根据实际情况选择就ok。除了元素添加事件外,还有下面4种常见添加事件方法:

对象添加事件:

<input type="text" value="Happy everyday!" />

<script>
document.getElementsByTagName('input')[0].onclick = function(){
  alert(this.value);
}
</script>

<script for> 标识符添加事件:

<input type="text" id="input" value="Happy everyday!" />

<script for="input" event="onclick">  //属性for的值是相应元素的id
  alert(this.value);
</script>

注:由于此方法最早由微软提出,至今未被w3c组织采纳,所以只适用于ie浏览器。如果采用这种添加方式,就意味着您必须为每一个要添加事件的元素创建一个 <script for> 标识。

attachEvent 方法添加事件:

<input type="text" value="Happy everyday!" />

<script>
function myFunc(){
  alert(this.value); // output undefined
  // more of the script statements
}
document.getElementsByTagName('input')[0].attachEvent("onclick", myFunc);
</script>

注:此方法也为ie专属,其它浏览器用 addEventListener 方法,由于attachEvent原生的未能将this绑定到调用对象,所以输出undefined,John Resig 和 Dean Edwards 都已很好的解决此问题,可以自行搜索!

addEventListener 方法添加事件:

<input type="text" value="Happy everyday!" />

<script>
function myFunc(){
  alert(this.value);
}
document.getElementsByTagName('input')[0].addEventListener("click", myFunc);
</script>

注:此方法是W3C DOM标准定义的。

This entry was posted in Javascript/Ajax and tagged . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Free Web Hosting