第一阶段:HTML事件处理阶段.就是在元素里面添加onclick之类的属性来调用某个函数.

 <input  type="button" value="单击" onclick="test()"/>
 function test() {
alert(0);
}

这种写法有2个缺点:
1.存在时差问题.用户可能在HTML元素已出现在页面上就出发相应的事件,但是如果事件处理程序可能还没有加载过来,就会引发错误.
2.HTML和javascript紧密耦合,如果要更换事件处理程序,则就要同时修改HTML和jiavascript代码,给维护工作带来了很大的麻烦.

第二阶段:DOM0级事件处理程序阶段

 <input type="button"  value="click" id="guoBtn"/>
 var btn = document.getElementById("guoBtn");
btn.onclick = function () {
alert("你单击了我");
}

我现在有一个新的需求就是,我不光想要它在这个事件中弹出"你单击了我",我还要它在相同的事件名下,在弹出"其实你只单击了我一次,但是我却弹出2次"的提示.

 btn.onclick = function () {
alert("其实你只单击了我一次,但是我却弹出2次");
}

这种情况下,它只执行后面一个提示.实际上只执行一次click的事件处理程序.这个问题在第三阶段得到了解决.

删除事件处理程序:

 btn.onclick = null;

现在在单击这个按钮后,就不会再有弹出提示了.

第三阶段:DOM2级事件处理程序,addEventListener()和removeEventListener();

 <input  type="button" value="addEventListener" id="guo"/>
 var btn = document.getElementById("guo");
btn.addEventListener("click", function () { alert(this.value); }, false);

第一个参数:事件名
第二个参数:事件的处理程序
第三个参数:true表示在事件捕获阶段调用时间处理程序;false表示在冒泡阶段调用事件处理程序.
给同一个时间添加多个时间处理程序,这是事件处理程序的第二阶段所做不到的.

  btn.addEventListener("click", function () { alert("同一个单击,第二次执行"); }, false);

这样的写法,是没有办法删除掉事件处理程序的,因为调用的匿名函数没有相应的应用(没有一个变量来接受)所以必须得做一些改动

 var hander = function () {//将处理程序提取出来
alert("同一个单击,第二次执行");
}
btn.addEventListener("click", hander, false);
btn.removeEventListener("click",hander,false);

现在在单击这个按钮的话,就没有了后面的提示了.

javascript事件处理程序的3个阶段的更多相关文章

  1. JavaScript事件处理程序 学习笔记

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

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

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

  3. JavaScript事件处理程序

    JavaScript中的事件处理程序主要分为3种: HTML事件处理程序: <script type="text/javascript"> // HTML事件处理程序 ...

  4. 对JavaScript事件处理程序/事件监听器的设定的简单介绍

    下面是一些对事件处理进行设定的方式. 指定为HTML元素的属性(事件处理程序) 指定为DOM元素的属性(事件处理程序) 通过EventTarget.addEventListener()进行指定(事件监 ...

  5. 探究JavaScript中的五种事件处理程序

    探究JavaScript中的五种事件处理程序 我们知道JavaScript与HTML之间的交互是通过事件实现的.事件最早是在IE3和Netscape Navigator 2中出现的,当时是作为分担服务 ...

  6. 学习javascript中的事件——事件处理程序

    事件就是用户或浏览器自身执行的某种动作.诸如 click.load 和 mouseover ,都是事件的名字.而响应某个事件的函数就叫做事件处理程序(或事件侦听器).事件处理程序的名字以“on”开头, ...

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

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

  8. 注册事件处理程序onclick和addEventListener、attachEvent

    一.设置HTML标签属性为事件处理程序(注意和下面的设置javascript对象属性为事件处理程序是不同的) 用于设置文档元素事件处理程序属性也能化成对应的HTML标签的属性.如果这样做,属性值应该是 ...

  9. js事件流、事件处理程序/事件侦听器

    1.事件流 事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档). 事件捕获 ...

随机推荐

  1. java.lang.IllegalStateException: Zip File is closed

    最近在研究利用sax读取excel大文件时,出现了以下的错误: java.lang.IllegalStateException: Zip File is closed at org.apache.po ...

  2. IOS的各种控件(转载,防止遗忘)

    UITextView控件的详细讲解 感觉写的相当不错,而且很全就直接转载了 1.创建并初始化 创建UITextView的文件,并在.h文件中写入如下代码: #import <UIKit/UIKi ...

  3. jsp:incloud用法

    为什么要用jsp:incloud 因为单独一个页面太大,需要嵌套子页面,当请求有父页面的时候,子页面会自动加载<jsp:include page="/agentProfitShareN ...

  4. vue-resource 上传图片

    const formData = new FormData()formData.append('file',img,params.name);formData.append('id',params.i ...

  5. tmux安装与使用

    安装 用法 重点 一prefix前缀键 二window和pane的区分 tmux 按照官方给出的介绍是:终端复用工具.说白了就是可以仅仅在开启一个终端的情况下同时处理多个任务. 比如下面我设置的这样一 ...

  6. SendTo MD5 - imsoft.cnblogs

    SendTo MD5 is a small application that allows you to calculate and compare MD5 checksums of files an ...

  7. Mr. Kitayuta's Colorful Graph CodeForces - 506D(均摊复杂度)

    Mr. Kitayuta has just bought an undirected graph with n vertices and m edges. The vertices of the gr ...

  8. rm: 无法删除"xxxx.dir": 是一个目录

    rm命令 -f:在删除过程中不给任何指示,直接删除. -r:将参数中列出的全部目录和子目录都递归地删除. -i:与-f选项相反,交互式删除,在删除每个文件时都给出提示. 删除文件可以直接使用rm命令, ...

  9. 牛客小白月赛2 E:是是非非(尼姆博弈)

    链接:https://www.nowcoder.com/acm/contest/86/E来源:牛客网 题目描述 坎为水,险阳失道,渊深不测:离为火,依附团结,光明绚丽.坎卦:水洊至,习坎:君子以常德行 ...

  10. JQuery 遮罩层弹窗

    var str = "<div id=\"zhezhao\" style=\"display:none; background-color: rgba(0 ...