attachEvent和addEventListener方法的使用
一般情况下直接在元素上添加事件的写法如下:
<img id=”zh_img” src=”xxx/xx.gif” onClick=”return method1 ( );” />
而在js脚本中也可以动态为这个元素添加事件:
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系列,并不支持该方法,需要用到addEventListener
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){
//适用用IE浏览器
el.attachEvent('onclick', KindDisableMenu);
}
2.
if (window.addEventListener) {
window.addEventListener('load', _uCO, false);
} else if (window.attachEvent) {
//适用用IE浏览器
window.attachEvent('onload', _uCO);
}
绑定到带参数的方法,比如说直接在元素上添加事件的写法如下:
<img id=”zh_img” src=”xxx/xx.gif” onClick=”return opentree(id,level);” />
使用绑定的方法,先要封装opentree(id,level)这个函数
var newopen = function(id,level)
{
return function()
{
opentree(id,level); //该函数为外部定义的一个带参数的执行函数
}
}
绑定时把带数也写入,写法如下:
Var x=document.getElementById(“zh_img”); // zh_img为元素的id
x.attachEvent("onclick",newopen(id,parseInt(level)+1));
注:调用的是newopen,而不是直接调用opentree
分享到:
相关推荐
在JavaScript中,可以通过添加事件监听器来响应用户的点击操作,而不是直接在HTML元素上写入`onclick`。例如,可以使用`addEventListener`方法来为每个按钮绑定点击事件: ```javascript document.getElementById('...
- **通用事件处理属性**:几乎所有的DOM元素都支持事件监听器,如`onclick`、`onmouseover`等。 - **特定元素的事件处理属性**:某些元素具有特定类型的事件处理程序,例如表单元素可能具有`onsubmit`事件。 #### ...
- `document.body.appendChild(oTag)`: 向`<body>`元素添加一个新的子元素。 3. **body对象** - `document.body`: 表示HTML文档的`<body>`元素,提供了一些与页面主体相关的属性和方法。 - `document.body....
delegate()方法适用于为动态添加的元素绑定事件,它在父元素上设置事件监听器,减少内存消耗,但在JQuery 1.7之后也已被on()方法取代。 在选择使用哪种JQuery方法时,应考虑兼容性、代码的维护性和执行效率。对于...
在你的例子中,当用户点击`<a>`标签时,事件首先在`<a>`标签上触发,然后依次传递给它的所有父元素,直到`<div>`。因此,`<div>`的`onclick`事件处理函数会被调用。 为了避免这种情况,你可以采用以下几种策略来...
在本例中,我们将探讨如何使用jQuery为一个DIV元素添加click事件,并通过这个实例来深入理解其工作原理。 首先,HTML部分创建了一个带有ID "click_ms" 的链接元素,它的href属性设置为"javascript:void(0)",以防止...
- `document.body.onclick`, `document.body.onmouseover`, `document.body.onmouseout`: 用于在相应事件触发时调用函数。 4. **location 子对象**: - `document.location.hash`: 获取URL中#号后面的部分,通常...
5. `document.body.appendChild(oTag)`: 将一个元素添加到`<body>`元素的末尾。 6. `document.body`: 访问`<body>`元素,可以设置其样式和属性,如`document.body.bgColor`、`document.body.link`等。 7. `document....
- 这些事件处理属性(如`onactivate`, `onclick`)是JavaScript中的事件监听器,当特定的用户交互发生时,它们可以触发函数来响应这些事件。现代JavaScript推荐使用`addEventListener`方法来添加事件监听器,以实现...
在JavaScript文件(可能是"js")中,可能需要找到适当的事件监听器(如`onclick`)来响应用户点击关闭按钮的操作,然后执行相应的动作,例如隐藏广告元素。 对于描述中提到的“我不知道哪里加连接”,如果问题在于...
在网页开发中,HTML Control Architecture(HTC)是一种技术,它允许开发者通过脚本语言(通常是JavaScript)为HTML元素添加自定义的行为和样式。HTC的主要目标是扩展HTML的局限性,使网页能够实现更复杂的功能,而...
4. **事件监听**:为了实现幻灯片自动播放或响应用户点击,你可以在JavaScript中添加定时器或事件监听器,如`onclick`事件,来触发图片的切换。 5. **参数传递**:如果需要传递特定的参数,如图片索引或过渡效果...
通过理解这些知识点,你就能熟练地使用VBScript在IE浏览器上创建具有特定功能的自定义按钮了。不过,请注意,随着技术的发展,VBScript的使用已经逐渐被JavaScript和现代Web开发框架所取代,学习这些新技术将有助于...
在JavaScript中,当使用attachEvent添加事件处理函数时,通常需要在事件处理函数中额外指定this的上下文,以确保事件对象能够正确地传递给函数。这是因为attachEvent在绑定事件时会把事件处理函数中的this上下文指向...
JavaScript通过DOM可以查找、修改和添加页面元素。在轮播切换中,JavaScript会通过DOM找到图片元素并进行显示和隐藏的操作。 4. **CSS3过渡和动画**:CSS3引入了过渡(Transition)和动画(Animation)特性,可以...
开发者可以根据实际需求自定义颜色、大小、样式,甚至可以添加动态效果,如鼠标悬停时的提示信息和点击事件,使报表更具交互性。 在使用open-flash-chart2的过程中,首先需要理解其基本结构。一个图表由多个元素...
CSS滤镜`filter`可以实现元素阴影效果,但请注意,这在现代浏览器中已被CSS3的`box-shadow`取代: ```css filter: progid:DXImageTransform.Microsoft.Shadow(color='gray', Direction=135, Strength=3); ``` ...
对于动态添加的元素,`live` 方法(在jQuery 1.7之后已被 `on` 方法取代)可以实现事件的委托,确保即使在页面加载后新添加的元素也能响应事件。然而,由于 `live` 已经废弃,推荐使用 `on` 方法: ```javascript $...