我一直认为Javascript的特点就是在和用户交互的过程中可以进行一些操作,那么事件作为用户交互的主要部分就显得特别重要,今天先学习了JS事件处理程序的相关内容。

首先,要明白Javascript 事件处理程序一共有三种:

1.HTML事件处理程序

2.DOM0级事件处理程序

3.DOM2级事件处理程序

1.HTML事件处理程序

<button id="btn2" onclick="show()">btn2</button>

根据它的名字就可以猜到这种方式和HTML有一定关系,上面就是它的实现方法。

使用这种实现方式要注意两个问题:

1.页面元素加载和JS加载的时差问题。具体来说就是如果页面元素先加载完毕而JS没有加载完毕,就会出错。

2.HTML和JS的耦合度太大。改动代码需要修改HTML 和 JS 两个部分,当代码量较大时,这是个很头疼的问题。

2.DOM0级事件处理程序

            var btn1 = document.getElementById("btn1");

            btn1.onclick = function(){
alert(this.id);
}

如上就是DOM0级事件处理的例子。相比第一种就灵活了许多,而且方便的一点就是事件处理函数(我自己起的名字)可以直接通过this访问到事件所在的元素。

3.DOM2级事件处理程序

        var btn3 = document.getElementById("mybtn");
btn3.addEventListener("click",fn1,false);
btn3.addEventListener("focus",fn2,false);
btn3.addEventListener("blur",function(){
this.style.backgroundColor = "";
},false)
function fn1(e){
alert(this.id);
} function fn2(){
this.style.backgroundColor = "yellow";
}

DOM2级事件处理程序主要依靠两个方法:

addEventListener("事件类型",处理函数,false) 和 removeEventListener("事件类型",处理函数,false)
//一个添加,一个删除 第三个参数false表示在冒泡阶段调用事件处理程序

需要注意的是 addEventListener 添加的事件必须通过 removeEventListener移除,并且他们对应的参数必须相同

btn3.addEventListener("blur",function(){
this.style.backgroundColor = "";
},false)
btn3.removeEventListener("blur",function(){
this.style.backgroundColor = "";
},false)//无法移除,因为参数中有匿名函数,虽然写法一样 btn3.addEventListener("click",fn1,false);
btn3.removeEventListener("click",fn1,false); //这样才可以移除

2016年1月4日


												

JavaScript事件处理程序 学习笔记的更多相关文章

  1. ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录

    放着好好的成熟的AJS 3.19不学,为什么要去碰乳臭未干的AJS 4.2? 4.2全线基础学习请点击[直达] 4.3及更高版本的补充学习请关注我的博客. ArcGIS API for JavaScr ...

  2. 7 种 Javascript 常用设计模式学习笔记

    7 种 Javascript 常用设计模式学习笔记 由于 JS 或者前端的场景限制,并不是 23 种设计模式都常用. 有的是没有使用场景,有的模式使用场景非常少,所以只是列举 7 个常见的模式 本文的 ...

  3. JavaScript事件处理程序的3种方式

    最近这段时间因为每天要修改网站,为网站做特效,所以看了很多的js接触事件,自己只会使用一小部分,有时用的时候也比较混乱,现在系统的整理了一下,首先跟大家在马海祥博客上跟大家分享的是JavaScript ...

  4. JavaScript 权威指南-学习笔记(一)

    本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! ## JavaScript 权威指南-学 ...

  5. Javascript高级编程学习笔记(58)—— 事件(2)事件处理程序

    事件处理程序 事件处理程序即响应某个事件的函数 事件处理程序以 “on” 开头 如“onclick”,“onload” HTML事件处理程序 某个元素支持的每种事件都可以使用一个与响应的事件处理程序同 ...

  6. JavaScript高级程序设计学习笔记之事件

    1.事件流 事件流描述的是从页面中接收事件的顺序. 事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播 ...

  7. 事件流之事件冒泡与事件捕获<JavaScript高级程序设计>学习笔记

    1.事件流 浏览器开发团队遇到一个很有意思问题:页面的那一部分会拥有特定的事件? 对于理解这个问题您可以想象画在一张纸上的一组同心圆,如果你把手指放在圆心上,那么你的手指指向的其实不是一个圆,而是纸上 ...

  8. JavaScript高级程序设计学习笔记--事件

    HTML事件处理程序 <input type="button" value="Click Me" onclick"showMessage()&q ...

  9. JavaScript高级程序设计学习笔记第十三章--事件

    事件冒泡: IE 的事件流,事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档).例如: <!DOCTYPE html> <htm ...

随机推荐

  1. HDU 2030 统计汉字

    BestCoder官方群:385386683 欢迎加入~ 寻人启事:2014级新生看过来! 汉字统计 Time Limit: 2000/1000 MS (Java/Others)    Memory ...

  2. JAX-RS开发 hello world

    1.建立maven webapp工程aty-rest. 2. 在pom文件增加spring框架.jax-rs接口.CXF实现 <dependency> <groupId>jav ...

  3. wcf 给net.tcp 加mex

    <?xml version="1.0" encoding="utf-8" ?><configuration>  <system.s ...

  4. SDP协议

    会话描述协议(SDP)为会话通知.会话邀请和其它形式的多媒体会话初始化等目的提供了多媒体会话描述.它只是用来描述,而不是一种传输协议.举例,在SIP协议的Message Header的Content- ...

  5. jquery 实现简单拖拽

    $.fn.drag = function(obj) { var dragging = false; var oDrag = $(obj); oDrag.mousedown(function(e) { ...

  6. js禁止中文输入 最简洁的【禁止输入中文】

    方法一:禁止中文输入法 <input type="text"  > 方法二:禁止黏贴,禁止拖拽,禁止中文输入法! 这种方法是最强的禁止 中文输入 <input t ...

  7. Python爬虫实战(4):豆瓣小组话题数据采集—动态网页

    1, 引言 注释:上一篇<Python爬虫实战(3):安居客房产经纪人信息采集>,访问的网页是静态网页,有朋友模仿那个实战来采集动态加载豆瓣小组的网页,结果不成功.本篇是针对动态网页的数据 ...

  8. UVA 11134 Fabled Rooks

    贪心+优先队列+问题分解 对x,y 分开处理 当 xl<cnt(当前处理行)时,不能简单的选择cnt,而是应该让xl=cnt 并重新加入优先队列.(y的处理同上) #include <io ...

  9. 循环-10. 求序列前N项和*

    /* * Main.c * C10-循环-10. 求序列前N项和 * Created on: 2014年7月30日 * Author: Boomkeeper *******部分通过******* */ ...

  10. mono 判断系统的网络是否可用

    /**  * 判断系统的网络是否可用  * @return  */        private bool isNetworkConnected()        {            bool ...