`
shuzheng5201314
  • 浏览: 203287 次
  • 来自: 北京
社区版块
存档分类
最新评论

WebApp开发笔记二:关于js绑定事件的区别

 
阅读更多

attachEvent与addEventListener区别:
适应的浏览器版本不同,同时在使用的过程中要注意:
attachEvent方法          按钮onclick
addEventListener方法    按钮click

两者使用的原理:可对执行的优先级不一样,下面实例讲解如下:
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

实例:

if (window.addEventListener) {
    window.addEventListener('load', _uCO, false);
} else if (window.attachEvent) {
    window.attachEvent('onload', _uCO);
}

 

分享到:
评论

相关推荐

    SpringBoot + Vue 做的一个笔记网站

    标题中的“SpringBoot + Vue 做的一个笔记网站”表明这是一个使用Java的SpringBoot框架与前端Vue.js技术构建的在线笔记应用。这个项目可能旨在提供一个便捷、高效的平台,让用户可以存储、组织和检索个人笔记。 ...

    VueJS-APP案例

    VueJS-APP案例是Web前端开发中的一个典型应用,它主要展示了Vue.js框架在构建单页应用程序(SPA)时的强大功能。Vue.js是一款轻量级的JavaScript库,它以其易学易用、灵活且高性能的特点,深受开发者喜爱。在这个...

    webapp滚动 上下滑动加载数据

    7. **说明.txt**:这个文件可能包含了关于如何集成和使用这些文件的详细说明,或者记录了开发过程中的笔记。 为了实现这个功能,你需要: 1. 在HTML中创建一个可滚动的容器,并配置好iScroll。 2. 使用jQuery监听...

    sepalnote:分层笔记 webapp。 Django PostgreSQL + AngularJS。 (正在开发中)

    **sepalnote** 是一个基于Web的分层笔记应用程序,其核心技术和开发工具主要包括Django、PostgreSQL和AngularJS。这个项目正处于开发阶段,旨在提供一个高效、有组织的笔记管理平台。 首先,我们来看看**Django**。...

    media-viewer-webapp

    首先,Vue.js是当前非常流行的前端JavaScript框架,它以其简洁的API、组件化开发模式和高效的虚拟DOM著称。Vue.js的核心特性包括声明式渲染、响应式数据绑定、组件系统和指令系统,这些使得开发者能够构建出可复用、...

    SpringMVC笔记以及面试题.docx

    在实际开发中,开发者会通过注解如 `@RequestMapping` 来指定 URL 映射,`@RequestParam` 获取请求参数,`@ModelAttribute` 绑定模型数据,`@PathVariable` 获取路径变量,以及使用 `@Autowired` 自动注入依赖等。...

    基于SSM+jsp的游戏商城.zip

    3. **src/main/webapp**: JSP视图文件和静态资源(如CSS、JavaScript、图片)所在目录。 4. **pom.xml**: Maven的项目对象模型文件,定义了项目依赖和构建过程。 5. **web.xml**: 传统的Servlet配置文件,可能用于...

    订餐系统v1.0

    ### 订餐系统v1.0开发笔记 #### 一、项目概述与技术栈 本文档旨在记录网络订餐系统v1.0版本的开发过程和技术细节,为后续的维护和升级提供参考依据。该系统基于SSM框架(Spring、SpringMVC、MyBatis)构建,采用了...

    蓝缘后台管理网站开源源代码

    总之,"蓝缘后台管理网站开源源代码"是学习和实践Java Web开发的宝贵资源,它可以帮助初学者快速上手,并为有经验的开发者提供了一个可复用的框架基础,以便他们在实际项目中进行二次开发和定制。通过深入研究和实践...

    基于SSM的电子商城项目源码(1).zip

    3. **src/main/webapp**:Web应用资源目录,包括视图层的JSP或Thymeleaf页面,静态资源(CSS、JavaScript、图片)以及Web-INF目录下的web.xml配置文件。 4. **pom.xml**:Maven的项目对象模型,定义了项目依赖、构建...

    balena-cam-edgeimpulse

    对于我们的应用程序,我们通过在 Node.js 服务器中添加第二个运行 Edge Impulse webassembly 推理引擎的容器来利用 Balena 的多容器功能。 这两个容器通过 websocket 相互通信。 balena-cam webapp 已被修改为每秒...

    spring+MyBatis+SpringMVC项目搭建及其所需架包

    在"spring mvc 技术文档笔记及源码.docx"文件中,你可能能找到关于这些步骤的详细说明和示例代码,这对于理解整个过程和深入学习是非常有帮助的。确保阅读并理解这些文档,以便在实际项目中灵活运用。同时,实践是...

Global site tag (gtag.js) - Google Analytics