新葡亰496net 新葡亰编程 javascript 动态添加事件代码

javascript 动态添加事件代码

  • 在各浏览器中动态增加事件-方法篇
  • 在各浏览器中动态增加事件-参数篇
  • 在各浏览器中动态增加事件-循环绑定事件的巡回参数难题

方法一、setAttribute var obj = document.getElementById(“obj”);
obj.setAttribute(“onclick”, “javascript:alert(‘测试’);”);
那边运用 setAttribute 内定 onclick 属性,轻易,很好通晓,
只是:IE 不扶持,IE 并不是不帮忙 setAttribute 那个函数,而是不辅助用
setAttribute 设置有个别品质,包涵对象属性、会集属性、事件性质,也正是说用
setAttribute 设置 style、onclick、onmouseover 那一个属性在 IE
中是不著见效的。
方法二、用 attachEvent 和 addEventListener
IE 支持 attachEvent
obj.attachEvent(“onclick”, Foo);
function Foo()
{
alert(“测试”);
}
也可写在合作
obj.attachEvent(“onclick”, function(){alert(“测试”);});
其他浏览器扶植 addEventListener
obj.addEventListener(“click”, Foo, false);
function Foo()
{
alert(“测试”);
}
一直以来也可写在一块儿
obj.addEventListener(“click”, function(){alert(“测试”);}, false);
只顾 attachEvent 的风云带 on,如 onclick,而 add伊芙ntListener 不带
on,如 click。
附带说一下 add伊夫ntListener 的第多个参数(就算非常少用) useCapture –
假设为 true,则 useCapture
提醒顾客期待运营捕获。运行捕获后,全数钦赐项指标轩然大波将要被支使到树中其下部的其他伊芙ntTargets 从前线指挥部派给已注册的 伊芙ntListener。正在通过树向上 bubbling
的平地风波将不接触钦点的施用捕获的 伊芙ntListener。
归纳运用
if (window.attachEvent)
{
//IE 的风浪代码
}
else
{
//别的浏览器的事件代码
}
方法三、事件 = 函数 例:obj.onclick = Foo;
那在八个浏览器中均援助,那是归于旧的专门的工作(方法二归于 DOM2
的专门的学业),不过由于使用方便,用的场馆也相当多。

Javascript教程动态加载事件的方法

 本篇文章主假如对js
动态加载事件的两种办法开展了详细的下结论介绍,须求的意中人能够回复参照他事他说加以考察下,希望对咱们有着帮忙

稍微时候须要动态加载javascript事件的局地措施

往往我们供给在 JS
中动态拉长事件,那就关乎到浏览器宽容性难题了,以下谈及的二种办法,大家也反复混合使用。

 

方法一、setAttribute

var obj = document.getElementById(“obj”);

obj.setAttribute(“onclick”, “javascript:alert(‘测试’);”);

 

这里运用 setAttribute 钦定 onclick 属性,简单,很好通晓,

 

唯独:IE 不补助,IE 并非不协理 setAttribute 那几个函数,而是不援助用
setAttribute 设置某个质量,包涵对象属性、集结属性、事件性质,也等于说用
setAttribute 设置 style、onclick、onmouseover 那么些属性在 IE
中是行不通的。

 

方法二、用 attachEvent 和 addEventListener

IE 支持 attachEvent

 

obj.attachEvent(“onclick”, Foo);

function Foo()

{

     alert(“测试”);

}

 

也可写在一起

obj.attachEvent(“onclick”, function(){alert(“测试”);});

别的浏览器扶植 add伊夫ntListener

 

obj.addEventListener(“click”, Foo, false);

function Foo()

{

     alert(“测试”);

}

 

意气风发致也可写在一块

obj.addEventListener(“click”, function(){alert(“测试”);}, false);

 

在乎 attach伊夫nt 的事件带 on,如 onclick,而 addEventListener 不带
on,如 click。

顺便说一下 add伊芙ntListener 的第多少个参数(即使相当少用) useCapture –
假诺为 true,则 useCapture
提示客户期待运维捕获。运营捕获后,全部钦定项目标风云将要被派遣到树中其下部的别的EventTargets 早先线指挥部派给已注册的 伊芙ntListener。正在通过树向上 bubbling
的风浪将不接触钦定的行使捕获的 伊夫ntListener。

 

综上可得采用

代码如下:

if (window.attachEvent)

{

     //IE 的风云代码

}

else

{

     //此外浏览器的事件代码

}

 

方法三、事件 = 函数

 

例:obj.onclick = Foo;

那在多少个浏览器中均扶植,那是归属旧的标准(方法二归属 DOM2
的标准),可是是因为使用方便,用的场面也比超多。

 

下边是本身的撤消办法:

 

代码如下:

function show(){ 

     alert(“Hello, world!!!”);

}

 

obj.setAttribute(‘onclick’,document.all ? eval(function(){show()}) :
‘javascript:show()’);

 

 

attachEvent方法,为某意气风发风云附加别的的处管事人件。(不支持Mozilla种类)

 

addEventListener方法 用于 Mozilla系列

 

举例: 

 

document.getElementById(“btn”).onclick = method1;

document.getElementById(“btn”).onclick = method2;

document.getElementById(“btn”).onclick = method3;

 

尽管那样写,那么将会唯有medhot3被实行

 

写成这么:

var btn1Obj = document.getElementById(“btn1”); 

 

//object.attachEvent(event,function);

btn1Obj.attachEvent(“onclick”,method1);

btn1Obj.attachEvent(“onclick”,method2);

btn1Obj.attachEvent(“onclick”,method3);

实行各样为method3->method2->method1

 

比如是Mozilla类别,并不扶助该方式,必要动用add伊芙ntListener 

 

var btn1Obj = document.getElementById(“btn1”);

//element.addEventListener(type,listener,useCapture);

btn1Obj.addEventListener(“click”,method1,false);

btn1Obj.addEventListener(“click”,method2,false);

btn1Obj.addEventListener(“click”,method3,false);

 

施行各类为method1->method2->method3

 

行使实例:

 

1。 

 

代码如下:

var el = EDITFORM_DOCUMENT.body; 

//先得到对象,EDITFORM_DOCUMENT实为二个iframe

if (el.addEventListener){

 el.addEventListener(‘click’, KindDisableMenu, false);

} else if (el.attachEvent){

 el.attachEvent(‘onclick’, KindDisableMenu);

}

 

2。 

代码如下:

if (window.addEventListener) {

 window.addEventListener(‘load’, _uCO, false);

} else if (window.attachEvent) {

 window.attachEvent(‘onload’, _uCO);

}

 

本篇文章主如若对js
动态加载事件的三种办法开展了详尽的总括介绍,需求的朋友能够过来参谋下,希望…


下边是自个儿的消除办法:
function show(){
alert(“Hello, world!!!”);
}
obj.setAttribute(‘onclick’,document.all ? eval(function(){show()}) :
‘javascript:show()’);
看起来异常粗略,也匹配浏览器,正是不掌握还或许有未有任啥位置方的熏陶,也许有更加好的点子能够代替呢?

在 HTML 中得以一贯写事件代码,譬如:<input type=”button” value=”验证”
onclick=”javascript:Verify(卡塔尔国;”
/>,那在各浏览器中的解释均风姿浪漫致,无可纠纷。

var obj =
document.getElementById(“obj”卡塔尔国; obj.setAttribute(“onclick”,
“javascript:alert(‘测量试验’卡塔尔(قطر‎;”卡塔尔(قطر‎; 这里运用 setAttribute 钦点 onclick
属性,轻巧…

但频仍我们又须求在 JS
中动态增加事件,这就提到到浏览器包容性问题了,以下谈及的两种办法,大家也时不常混合使用。

方法一、setAttribute

var obj = document.getElementById(“obj”);
obj.setAttribute(“onclick”, “javascript:alert(‘测试’);”);

这里运用 setAttribute 钦命 onclick 属性,简单,很好明白,不过:IE 不扶植,IE 并非不帮衬 setAttribute
那个函数,而是不援救用 setAttribute
设置某个质量,包含对象属性、集合属性、事件性质,也正是说用 setAttribute
设置 style、class、onclick、onmouseover 这么些属性在 IE 中是于事无补的。

方法二、用 attachEvent 和 addEventListener(推荐)

标签:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图