您现在的位置是:首页 > 正文

事件流和事件处理程序

2024-04-01 02:58:55阅读 1

事件流:

事件流分为事件捕获(Netscape)和事件冒泡(IE)

事件捕获:思想是不太具体的节点(如document)应该更早接收到事件

事件冒泡:思想是从具体的元素接收,逐级向上传播给不具体的节点

IE9、Safari、Chrome、Firefox都支持这两种事件流,Opera支持事件捕获流,这些浏览器都是从window元素开始捕获或者冒泡到window元素

DOM2级事件规定的事件流包含三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段

事件处理程序分类:

1、HTML事件处理程序:某个元素支持的每种事件,都可以使用一个与相应事件处理程序同名的HTML特性来指定

<input type="button" value="Click me" onclick="alert('Clicked');"/>

在click前面加on来组成特性,在动态创建的函数中可以扩展作用域,在函数内部可以像范围局部变量一样访问document及该元素本身的成员,可以通过with来扩展作用域

function(){
   with(document){
      with(this){
         //元素属性值
      }
   }
}

缺点:

a、存在时差,用户在HTML元素上触发该元素时,其事件处理程序没有准备好,比如事件处理程序在元素被触发时还没有加载完全

b、扩展事件处理程序的作用域链在不同浏览器会导致不同的结果

c、HTML与JavaScript代码耦合

2、DOM0级事件处理程序:将一个函数赋值给一个事件处理程序属性

var btn = document.getElementById("myBtn");
btn.onclick = function(){
   alert("Hello");
   alert(this.id);//"myBtn"
}
btn.onclick = null;//删除事件处理程序

这个事件处理程序在元素的作用域中运行,this引用当前元素,以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理

3、DOM2级事件处理程序:使用addEventListener()绑定事件

var btn = document.getElementById("myBtn");
btn.addEventListener("click",function(){
   alert(this.id);
},false);

第一次参数是处理的文件名,第二个参数是事件处理程序的函数,第三个参数如果是true则在捕获阶段调用,如果是false就在冒泡阶段调用。这个程序在元素作用域中运行,一个事件可以添加多个事件处理程序,按照顺序执行,可以通过removeEventListener移除函数,但是不能移除函数的匿名函数

var btn = document.getElementById("myBtn");
var handler = function(){
   alert(this.id);
}
btn.addEventListener("click",handler,false);//click没有on前缀
btn.removeEventListener("click",handler,false);//必须传一样的函数,不是同一个函数无效

4、IE事件处理程序:使用attachEvent()和detachEvent()

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick",function(){//click前面有on前缀
   alert(this.id);
});

冒泡阶段被执行,事件处理程序在全局作用域中运行,也可为一个事件添加不同的函数,按照添加的逆序执行。

5、跨浏览器的事件处理程序:通过能力检测判断浏览器支持的事件处理程序,进行相应的处理

var EventUtil = {
   addHandler:function(element,type,handler){
      if(element.addEventListener){
         element.addEventListener(type,handler,false);//DOM2级
      } else if(element.attachEvent){
         element.attachEvent(type,handler);//IE
      }else {
         element["on"+type] = handler;//DOM0级
   }
};

事件对象:

1、DOM中的事件对象:兼容DOM的浏览器会将一个event对象传入事件处理程序中,event的属性和方法有很多:

属性/方法 说明
bubbles 说明事件是否冒泡
cancelable 说明是否可以取消事件的默认行为
currentTarget 注册事件处理程序的那个元素
defaultPrevented 为true代表已经调用preventDefault()
preventDefault() 取消事件的默认行为,当cancelable=true时可用
stopPropagation() 取消事件的进一步冒泡或者捕获
target 事件的目标,即触发该事件的元素
type 被触发的事件的类型

在事件处理程序内部,this==currentTarget,但是target不一样等于他们两个,当直接把事件处理程序绑定到目标元素则这几个值相同。

2、IE中的事件对象:IE的event对象会作为参数传递给事件处理函数,有以下属性

属性/方法 说明
cancelBubble 取消冒泡
returnValue 取false可以取消事件的默认行为
srcElement  
   

 

转载于:https://my.oschina.net/u/3804999/blog/1813661

网站文章

  • seq2seq

    seq2seq

    学习seq2seq,讲内容记录下来

    2024-04-01 02:58:49
  • 布隆过滤器使用总结

    布隆过滤器使用总结

    简介 简单来说,布隆过滤器(BloomFilter)是一种数据结构。特点是存在性检测,如果布隆过滤器中不存在,那么实际数据一定不存在;如果布隆过滤器中存在,实际数据不一定存在。相比于传统数据结构(如:...

    2024-04-01 02:58:43
  • 负载均衡调度算法大全

    负载均衡调度算法大全

    http://www.open-open.com/lib/view/open1416560538742.html负载主机可以提供很多种负载均衡方法,也就是我们常说的调度方法或算法:轮循(Round Robin)这种方法会将收到的请求循环分配到服务器集群中的每台机器,即有效服务器。如果使用这种方式,所有的标记进入虚拟服务的服务器应该有相近的资源容量 以及负载形同的

    2024-04-01 02:58:02
  • 计算机毕设ssmAndroid的问卷调查管理系统9q4d4(开题+源码)

    计算机毕设ssmAndroid的问卷调查管理系统9q4d4(开题+源码)

    通过该系统,研究者能够灵活地设计问卷题目,方便地发布和管理问卷,高效地收集和分析调查数据。研究方案和预期成果: 本研究将采用软件开发的方法,结合Android平台的特点,设计并实现一款功能完善、易于使...

    2024-04-01 02:57:56
  • Unity ToLua 使用教程

    Unity ToLua 使用教程

    下载地址https://github.com/jarjin/LuaFramework_NGUIhttps://github.com/jarjin/LuaFramework_UGUI环境搭建(1) 生成...

    2024-04-01 02:57:49
  • stringRedisTemplate中ValueOperations设置值

    stringRedisTemplate中ValueOperations设置值

    stringRedisTemplate中ValueOperations设置值

    2024-04-01 02:57:08
  • TZ_13_微服务场景Eureka

    1.搭建Eureka的注册中心 Eureka服务中心 application.yaml文件的配置#配置自己的端口号server: port: 10086#配置注册中心让自己也能注册到自己 Client就不会因为注册不到自己而报错了eureka: client: service-url: defaultZone: http://...

    2024-04-01 02:57:01
  • springboot自动装配的原理

    @EnableAutoConfiguration实现的关键在于引入了AutoConfigurationImportSelector,其核心逻辑为selectImports方法, 逻辑大致如下:从spr...

    2024-04-01 02:56:54
  • 阿里云海外服务器需要备案吗?海外服务器地域节点分布表

    阿里云海外服务器需要备案?云吞铺子:当然不需要备案!阿里云地域节点覆盖全球,云吞铺子分享海外服务器地域节点分布表:海外服务器需要备案吗?购买阿里云海外服务器需要备案吗?不需要备案!海外服务器地域节点分布表随着时间推移,阿里云会支持越来越多的地域节点,精准信息请以官方文档为准:地域和可用区 - 阿里云地域名称所在城市Region ID可...

    2024-04-01 02:56:48
  • 【深度学习笔记1.1】人工神经网络(内含模型保存与恢复介绍)

    【深度学习笔记1.1】人工神经网络(内含模型保存与恢复介绍)

    线性阈值单元 线性阈值单元(LTU):输入和输出是数字(而不是二进制开/关值),并且每个输入连接都与权重相连。LTU计算其输入的加权和(z = W1×1 + W2×2 + … + + WN×n = W...

    2024-04-01 02:56:08