`

attachEvent方法调用JS Function

    博客分类:
  • JS
JS 
阅读更多

用于HTML内代码层和UI层分离。
比如,你要给一个按钮增加一个单击事件,你会怎么做?
<input type="button" id="theBtn" value="点击" onclick="alert('点击了一下');" />
明显的,它破坏了标签,如果下次要修改这个按钮不小心就会丢失。
attachEvent是为了将事件分离,如:
<input type="button" id="theBtn" value="点击" />
var theBtn = document.getElementById("theBtn");  //取得ID为theBtn的按钮
theBtn.attachEvent("onclick", buttonClicked);   //给按钮增加事件
function buttonClicked(e){  alert("点击了一下");  }  //定义函数
attachEvent用法:
attachEvent(事件类型, 处理函数);
P.S.:在Firefox中,对应的函数是addEventListener(事件类型, 处理函数, 使用捕获);
在简单的HTML应用中可能用不用效果不明显,但是在复杂的HTML客户端JS代码内,优势就体现出来了。

Firefox中是addEventListener方法
if (window.addEventListener) {
window.addEventListener('DOMContentLoaded', handler, false); //firefox
window.addEventListener('load', handler, false);
} else if (window.attachEvent) {
 window.attachEvent('onload', handler); //IE
}
http://cache.baidu.com/c?m=9d78d513d99017f90fa9c3224b488c275f03dc347cc0d0642288cd15c0324f060738ece161645213d2b6617a59e71909b2b17d6537747bf1cc83df5dddccc3757095776a2d499b4417d912adc8&p=8970c54ad5c54add0aafc771070089&user=baidu&fm=sc&query=addEventListener+onload&qid=c7edbbe426f9d282&p1=1#baidusnap0
分享到:
评论

相关推荐

    javascript attachEvent和addEventListener使用方法

    首先,attachEvent 方法是早期 Internet Explorer 浏览器引入的事件监听方法,它的语法是:`object.attachEvent(event, function)`。这个方法接受两个参数,第一个参数是事件名称(如 "onclick"),第二个参数是要...

    JavaScript通过attachEvent和detachEvent方法处理带参数的函数

    在探讨JavaScript中使用attachEvent和detachEvent方法处理带有参数的函数之前,我们先要了解这两个方法分别是什么以及它们的作用。attachEvent和detachEvent是早期IE浏览器特有的,用于为DOM元素添加或移除事件监听...

    iframe中子父类窗口调用JS的方法及注意事项

    本文将详细介绍如何在iframe中实现子窗口与父窗口间的JavaScript方法调用以及在操作过程中需要注意的事项。 首先,了解基本的iframe标签结构对于掌握子父窗口间的JS调用非常重要。一个简单的iframe标签可能如下所示...

    javascript实现动态导入js与css等静态资源文件的方法.docx

    ### JavaScript 实现动态导入 JS 与 CSS 等静态资源文件的方法 在现代 Web 开发中,动态地加载脚本和样式表是非常常见的需求。这不仅有助于提高网站性能(例如,按需加载资源),还能增强用户体验(例如,在特定...

    JavaScript调用Activex控件的事件的实现方法

    JavaScript调用ActiveX控件的事件的实现方法主要涉及到浏览器中的脚本交互和事件处理机制。ActiveX控件是微软提出的一种技术,它允许在网页中嵌入各种组件,如Flash、PDF阅读器等,而JavaScript是网页开发中最常用的...

    js右键菜单,菜单项由js动态添加,纯js调用

    在JavaScript中,我们可以使用`document.createElement`方法创建DOM元素,如`&lt;li&gt;`用于菜单项,`&lt;a&gt;`用于链接,`&lt;hr&gt;`用于分隔线。例如: ```javascript function createMenuItem(text, icon) { var li = document...

    uniapp-echarts.rar

    5. **重绘ECharts**:调用`setOption()`方法,传入新的配置,使地图进行下钻效果。 **优化和注意事项** - 考虑性能问题,可以使用异步加载地图数据,避免一次性加载所有数据导致页面加载慢。 - 对于移动端,优化...

    在服务端(Page.Write)调用自定义的JS方法详解

    在Web开发中,有时我们需要在服务端调用客户端的JavaScript方法,以便在页面加载后执行特定的逻辑。这个场景通常涉及到服务器端的.NET框架,如ASP.NET,其中`Page.Write`用于向HTML响应流中写入内容。本文将深入探讨...

    Javascript attachEvent传递参数的办法

    在探讨Javascript中使用attachEvent方法传递参数的问题时,首先需要理解attachEvent和addEventListener之间的区别,以及它们在IE浏览器中的实现差异。attachEvent是IE 8及以下版本独有的事件绑定方法,而...

    attachEvent的使用方法与传递参数[IE|firefox]|angluo-javascript-37392.pdf

    `attachEvent`是Internet Explorer浏览器特有的事件处理方法,用于将函数绑定到DOM元素的特定事件上,例如点击、鼠标移动等。与W3C标准的`addEventListener`不同,`attachEvent`并不支持事件捕获阶段,并且它的事件...

    js函数调用常用方法详解

    JavaScript中的函数调用有四种主要方式:方法调用模式、函数调用模式、构造器调用模式和apply调用模式。每种模式都有其特定的使用场景和特点,特别是对于`this`和`arguments`这两个关键参数的处理。 1. **方法调用...

    javascript attachEvent绑定多个事件执行顺序问题

    ### JavaScript中的事件绑定方法 为了更好地管理事件处理函数,我们通常会在JavaScript中创建一个专门的事件绑定函数。例如: ```javascript function bind(el, name, fn) { return el.addEventListener ? el....

    js中最最常用的函数封装,方便调用

    以下是一些在JS中常用且实用的函数封装方法: 1. **事件委托的封装**: ```javascript function eveEnt(child, cb) { return function (eve) { var e = eve || window.event; var mubiaoEle = e.target || e....

    JS在IE和FF下attachEvent,addEventListener学习笔记

    在 JavaScript 中,有两种常见的绑定事件处理器的方法:`addEventListener` 和 `attachEvent`。这两种方法的主要区别在于它们对不同浏览器的支持情况。 ##### 3.1 addEventListener 在非 IE 浏览器中,如 Firefox...

    js function使用心得

    当我们通过ajax请求返回JavaScript脚本时,可以通过JavaScript的`Function`构造器来动态执行这些脚本: ```javascript var ajax_js_code = "{a:'a','b':'b','func':function(){alert('abc')}}"; ajax_js_code = ...

    javascript中attachEvent用法实例分析

    当事件触发时,`function`会被调用。需要注意的是,`attachEvent`遵循事件冒泡的顺序,即后来绑定的事件先执行。在给出的示例中,`click3 -&gt; click2 -&gt; click1`的顺序被执行。 例如,如果我们有一个按钮元素`...

    javascript 获取图像信息

    `attachEvent()`方法用于向元素添加事件处理程序。在本例中,为`&lt;img&gt;`元素添加了`onreadystatechange`和`onerror`事件处理程序。 ```javascript img.attachEvent("onreadystatechange", orsc); img.attachEvent("on...

    JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题.docx

    本文主要讨论了在将DOM事件处理程序封装到名为`event.js`的文件时可能出现的低级错误,并提供了解决这些问题的方法。 首先,我们来看看封装的基本结构。通常,我们会创建一个名为`eventUtil`的对象,它包含`add...

Global site tag (gtag.js) - Google Analytics