DOM事件揭秘－事件流
事件：文档／窗口中发生的特定的交互瞬间
瀑布流，图片轮播
动作都是通过事件触发的
课程内容：
1，理解事件流
2，使用时间处理程序
3，不同的事件类型
ie4.0以后，
事件流：描述的是从页面中接收事件的顺序
ie:事件冒泡流
n：事件捕获流
事件冒泡：事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）
事件捕获：不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。多数浏览器也支持，但是低版本的支持不好，请放心使用事件冒泡，知道事件捕获即可。
html事件处理程序：事件直接加载在html结构里，缺点是html和js紧密耦合在一起，如果要更改的话，html和js都要改，麻烦。很多开发人员会摒弃掉。
dom0级事件处理程序：把一个函数赋值给一个事件的处理程序的属性，js比较传统的，用的最多的一种，简单，跨浏览器的优势。
<script>
btn2.onclick = function showmessage(){
alert("111");
}
btn2.onclick = null;//删除onclick属性
</script>
dom2级事件处理程序:2个方法，用于处理指定和删除事件处理程序的操作方法 addEventListener()和removeEventListener（），包含事件名、作为事件处理程序的函数，布尔值（布尔值false-事件冒泡，所以一般用false,true-事件捕获，不常用。)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<input type="button" value="按钮1" id="btn1" onclick="showMes()">
<input type="button" value="按钮2" id="btn2">
<input type="button" value="按钮3" id="btn3">
</div>
<script>
function showMes(){
alert("这是html事件处理程序");
}
var btn2 = document.getElementById("btn2");
btn2.onclick = function showmessage(){
alert("这是dom0级处理程序");
}
btn2.onclick = null;//删除onclick属性
var btn3 = document.getElementById("btn3");
addEventListener("click",showMes,false);
addEventListener("click",function(){
alert(btn3.value);
},false);
addEventListener("click",function(){
alert("这是dom2级处理程序");
},false);
removeEventListener("click",showMes,false);//删除事件属性
</script>
</body>
</html>
//dom0 和 dom2都可以添加多个事件属性，按照代码顺序执行
事件名不能加on,false兼容各种浏览器，listener单词不要写错。
测试，ie不起作用。
4、IE事件处理程序－支持ie和opera
attachEvent()添加事件
detachEvent()删除事件
这两个方法接收相同的两个参数：事件处理程序名称与事件处理函数。因为ie8和以前的版本只支持事件冒泡，默认事件冒泡。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<input type="button" value="按钮1" id="btn1" onclick="showMes()">
<input type="button" value="按钮2" id="btn2">
<input type="button" value="按钮3" id="btn3">
</div>
<script>
//html事件处理程序
function showMes() {
alert("这是html事件处理程序");
}
//dom0级事件处理程序
var btn2 = document.getElementById("btn2");
btn2.onclick = function showmessage() {
alert("这是dom0级处理程序");
}
btn2.onclick = null; //删除onclick属性
// //dom2级事件处理程序
// var btn3 = document.getElementById("btn3");
// addEventListener("click", showMes, false); //事件名不能加on,false兼容各种浏览器，listener单词不要写错。
// addEventListener("click", function() {
// alert(btn3.value);
// }, false);
// addEventListener("click", function() {
// alert("这是dom2级处理程序");
// }, false);
// removeEventListener("click", showMes, false); //删除事件属性
// //dom0 和 dom2都可以添加多个事件属性，按照代码顺序执行
//能力检测 跨浏览器事件处理
var eventutill = {
//添加句柄
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;
}
}
}
eventutill.addHandler(btn3,"click",showMes);//click记得要加引号
//eventutill.addHandler(btn3,“click”,showMes);
</script>
</body>
</html>
DOM事件揭秘－事件流的更多相关文章
- HTML 事件(三) 事件流与事件委托
本篇主要介绍HTML DOM中的事件流和事件委托. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流与事件委托 4 ...
- 三言两语之js事件、事件流以及target、currentTarget、this那些事
厉害了我的哥--你是如此简单我却将你给遗忘 放假前再看某文档,里边提到两个我既熟悉又陌生的概念target.currentTarget,说他熟悉我曾经看到过这两个事件对象的异同处,说他陌生吧?很不 ...
- 【使用 DOM】使用事件
1. 使用简单事件处理器 可以用几种不同的方式处理事件.最直接的方式是用事件属性创建一个简单事件处理器(simple event handler).元素为它们支持的每一种事件都定义了一个事件属性.举个 ...
- js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象
事件对象 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...
- js事件流、事件处理程序/事件侦听器
1.事件流 事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档). 事件捕获 ...
- DOM事件处理程序-事件对象-键盘事件
事件流: 事件流--描述的是从页面中接受事件的顺序 IE ---事件冒泡流:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档). Netsc ...
- JavaScript 事件 事件流 事件对象 事件处理程序 回调函数 error和try...catch和throw
参考资料: 慕课网 DOM事件探秘 js事件对象 处理 事件驱动: JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个时间,该时间会驱动某些函数 ...
- [JavaScript] JavaScript事件注册,事件委托,冒泡,捕获,事件流
面试题 event 事件 事件委托是什么? 如何阻止事件冒泡,阻止默认事件呢? Javascript 的事件流模型都有什么? 事件绑定和普通事件有什么区别? Event 对象 Event 对象,当事件 ...
- python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- JavaScript Event 事件 事件流 事件对象 事件处理程序 回调函数 error和try...catch和throw
参考资料: 慕课网 DOM事件探秘 js事件对象 处理 事件驱动: JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个事件,该事件会驱动某些函数 ...
随机推荐
- 巧用Ajax的beforeSend 提高用户体验
jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作.具体可参考jQuery官方文档:http://api.jquer ...
- OpenCascade Eigenvalues and Eigenvectors of Square Matrix
OpenCascade Eigenvalues and Eigenvectors of Square Matrix eryar@163.com Abstract. OpenCascade use th ...
- .Net 转战 Android 4.4 日常笔记（8）--常见事件响应及实现方式
在Andrioid开发中,常见的事件如下 单击事件 OnClickListener 长按事件 OnLongClickListener 滑动事件 OnTouchListenner 键盘事件 OnKeyL ...
- ASP.NET WebAPi之断点续传下载（下）
前言 上一篇我们穿插了C#的内容,本篇我们继续来讲讲webapi中断点续传的其他情况以及利用webclient来实现断点续传,至此关于webapi断点续传下载以及上传内容都已经全部完结,一直嚷嚷着把S ...
- react+redux教程（二）redux的单一状态树完全替代了react的状态机？
上篇react+redux教程,我们讲解了官方计数器的代码实现,react+redux教程(一).我们发现我们没有用到react组件本身的state,而是通过props来导入数据和操作的. 我们知道r ...
- Objective-C精选字符串处理方法
无论是什么编程语言对字符串的操作是少不了的,对复杂的字符串的分析和操作我们可以用正则表达式来达到我们的目的.简单的字符串处理我们可以借助OC中NSString封装好的字符串处理方法,不过前提是你得了解 ...
- 纯CSS打造忙碌光标
我们经常会用到忙碌等待的情况,比如ajax等待回调,或者加载页面的时候,我们通常的做法就是放一张loading.gif图片,在那里转呀转. 以前是在pc上用,也没有觉得不妥,如今要在移动端用,问题就来 ...
- DDD 领域驱动设计－谈谈 Repository、IUnitOfWork 和 IDbContext 的实践（1）
好久没写 DDD 领域驱动设计相关的文章了,嘎嘎!!! 这几天在开发一个新的项目,虽然不是基于领域驱动设计的,但我想把 DDD 架构设计的一些东西运用在上面,但发现了很多问题,这些在之前的短消息项目中 ...
- 【Java】子类的链式调用
记录最近在项目设计中遇到的一个小问题. 前提:有这样两个POJO类,它们都可以通过链式调用的方式来设置其属性值,其中一个类继承了另一个类. 问题:通过链式调用,子类对象访问父类方法后,如何使返回对象仍 ...
- 创建自己的Vagrant box
这是一个关于Vagrant的学习系列,包含如下文章: Vagrant入门 创建自己的Vagrant box 用Vagrant搭建Jenkins构建环境 用Vagrant和Ansible搭建持续交付平台 ...