1.事件流:从页面中接收事件的顺序


1.1 IE :事件冒泡流
1.2 Netscape :事件捕获
1.3 DOM事件流 :事件捕获阶段——事件目标阶段——事件冒泡阶段
DOM2级事件规定 :捕获阶段不会涉及目标事件。

2.事件处理程序


事件 :用户或者浏览器自身执行的 某种动作
事件处理程序 :响应某个事件的 函数 。


2.1 HTML事件处理程序

用一个与该事件处理程序同名的HTML特性来指定。

2.1.1包含要执行的具体动作

<input type=”button” value=”Click me” onclick=”alert(‘Clicked’)”/>

2.1.2 调用其他地方定义的脚本

<input type=”button” value=”Click me” onclick=”showMessage()”/>

2.1.3 缺点

1.时差问题:使用try-catch块捕捉错误。onclick=”try { showMessage() ;} catch(ex) {} ”
2.程序的作用域链在不同浏览器中会导致不同结果
3.HTML和JS代码耦合紧密


2.2 DOM0级事件处理程序

将一个函数赋值给一个事件处理程序属性,例如:onclick。
为事件处理程序赋值。

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

事件处理程序在元素的作用域中运行,this指向当前元素。
删除事件处理程序:
btn.onclick = null;


2.3 DOM2级事件处理程序

addEventListener(处理的事件名,事件处理程序函数,布尔值);
removeEventListener(处理的事件名,事件处理程序函数,布尔值);
布尔值:捕获阶段调用事件处理程序:true。冒泡阶段调用:false。大多数情况下用false。

btn.addEventListener(“click” , function() {
alert(this.id);
}, false);

好处:可以添加多个事件处理程序。事件按照添加先后顺序执行。
问题:匿名函数无法移除。
最好写成

var handler = function(){
alert(this.id);
};
btn.addEventListener(“click”, handler, false);
btn.removeEventListener(“click”, handler, false);

2.4 IE事件处理程序

attachEvent(事件处理程序名称,事件处理程序函数);
detachEvent(事件处理程序名称,事件处理程序函数);

通过该方法添加的事件处理程序,都会被添加到冒泡阶段。

btn.attachEvent(“onclick”,function(){
alert(“clicked”);
});

注意:使用DOM级方法时,事件会在所属元素的作用域内运行;使用attachEvent()方法,事件处理程序会在全局作用域运行,this==window。
好处:可以添加多个事件处理程序。后添加先执行。
问题:匿名函数无法移除。

var handler = function(){
alert(this.id);
};
btn.attachEvent (“onclick”, handler);
btn.detachEvent (“onclick”, handler);

2.5跨浏览器事件处理程序

1.创建一个方法addHandler():区分使用哪种方法来添加事件;
2.创建一个对象EventUtil。拥有两个方法。
3.addHandler(要操作的元素,事件名称,事件处理函数)。
4.removeHandler(要操作的元素,事件名称,事件处理函数)。

var EventUtil = {
addHandler: function(element,type,handler){
if(element.addEventLister) {
element.addEventListener(type,handler,false);
} else if(element.attachEvent) {
element.attachEvent("on"+type, handler);
}else {
element.["on"+type] =handler;
}
},
removeHandler: function(element,type,handler){
if(element.addEventLister) {
element.removeEventListener(type,handler,false);
} else if(element.attachEvent) {
element.detachEvent("on"+type, handler);
}else {
element.["on"+type] = null;
}
}
};

使用:

EventUtil.addHandler(btn ,”click”,handler);
EventUtil.removeHandler(btn ,”click”,handler);

JS——事件流与事件处理程序的更多相关文章

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

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

  2. JavaScript 中的事件流和事件处理程序(读书笔记思维导图)

    JavaScript 程序采用了异步事件驱动编程模型.在这种程序设计风格下,当文档.浏览器.元素或与之相关的对象发生某些有趣的事情时,Web 浏览器就会产生事件(event). JavaScript ...

  3. js 事件流和事件冒泡阻止

    js 事件流和事件冒泡阻止 事件流 当浏览器发展到第四代的时候(IE4与Netscape4)浏览器开发团队遇到一个有意思的的问题: 页面的哪一部分会拥有某个特定的事件? 比如在纸上画上一组同心圆,如果 ...

  4. HTML 事件(三) 事件流与事件委托

    本篇主要介绍HTML DOM中的事件流和事件委托. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流与事件委托 4 ...

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

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

  6. DOM 事件流与事件处理程序

    ㈠事件流 ▶事件:是文档和浏览器窗口中发生的,特定的交互瞬间. ▶事件流:描述的是从页面中接受事件的顺序   ⑴DOM事件冒泡 定义:事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接受,然后 ...

  7. JS事件流、事件监听、事件对象、事件委托

    JS事件流: 01.DOM级别和DOM事件 02.JS事件流:页面中接收事件的顺序 事件冒泡阶段-->处于目标阶段-->事件捕获阶段 (事件捕获总发生在事件冒泡前面) 03.捕获:从外向里 ...

  8. JS里关于事件的常被考察的知识点:事件流、事件广播、原生JS实现事件代理

    1.JS里面的事件流 DOM2级事件模型中规定了事件流的三个阶段:捕获阶段.目标阶段.冒泡阶段,低版本IE(IE8及以下版本)不支持捕获阶段 捕获事件流:Netscape提出的事件流,即事件由页面元素 ...

  9. [已转移]js事件流之事件冒泡的应用----事件委托

    该文章已转移到博客:https://cynthia0329.github.io/ 什么是事件委托? 它还有一个名字叫事件代理. JavaScript高级程序设计上讲: 事件委托就是利用事件冒泡,只指定 ...

随机推荐

  1. asp.net core 2.0 webapi集成signalr

    asp.net core 2.0 webapi集成signalr   在博客园也很多年了,一直未曾分享过什么东西,也没有写过博客,但自己也是汲取着博客园的知识成长的: 这两天想着不能这么无私,最近.N ...

  2. Centos6.5系统压力测试过程大量TIME_WAIT

    统计tcp状态的命令: netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}' netstat -n | awk '/ ...

  3. Flask--第三个例子,写一个接口,该接口返回html前端页面,模板的使用

     将接口数据返回至html前端页面有两种方法 方法一: 1 @app.route('/index',methods=['get']) 2 def open_index(): 3 page=open(' ...

  4. 通过mysql-proxy映射外网访问内网数据库

    配置教程: 转自:http://www.centoscn.com/mysql/2015/0107/4437.html centos安装mysql-proxy mysql-proxy的用处就不再说了 m ...

  5. fastadmin系统配置

    常规管理--->系统配置--->字典配置-->配置分组-->追加--填上键值-->回车 然后在点上图的+添加自定义的配置项(如果需要删除配置项,需要删除数据库中fa_co ...

  6. Java中CardLayout布局方式的应用

    import java.awt.CardLayout; import java.awt.Color; import java.awt.Container; import javax.swing.JBu ...

  7. HDU 5536 Chip Factory (暴力+01字典树)

    <题目链接> 题目大意: 给定一个数字序列,让你从中找出三个不同的数,从而求出:$\max_{i,j,k} (s_i+s_j) \oplus s_k$的值. 解题分析:先建好01字典树,然 ...

  8. Codeforces 1036E Covered Points (线段覆盖的整点数)【计算几何】

    <题目链接> <转载于 >>>  > 题目大意: 在二维平面上给出n条不共线的线段(线段端点是整数),问这些线段总共覆盖到了多少个整数点. 解题分析: 用GC ...

  9. 二叉搜索树的java实现

    转载请注明出处 一.概念 二叉搜索树也成二叉排序树,它有这么一个特点,某个节点,若其有两个子节点,则一定满足,左子节点值一定小于该节点值,右子节点值一定大于该节点值,对于非基本类型的比较,可以实现Co ...

  10. C# ImageHelper

    using System; using System.Drawing; using System.Drawing.Imaging; using System.IO; using System.Web; ...