JS——事件流与事件处理程序
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——事件流与事件处理程序的更多相关文章
- js事件流、事件处理程序/事件侦听器
1.事件流 事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档). 事件捕获 ...
- JavaScript 中的事件流和事件处理程序(读书笔记思维导图)
JavaScript 程序采用了异步事件驱动编程模型.在这种程序设计风格下,当文档.浏览器.元素或与之相关的对象发生某些有趣的事情时,Web 浏览器就会产生事件(event). JavaScript ...
- js 事件流和事件冒泡阻止
js 事件流和事件冒泡阻止 事件流 当浏览器发展到第四代的时候(IE4与Netscape4)浏览器开发团队遇到一个有意思的的问题: 页面的哪一部分会拥有某个特定的事件? 比如在纸上画上一组同心圆,如果 ...
- HTML 事件(三) 事件流与事件委托
本篇主要介绍HTML DOM中的事件流和事件委托. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流与事件委托 4 ...
- 事件流之事件冒泡与事件捕获<JavaScript高级程序设计>学习笔记
1.事件流 浏览器开发团队遇到一个很有意思问题:页面的那一部分会拥有特定的事件? 对于理解这个问题您可以想象画在一张纸上的一组同心圆,如果你把手指放在圆心上,那么你的手指指向的其实不是一个圆,而是纸上 ...
- DOM 事件流与事件处理程序
㈠事件流 ▶事件:是文档和浏览器窗口中发生的,特定的交互瞬间. ▶事件流:描述的是从页面中接受事件的顺序 ⑴DOM事件冒泡 定义:事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接受,然后 ...
- JS事件流、事件监听、事件对象、事件委托
JS事件流: 01.DOM级别和DOM事件 02.JS事件流:页面中接收事件的顺序 事件冒泡阶段-->处于目标阶段-->事件捕获阶段 (事件捕获总发生在事件冒泡前面) 03.捕获:从外向里 ...
- JS里关于事件的常被考察的知识点:事件流、事件广播、原生JS实现事件代理
1.JS里面的事件流 DOM2级事件模型中规定了事件流的三个阶段:捕获阶段.目标阶段.冒泡阶段,低版本IE(IE8及以下版本)不支持捕获阶段 捕获事件流:Netscape提出的事件流,即事件由页面元素 ...
- [已转移]js事件流之事件冒泡的应用----事件委托
该文章已转移到博客:https://cynthia0329.github.io/ 什么是事件委托? 它还有一个名字叫事件代理. JavaScript高级程序设计上讲: 事件委托就是利用事件冒泡,只指定 ...
随机推荐
- python之string模块常量:数字,26个字母,标点符号,空白
In [8]: import string In [9]: dir(string) In [10]: string.ascii_letters Out[10]: 'abcdefghijklmnopqr ...
- Javascript 中调参数的脚本onclick="select(this)" this 怎么解释
解释1. this,指当前的onclick所在的节点本身. 比如: <div onclick='select(this)"></div> 则当点击div时,this就 ...
- Nginx编译安装:
第三方模块 在nginx.org -------- wiki 找 --add-module= 添加 Nginx编译安装: 安装开发环境 ]# yum groupinstall " ...
- sendfile
Sendfile 函数在两个文件描写叙述符之间直接传递数据(全然在内核中操作,传送),从而避免了内核缓冲区数据和用户缓冲区数据之间的拷贝,操作效率非常高,被称之为零拷贝. Sendfile 函数的定义 ...
- JavaScript 组数去重demo
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- JVM笔记(虚拟机各内存的介绍)
JVM笔记 java代码执行分为两部分:javac编译 java执行 代码并不是由上往下执行的,会经过编译期重排序进行优化,存在依赖关系的代码不会被重排序,保证了代码最终执行结果的正确性! j ...
- 找bug hhh
http://oj.acm.zstu.edu.cn/JudgeOnline/problem.php?id=4434 没有用队列,疯狂找不到bug,后来发现很简单的判断时==n和m了,本来心花怒放,测试 ...
- 一、利用Python编写飞机大战游戏-面向对象设计思想
相信大家看到过网上很多关于飞机大战的项目,但是对其中的模块方法,以及使用和游戏工作原理都不了解,看的也是一脸懵逼,根本看不下去.下面我做个详细讲解,在做此游戏需要用到pygame模块,所以这一章先进行 ...
- 浅析js闭包
闭包是一个老生常谈的问题,简单概括下闭包的形成的两个条件: 1.定义在函数内部 2.函数内部引用父层作用域变量 举一个最简单的例子: function test() { var a = 1; func ...
- SpringMVC(十二) RequestMapping使用POJO作为参数
将一个普通的JAVA类对象作为一个参数传入. POJO类Address: package com.tiekui.springmvc.pojo; public class Address { priva ...