在javascript中，操作dom元素是十有八九的事，今天就来给大家一起讨论下给元素绑定事件的问题。
一、关于onclick的方法在script脚本中定义的位置
在一般的页面中，可能要操作的元素都是提前写到页面中的，给这种元素添加事件方法很多，并且一般不会出什么错。大概有以下两种情况：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//第一种 <a href="javascript:void(o)" onclick="test()">点我</a> //第二种 <a href="javascript:void(o)" id="clicka">点我</a> <script type="text/javascript"> function test(){ alert(0); } document.getElementById("clicka").onclick = function(){ alert(0); } </script> |
注意：通常我们会为了让js脚本在页面加载完成后才执行，而把所有的代码写在window.onload = function(){ }中，但如果我们把上例中的代码改成下面这样，你会得不到想要的结果：
|
1 2 3 4 5 6 7 8 |
<a href="javascript:void(o)" onclick="test()">点我</a> <script type="text/javascript"> window.onload = function(){ function test(){ alert(0); } } </script> |
这是为什么呢，因为test()方法被包在了另一个function中，所以对于window.onload来说，test相当于是它的一个私有方法，而私有方法是不可以被外部访问的，故得不到想要的效果，要解决这个问题，就只有把test写在全局作用域中才行，也就是
|
1 2 3 4 5 |
<script type="text/javascript"> function test(){ alert(0); } </script> |
二、createElement或innerHTML添加元素时绑定事件的顺序
另外，在js中，我们可能会通过createElement或innerHTML添加元素，此两者的区别在于，用createElement创建的元素，你可以先绑定事件再进行添加，也可以添加之后再绑定事件，如下，两种方法都可以
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var boxdom = document.getElementById("box"); var doma = document.createElement("span"); doma.onclick = function(){ alert(0); } boxdom.appendChild(doma); //或者： var domb = document.createElement("span"); boxdom.appendChild(doma); doma.onclick = function(){ alert(0); } |
而通过innerHTML添加的元素，只能在元素添加成功后才可以绑定事件
|
1 2 3 4 5 6 7 |
var boxdom = document.getElementById("box"); //添加元素在前 boxdom.innerHTML = "<span id="span">我是一个span元素</span>" //绑定事件在后 document.getElementById("span").onclick = function(){ alert(0); } |
三、动态绑定事件的传值问题
动态绑定事件的时候，可能会遇到传递参数的问题，从而导致方法中this的指向发生偏离问题，这个时候我们需要使用call或者apply将this的指向纠正过来。当然，如果没有参数需要传递，则不必，如下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
//1.无参情况下 spandom.onclick = test; function test(){ alert(this.innerHTML); } //2.需要传参情况下 spandom.onclick = function(){ test.call(this,"hello,world"); } function test(str){ alert(this.innerHTML + str); } |
发表评论