JS事件(一)事件流&事件处理程序
1、事件流描述的是从页面接收事件的顺序
IE和Netscape提出了几乎完全相反的事件流概念
IE:事件冒泡(由内而外)
Netscape:事件捕获(由外向内)
DOM2级事件规定事件流包括三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段
2、为事件指定处理程序的方式
2.1、HTML事件处理程序
- <script>
- function fun(){
- alert('clicked');
- }
- </script>
- <button onclick="func()">click me</button>
缺点:1、时差 2、html代码语JavaScript代码耦合紧密,不易改动
2.2、DOM0级事件处理程序
获取要操作对象的引用
给对象的事件处理程序属性(如onclick)设置属性值为函数
以这种方式添加的事件会在事件流的冒泡阶段被处理
- var btn=document.getElementById('btn');
- btn.onclick=function(){
- alert(1);
- }
删除DOM0级事件处理程序:
- btn.onclick = null;
2.3、DOM2级事件处理程序
- var btn=document.getElementById("btn");
- btn.addEventListener("click",function(){
- alert("hello");
- },false);
三个参数:事件、处理函数、事件处理阶段(true捕获false冒泡)
最大的优点:可以为一个对象添加多个事件,不会相互覆盖,而是按某种顺序依次执行
移除事件:
- var btn=document.getElementById("btn");
- function fun(){
- alert("hello");
- }
- btn.addEventListener("click",fun,false);
- btn.removeEvemtListener("click",fun,false);
注意:removeEventListener()不能移除匿名函数,像下面这样也是无效的:
- var btn=document.getElementById("btn");
- btn.addEventListener("click",function(){
- alert("hello");
- },false);
- btn.removeEventListener("click",function(){
- alert("hello");
- },false);
添加和移除的被认作两个不同的函数
大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,这样可以最大程度兼容各种浏览器
2.4、IE事件处理程序
IE8-浏览器值支持事件冒泡
有两个类似的方法:attachEvent()和detachEvent()
- var btn=document.getElementById("btn");
- function fun(){
- alert(this===window);//true
- }
- btn.attachEvent("click",fun);
- btn.detachEvent("click",fun);
总结:DOM2级和IE事件处理程序有何不同之处?
1.作用域:DOM2级事件处理与DOM0事件处理一样,作用域在当前元素(btn)的作用域中,IE事件处理程序的作用域是全局:window;
2.参数:个数不同,IE事件处理程序只支持冒泡;
3.是否有'on':DOM2无:'click',IE有:'onclick';
4.都支持添加多个事件,但执行顺序相反:DOM2按添加顺序,IE相反。
兼容浏览器的事件处理对象,以下:
- var EventUtil={
- 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;
- }
- }
- }
JS事件(一)事件流&事件处理程序的更多相关文章
- JavaScript 事件 事件流 事件对象 事件处理程序 回调函数 error和try...catch和throw
参考资料: 慕课网 DOM事件探秘 js事件对象 处理 事件驱动: JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个时间,该时间会驱动某些函数 ...
- python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- JavaScript Event 事件 事件流 事件对象 事件处理程序 回调函数 error和try...catch和throw
参考资料: 慕课网 DOM事件探秘 js事件对象 处理 事件驱动: JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个事件,该事件会驱动某些函数 ...
- JS事件流、事件监听、事件对象、事件委托
JS事件流: 01.DOM级别和DOM事件 02.JS事件流:页面中接收事件的顺序 事件冒泡阶段-->处于目标阶段-->事件捕获阶段 (事件捕获总发生在事件冒泡前面) 03.捕获:从外向里 ...
- js事件常用操作、事件流
注册事件 给元素添加事件,称为注册事件或者绑定事件. 注册事件有两种方式:传统方式和方法监听注册方式 传统方式 on开头的事件,例如onclick <button onclick="a ...
- js事件捕获,事件冒泡,事件委托以及DOM事件流
一:DOM事件流: 事件流是从页面接收事件的顺序,DOM2级事件规定事件流包括三个阶段: ①事件捕获阶段:用意在于事件达到目标之前捕获它,在事件捕获阶段事件流模型:document→html→body ...
- js的事件流事件机制
(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...
- js事件流 事件捕获 及时间冒泡详解
Javascript与HTML之间的交互是通过事件实现. 一.事件流 事件,是文档或浏览器窗口中发生的一些特定的交互瞬间.事件流,描述的是页面中接受事件的顺序.IE9,chrome,Firefox,O ...
- [已转移]js事件流之事件冒泡的应用----事件委托
该文章已转移到博客:https://cynthia0329.github.io/ 什么是事件委托? 它还有一个名字叫事件代理. JavaScript高级程序设计上讲: 事件委托就是利用事件冒泡,只指定 ...
- javaScript事件(二)事件处理程序
一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 前面提到,事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.响应 ...
随机推荐
- 让PC端页面在手机端显示缩小版的解决方法
做页面的时候我们做好pC端页面时,因编辑那边需求,在手机端页面也应该是缩小版,不能乱的.在网上找了各种解决方案,经实验,这种是可以的: 在head里边加上这两句meta <meta name= ...
- Java中的super()使用注意
1)super(参数):调用基类中的某一个构造函数(应该为构造函数中的第一条语句)2)this(参数):调用本类中另一种形成的构造函数(应该为构造函数中的第一条语句)3)super: 它引用当前对象的 ...
- over-relaxation
逐次超松弛sor 参考1https://blog.csdn.net/lusongno1/article/details/68941137 有各种对比和程序 主要就是取了加权平均,没仔细看
- poj-1724(bfs+优先队列)
题意:有向图,给你m条边,每条边有两个权值,路径长和通过这条路径的花费,问你在不超过k花费的前提下,最短的路径从1走到n 解题思路:因为边数很少,我们可以直接用暴力每条边的方式来找最小的路径长,也就是 ...
- [离散时间信号处理学习笔记] 10. z变换与LTI系统
我们前面讨论了z变换,其实也是为了利用z变换分析LTI系统. 利用z变换得到LTI系统的单位脉冲响应 对于用差分方程描述的LTI系统而言,z变换将十分有用.有如下形式的差分方程: $\displays ...
- 常用模块collections
collections模块 在内置数据类型(dict.list.set.tuple)的基础上,collections模块还提供了几个额外的数据类型:Counter.deque.defaultdict. ...
- Qt QLineEdit
//lineEdit显示文字 QLineEdit *lineEdit = new QLineEdit(widget); lineEdit->setObjectName(QString()); l ...
- NoClassDefFoundError与ClassNotFoundException
原文地址: https://blog.csdn.net/jamesjxin/article/details/46606307 怎么解决NoClassDefFoundError错误 NoClassDef ...
- python基础成长之路三
1,基础数据类型 总览 int :数字 用于计数,计算,运算等...1 , 2 , 3 , 100 , ... str :字符串 用户少量的数据储存,便于操作 "这就是字符串&qu ...
- Codeforces997C Sky Full of Stars 【FMT】【组合数】
题目大意: 一个$n*n$的格子,每个格子由你填色,有三种允许填色的方法,问有一行或者一列相同的方案数. 题目分析: 标题的FMT是我吓人用的. 一行或一列的问题不好解决,转成它的反面,没有一行和一列 ...