㈠事件流

▶事件:是文档和浏览器窗口中发生的,特定的交互瞬间。

▶事件流:描述的是从页面中接受事件的顺序

 

⑴DOM事件冒泡

定义:事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接受,然后逐级向上传播至最不具体的那个节点(文档)。

 

具体讲解:

代码:

<html>
<head>
<title>事件流<title>
<meta charset="utf-8"></head>
<body>
<div id="box">
<input type="button" value="按钮" id="btn">
</div>
</body>
</html>

说明:点击按钮,浏览器就会认为:你点按钮的同时,也点击了包含这个按钮的这个容器(“div”),那么你点了这个div以后,它又认为你点了整个HTML了,那么你点了整个HTML,它又认为你点了整个document。也就是说:click事件在input上触发,那么它会一级一级往上冒,最后直到冒到document。

 

⑵DOM事件捕获

定义:不太具体的节点应该更早接受到事件,而最具体的节点最后接受到事件。

 

具体讲解:

代码:

<html>
<head>
<title>事件流<title>
<meta charset="utf-8"></head>
<body>
<div id="box">
<input type="button" value="按钮" id="btn">
</div>
</body>
</html>

说明:用事件捕获的思想:它认为最先把事件用document接收了,然后让HTML接收了,然后又让body接收,然后又让div接收了,最后才被input接收了。

 

㈡事件处理程序

⑴ HTML事件处理程序

含义:你的事件直接加在HTML结构里

具体解释:

代码:

<html>
<head>
<title>事件流<title>
<meta charset="utf-8"></head>
<body>
<div id="box">
<input type="button" value="按钮" id="btn" onclick="alert('hello')">
</div>
</body>
</html>

说明:直接将onclick事件加在input标签上,而且是在HTML结构里

 

注:并不是所有要执行的JS代码都应该写在这个地方,也可以把它封装在这个函数内

代码:

<html>
<head>
<title>事件流<title>
<meta charset="utf-8"></head>
<body>
<div id="box">
<input type="button" value="按钮" id="btn" onclick="showMessage()">
</div>
<script>
function showMessage(){
alert('hello world!');
}
</script>
</body>
</html>

 

HTML事件的缺点:HTML和JS代码紧密的耦合在一起

具体解释:如果要更换事件处理程序,就要修改两个地方:HTML代码和JS函数

 

⑵ DOM0级事件处理程序 

这种方法是一种较为传统的方式:把一个函数赋值给一个事件的处理程序属性

这是用的比较多的方法,原因是简单,跨浏览器的优势

代码示例:

<html>
<head>
<title>事件流<title>
<meta charset="utf-8"></head>
<body>
<div id="box">
<input type="button" value="按钮" id="btn" onclick="showMes()">
<input type="button" value="按钮2" id="btn2" >
</div>
<script>
function showMes(){
alert('hello world!');
}
var btn2=document.getElementById('btn2'); //取得btn2按钮对象
btn2.onclick=function(){ //给btn2添加onclick属性
alert('这是通过DOM0级添加的事件!');
}
btn2.onclick=null; //删除onclick属性
</script>
</body>
</html>

优点:1)没有HTML事件的缺点

           2)可以给一个元素上添加多个事件处理程序,这些事件处理程序会按顺序执行。

 

⑶ DOM2级事件处理程序

①DOM2级事件定义了两个方法:

用于处理指定和删除事件处理程序的操作

addEventListener()  和 removeEventListener()。

②接收三个参数:

1) 要处理的事件名

2) 作为事件处理程序的函数

3) 布尔值(true表示在捕获阶段调用事件处理程序;false表示在冒泡阶段调用事件处理程序)

③代码示例:

<html>
<head>
<title>事件流<title>
<meta charset="utf-8"></head>
<body>
<div id="box">
<input type="button" value="按钮" id="btn" onclick="showMes()">
<input type="button" value="按钮2" id="btn2" >
<input type="button" value="按钮3" id="btn3" >
</div>
<script>
function showMes(){
alert('hello world!');
}
var btn2=document.getElementById('btn2');
var btn3=document.getElementById('btn3');
btn2.onclick=function(){
alert('这是通过DOM0级添加的事件!');
}
btn2.onclick=null;
//DOM2级事件
btn3.addEventListener('onclick',showMes,false); //给btn3添加一个事件监听程序 兼容各种浏览器
//删除事件
btn3.removeEventListener('onclick',showMes,false);
</script>
</body>
</html>

 

④优点:可以给一个元素上添加多个事件处理程序,这些事件处理程序会按顺序执行。

代码示例:

<html>
<head>
<title>事件流<title>
<meta charset="utf-8"></head>
<body>
<div id="box">
<input type="button" value="按钮" id="btn" onclick="showMes()">
<input type="button" value="按钮2" id="btn2" >
<input type="button" value="按钮3" id="btn3" >
</div>
<script>
function showMes(){
alert('hello world!');
}
var btn2=document.getElementById('btn2');
var btn3=document.getElementById('btn3');
btn2.onclick=function(){
alert('这是通过DOM0级添加的事件!');
}
btn2.onclick=null;
//DOM2级事件
btn3.addEventListener('onclick',showMes,false);
btn3.addEventListener('onclick',function(){
alert(this.value);引用被触发的元素
},false); </script>
</body>
</html>

注意:在IE浏览器中不起作用。

 

⑷IE事件处理程序

attachEvent()添加事件

detachEvent()删除事件

②接收相同的两个参数:

事件处理程序的名称和事件处理程序的函数

③不使用第三个参数的原因:IE8及以更早的浏览器版本只支持事件冒泡!

 代码示例:

<html>
<head>
<title>事件流<title>
<meta charset="utf-8"></head>
<body>
<div id="box">
<input type="button" value="按钮" id="btn" onclick="showMes()">
<input type="button" value="按钮2" id="btn2" >
<input type="button" value="按钮3" id="btn3" >
</div>
<script>
function showMes(){
alert('hello world!');
}
var btn2=document.getElementById('btn2');
var btn3=document.getElementById('btn3');
btn2.onclick=function(){
alert('这是通过DOM0级添加的事件!');
}
btn2.onclick=null;
//IE事件处理程序
btn3.attachEvent('onclick',showMes);
btn3.detachEvent('onclick',showMes); </script>
</body>
</html>

 注意:只在IE浏览器和Opera浏览器中使用

 

⑸跨浏览器的事件处理程序

①方法:恰当的使用能力检测

②问题:如何实现跨浏览器解决事件处理程序?

通过将增加和删除封装在一个对象里面,封装了两个方法,每个方法都进行了能力检测,你支持这个方法,就用这个方法,不支持这个方法,就用所支持的方法。

③代码示例:

<html>
<head>
<title>事件流<title>
<meta charset="utf-8"></head>
<body>
<div id="box">
<input type="button" value="按钮" id="btn" onclick="showMes()">
<input type="button" value="按钮2" id="btn2" >
<input type="button" value="按钮3" id="btn3" >
</div>
<script>
function showMes(){
alert('hello world!');
}
var btn2=document.getElementById('btn2');
var btn3=document.getElementById('btn3');
btn2.onclick=function(){
alert('这是通过DOM0级添加的事件!');
}
btn2.onclick=null;
//跨浏览器事件处理程序
vareventUtil={
//添加句柄
addHandler:function(element,type,handler){
if(element.addEventListener){
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.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent('on'+type,handler);
}else{
element['on'+type]=null;
}
}
}
eventUtil.addHandler(btn3,'click',showMes);
eventUtil.removeHandler(btn3,'click',showMes);
</script>
</body>
</html>

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

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

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

  2. JS——事件流与事件处理程序

    1.事件流:从页面中接收事件的顺序 1.1 IE :事件冒泡流1.2 Netscape :事件捕获1.3 DOM事件流 :事件捕获阶段——事件目标阶段——事件冒泡阶段DOM2级事件规定 :捕获阶段不会 ...

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

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

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

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

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

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

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

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

  7. js:事件(注册、解绑、DOM事件流、事件对象、事件委托)

    1.注册事件 (1)传统方式注册事件 <body> <button id="b1">请点击</button> <script> va ...

  8. jQuery基础(4)- 位置信息、事件流、事件对象、事件代理、jquery事件

    一.jQuery的位置信息 jQuery的位置信是JS的client系列.offset系列.scroll系列封装好的一些简便api. 1.宽度和高度 a.获取宽度和高度,例如: .width() // ...

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

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

随机推荐

  1. sqlserver bcp命令导出数据

    原文:sqlserver bcp命令导出数据 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net ...

  2. mysql查询出数据更新到另一张表

    公司今天有个需求,大体意思就是把一个表的玩家游戏场数统计出来,然后赋值到另一张表的字段上,说白了就是两张表,但是查询出来的玩家账号和次数是多条,尝试很多种写法都没用,最后用了最笨的方式解决. -- - ...

  3. 进阶Python:装饰器 全面详解

    进阶Python:装饰器 前言 前段时间我发了一篇讲解Python调试工具PySnooper的文章,在那篇文章开始一部分我简单的介绍了一下装饰器,文章发出之后有几位同学说"终于了解装饰器的用 ...

  4. Ruby Rails学习中:Sass 和 Asset Pipeline,布局中的链接(Rails路由,具名路由),用户注册: 第一步

    接上篇: 一.Sass 和 Asset Pipeline Rails 中最有用的功能之一是 Asset Pipeline, 它极大地简化了静态资源文件(CSS.JavaScript 和图像)的生成和管 ...

  5. 《深入理解 Java 虚拟机》学习 -- 垃圾回收算法

    <深入理解 Java 虚拟机>学习 -- 垃圾回收算法 1. 说明 程序计数器,虚拟机栈,本地方法栈三个区域随线程而生,随线程而灭,这几个区域的内存分配和回收都具备确定性 Java 堆和方 ...

  6. vue和react区别

    vue和react区别  

  7. ThreadLocal的原理与使用

    前言 在java web项目中,经常会使用到单例对象,从服务器启动那一时刻就实例化全局对象.然后会对某些全局对象的属性进行修改之类的操作,但是我们知道项目一般都是部署到tomcat.Jboss之类的服 ...

  8. 初识JavaScript对象

    JavaScript对象语法.类型.属性 属性描述符(getOwnPropertyDescriptor().defineProperty()) [[Get]].[[Put]].Getter.Sette ...

  9. Docker 容器数据卷(Data Volume)与数据管理

    卷(Volume)是容器中的一个数据挂载点,卷可以绕过联合文件系统,从而为Docker 提供持久数据,所提供的数据还可以在宿主机-容器或多个容器之间共享.通过卷,我们可以可以使修改数据直接生效,而不必 ...

  10. Python 之 random模块

    Python中的random模块用于生成随机数.1.random.random()  #用于生成一个0到1的随机浮点数:0<= n < 1.0>>> random.ran ...