Javascript给元素添加事件

[不指定 2007/09/18 19:02 | by ipaddr ]

最简单的是这样:

<input type="button" onclick="alert(this.value)" value="我是 button" />

动态添加onclick事件:

<input type="button" value="我是 button" id="bu">
<script type="text/javascript">
var bObj=document.getElementById("bu");
bObj.onclick= objclick;
function objclick(){alert(this.value)};
</script>

如果使用匿名函数 function(){},则如下面所示:

<input type="button" value="我是 button" id="bu">
<script type="text/javascript">
var bObj=document.getElementById("bu");
bObj.onclick=function(){alert(this.value)};
</script>


FF中应该使用bObj.click=function() {}

上面的方法其实原理都一样,都是定义 onclick 属性的值。值得注意的是,如果多次定义 obj.onclick,例如:obj.onclick=method1; obj.onclick=method2; obj.onclick=method3,那么只有最后一次的定义obj.onclick=method3才生效,前两次的定义都给最后一次的覆盖掉了。

再看 IE 中的 attachEvent:

<input type="button" value="我是拉登" id="bu">
<script type="text/javascript">
var bObj = document.getElementById("bu");
bObj.attachEvent("onclick",method1);
bObj.attachEvent("onclick",method2);
bObj.attachEvent("onclick",method3);
function method1(){alert("第一个alert")}
function method2(){alert("第二个alert")}
function method3(){alert("第三个alert")}
</script>

执行顺序是 method3 > method2 > method1 ,先进后出,与堆栈中的变量相似。需要注意的是attachEvent 中第一个参数是on开头的,可以是 onclick/onmouseover/onfocus 等等

据说(未经确认验证)在 IE 中使用 attachEvent 后最好再使用 detachEvent 来释放内存

再看看 Firefox 中的的 addEventListener:

<input type="button" value="我是布什" id="bu">
<script type="text/javascript">
var bObj = document.getElementById("bu");
bObj.addEventListener("click",method1,false);
bObj.addEventListener("click",method2,false);
bObj.addEventListener("click",method3,false);
function method1(){alert("第一个alert")}
function method2(){alert("第二个alert")}
function method3(){alert("第三个alert")}
</script>

可以看到,在 ff 中的执行顺序是 method1 > method2 > method3 , 刚好与 IE 相反,先进先出。需要注意的是 addEventListener 有三个参数,第一个是不带“on”的事件名称,如 click/mouseover/focus等。

实现IE与Firefox的DHTML

[不指定 2007/09/18 10:28 | by ipaddr ]

1.在访问某一节点时,如 childNodes[i],要获得这个节点的值,这个值是<![CDATA[]]类型,在IE中,可以这样访问 childNodes[i].text,childNodes[i].firstChild.nodeValue;在Firefox中只能通过childNodes[i].firstChild.nodeValue访问.

2.
<root>
<e>text</e>
</root>

以上的XML,在IE中,<e>是<root>的第一个子元素,可以通过 root.childNodes[0],或root.firstChild访问<e>,但在Firefox中,<e>是<root>的第二个子元素,第一个子元素是换行符,nodeType是#text,如果将代码改为以下:

<root><e>text</e></root>

那么IE与Firefox都是一样的,<e>都是<root>的第一个子元素.

3.insertRow,insertCell
在IE中,insertRow()如果没有指定参数,则在表格后面添加行,默认参数为-1,如果在Firefox中,则一定要指定参数,如insertRow(-1),否则会出错.

4.select options
在IE中,在select.options集合中添加一个option,需要先将创建的option添加到options中,再指定option的text和value的值,在firefox中,则相反,需要先指定值,后添加.
如:
var opt=document.createElement("OPTION");
opt.innerHTML="option";
opt.value="value";
oSelect.options.add(opt);
(IE中报错:参数无效)

以上代码在IE中运行会出错,在Firefox中则正常插入option
以下代码,则在IE中正常,在Firefox中则出错:
var opt=document.createElement("OPTION");
oSelect.options.add(opt);
opt.innerHTML="option";
opt.value="value";
(在Firefox中警告: ID/NAME 所引用的元素位于全局范围。请使用 W3C 的标准形式 document.getElementById() 。)

5.attributes
在IE中,访问某个元素(element)的属性(attributes)时,是通过索引来读取的,即你要知道你要读取的属性是在哪个位置,如:<tag name="li" type="elment" />,如你要读取属性 type,那么在IE中是通过索引的,即: oTag.attributes[1]。但在Firefox中可以用属性名来索引,如 oTag.attributes["type"] 。如果想通过名字来读取属性,那么可以用attributes的方法 getNamedItem,如前面,读取 type 属性的值,可以这样: oTag.attributes.getNamedItem("type").value

6.Opacity(透明度)
在IE或Firefox中都可以设置元素的透明度,最低透明度是0%,最高是100%,在IE中设置元素的透明度是通过元素的style.filter="alpha(opacity=30)" 来设置的,而firefox是通过style.MozOpacity设置的,而且设置的值有点不同,IE是通过百份值,如80(即80%),而firefox对应的值是 .8 (对应80%) 。

需要注意的是:

1.element要用getElementById or ByTagName来得到,

2.setAttribute("class", vName)中class是指改变"class"这个属性,所以要带引号。

3.IE中要把class改成className,.....IE不认class,所以最好写两句,都用上吧。

W3C DOM - {setAttribute()}

setAttribute(string name, string value):增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。

1、关于class和className
class属性在W3C DOM中扮演着很重要的角色,但由于浏览器差异性仍然存在。使用setAttribute("class", vName)语句动态设置
Element的class属性在firefox中是行的通的,在IE中却不行。因为使用IE内核的浏览器不认识"class",要改用"className";
同样,firefox 也不认识"className"。所以常用的方法是二者兼备:
   element.setAttribute("class", vName);
   element.setAttribute("className", vName);  //for IE

2、setAttribute()的差异
我们经常需要在JavaScript中给Element动态添加各种属性,这可以通过使用setAttribute()来实现,这就涉及到了浏览器的兼容性问题。
var bar = document.getElementById("foo");
bar.setAttribute("onclick", "javascript:alert('This is a test!');");
这里利用setAttribute指定e的onclick属性,简单,很好理解。但是IE不支持,IE并不是不支持setAttribute这个函数,
而是不支持用setAttribute设置某些属性,例如对象属性、集合属性、事件属性,也就是说用setAttribute设置style和onclick这些属性
在IE中是行不通的。为达到兼容各种浏览器的效果,可以用点符号法来设置Element的对象属性、集合属性和事件属性。
document.getElementById("foo").className = "fruit";
document.getElementById("foo").style.cssText = "color: #00f;";
document.getElementById("foo").style.color = "#00f";
document.getElementById("foo").onclick= function () { alert("This is a test!"); } 

分页: 1/1 第一页 1 最后页 [ 显示模式: 摘要 | 列表 ]