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元素进行操作的时候,会产生一个事件,该事件会驱动某些函数 ...
随机推荐
- alert()与console.log()的区别
[1]alert() [1.1]有阻塞作用,不点击确定,后续代码无法继续执行 [1.2]alert()只能输出string,如果alert输出的是对象会自动调用toString()方法 e.g. al ...
- js中用tagname和id获取元素的3种方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 基于X86平台的PC机通过网络发送一个int(32位)整数的字节顺序
1.字节顺序 字节顺序是指占内存多于一个字节类型的数据在内存中的存放顺序,通常有小端.大端两种字节顺序.小端字节序指低字节数据存放在内存低地址处,高字节数据存放在内存高地址处:大端字节序是高字节数据存 ...
- 认识AMD、CMD、UMD、CommonJS
0.导言 JavaScript的生态系统一直在稳步增长,当各种组件混合使用时,就可能会发现不是所有的组件都能“和平共处”,为了解决这些问题,各种模块规范就出来了. 1.AMD(Asynchromous ...
- JSON入门指南--服务端处理JSON
平时公司使用的ASP.NET MVC3来开发Web项目,其实在ASP.NET中已经原生的支持JSON.所以基本不需要引进Newtonsoft.Json.dll.下面看在MVC4中,后台生成JSON数据 ...
- C#/VB.NET 向PowerPoint文档插入视频
如今,Microsoft Office PowerPoint在我们日常生活中的应用已经很广泛了,利用Microsoft Office PowerPoint不仅可以创建演示文稿,还可以在互联网上召开面对 ...
- js ES6 对字符的操作注意事项
1.codePointAt方法是测试一个字符由两个字节还是由四个字节组成的最简单方法. function is32Bit(c) { return c.codePointAt(0) > 0xFFF ...
- javascript判断元素存在和判断元素存在于实时的dom中的方法
今天(周六)下午我在公司加班时不知道要干什么,就打开公司的一个wordpress项目网站,想看下之前自己做的一个网页是否有问题. 打开网站首页,我习惯性的打开了chrome的调试工具,然后鼠标开始滚动 ...
- 四大组件之ContentProvider
前言 ContentProvider作为Android的四大组件之一,是属于需要掌握的基础知识,可能在我们的应用中,对于Activity和Service这两个组件用的很常见,了解的也很多,但是对Con ...
- SQL Server时间粒度系列
工作中经常遇到针对业务部门提出不同时间粒度(年.季度.月.周.日等等日期时间粒度,以下简称时间粒度)的数据统计汇总任务,也看到不少博友针对这方便的博文,结合SQL Server的日期时间函数和 ...