DOM 事件流与事件处理程序
㈠事件流
▶事件：是文档和浏览器窗口中发生的，特定的交互瞬间。
▶事件流：描述的是从页面中接受事件的顺序
⑴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 事件流与事件处理程序的更多相关文章
- js事件流、事件处理程序/事件侦听器
1.事件流 事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档). 事件捕获 ...
- JS——事件流与事件处理程序
1.事件流:从页面中接收事件的顺序 1.1 IE :事件冒泡流1.2 Netscape :事件捕获1.3 DOM事件流 :事件捕获阶段——事件目标阶段——事件冒泡阶段DOM2级事件规定 :捕获阶段不会 ...
- JavaScript 中的事件流和事件处理程序（读书笔记思维导图）
JavaScript 程序采用了异步事件驱动编程模型.在这种程序设计风格下,当文档.浏览器.元素或与之相关的对象发生某些有趣的事情时,Web 浏览器就会产生事件(event). JavaScript ...
- HTML 事件(三) 事件流与事件委托
本篇主要介绍HTML DOM中的事件流和事件委托. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流与事件委托 4 ...
- 事件流之事件冒泡与事件捕获<JavaScript高级程序设计>学习笔记
1.事件流 浏览器开发团队遇到一个很有意思问题:页面的那一部分会拥有特定的事件? 对于理解这个问题您可以想象画在一张纸上的一组同心圆,如果你把手指放在圆心上,那么你的手指指向的其实不是一个圆,而是纸上 ...
- js 事件流和事件冒泡阻止
js 事件流和事件冒泡阻止 事件流 当浏览器发展到第四代的时候(IE4与Netscape4)浏览器开发团队遇到一个有意思的的问题: 页面的哪一部分会拥有某个特定的事件? 比如在纸上画上一组同心圆,如果 ...
- js：事件（注册、解绑、DOM事件流、事件对象、事件委托）
1.注册事件 (1)传统方式注册事件 <body> <button id="b1">请点击</button> <script> va ...
- jQuery基础（4）- 位置信息、事件流、事件对象、事件代理、jquery事件
一.jQuery的位置信息 jQuery的位置信是JS的client系列.offset系列.scroll系列封装好的一些简便api. 1.宽度和高度 a.获取宽度和高度,例如: .width() // ...
- JS事件流、事件监听、事件对象、事件委托
JS事件流: 01.DOM级别和DOM事件 02.JS事件流:页面中接收事件的顺序 事件冒泡阶段-->处于目标阶段-->事件捕获阶段 (事件捕获总发生在事件冒泡前面) 03.捕获:从外向里 ...
随机推荐
- Python基础『二』
目录 语句,表达式 赋值语句 打印语句 分支语句 循环语句 函数 函数的作用 函数的三要素 函数定义 DEF语句 RETURN语句 函数调用 作用域 闭包 递归函数 匿名函数 迭代 语句,表达式 赋值 ...
- win10 Snipaste 截图软件
安装教程:搜索 snipaste,网上可以直接下载 使用教程: 1)截图按钮:F1 2)粘贴按钮:F3
- Java EE javax.servlet中的RequestDispatcher接口
RequestDispatcher接口 public interface RequestDispatcher 一.介绍 定义一个对象,从客户端接收请求并将其发送到服务器上的任何资源(例如servlet ...
- 使用Enablebuffering多次读取Asp Net Core 请求体
使用Enablebuffering多次读取Asp Net Core 请求体 1 .Net Core 2.X时代 使用EnableRewind倒带 public IActionResult Index( ...
- C# 添加log4net日志
一.添加log4net的Nuget包 二.在Web.config或者App.config文件中添加log4net配置 代码: <log4net> <!-- OFF, FATAL, E ...
- QT 安卓动态获取权限
一:在AndroidManifest.xml文件中赋予相关权限 二: package ckdz.Appproject; import android.Manifest; import android. ...
- C# List.sort排序(多权重,升序降序)
很多人可能喜欢Linq的orderBy排序,可惜U3D里面linq在Ios上会报错,所以就必须使用list的排序. 其实理解了并不难 升序降序比较 sort有三种结果 1,-1,0分别是大,小,相等. ...
- arcgisJs之featureLayer中feature的获取
arcgisJs之featureLayer中feature的获取 在featureLayer中source可以获取到一个Graphic数组,但是这个数组属于原数据数组.当使用 applyEdits修改 ...
- Linux之远程文件传输
1)scp scp命令用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且scp传输是加密的.可能会稍微影响一下速度.当你服务器硬盘变为只读re ...
- REST easy with kbmMW #1
kbmMW 5.0支持REST服务器的开发,并且非常简单,下面看看如何实作一个REST服务器. 首先我们制作一个服务器应用程序,增加一个简单的Form,并放置kbmMW组件. 在Delphi中单击Fi ...