讲给Android程序员看的前端教程(35)——事件处理机制

来源：互联网发布：c 面向对象编程实例编辑：程序博客网时间：2024/06/11 05:24

自定义View系列教程00–推翻自己和过往，重学自定义View
自定义View系列教程01–常用工具介绍
自定义View系列教程02–onMeasure源码详尽分析
自定义View系列教程03–onLayout源码详尽分析
自定义View系列教程04–Draw源码分析及其实践
自定义View系列教程05–示例分析
自定义View系列教程06–详解View的Touch事件处理
自定义View系列教程07–详解ViewGroup分发Touch事件
自定义View系列教程08–滑动冲突的产生及其处理

探索Android软键盘的疑难杂症
深入探讨Android异步精髓Handler
详解Android主流框架不可或缺的基石
站在源码的肩膀上全解Scroller工作机制

Android多分辨率适配框架（1）— 核心基础
Android多分辨率适配框架（2）— 原理剖析
Android多分辨率适配框架（3）— 使用指南

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl
本文视频教程：http://www.stay4it.com/my/course/37

在软件开发领域，几乎所有的GUI编程都会涉及到事件机制。比如，我们在Android中非常熟悉的单击，触摸，滑动，双击，长按等等都属于事件的范畴。今天我们就来学习JavaScript中事件处理机制。

事件模型

在此介绍JavaScript事件模型中的几个重要概念

事件类型
事件类型(event type)是一个用于标明事件类型的字符串。例如：“click”表示单击事件；”load”表示页面或者图片加载完成的事件
事件目标
事件目标(event target)表示触发事件的对象。比如，点击button后发出一个click事件，那么该button就是事件目标也叫做事件源
事件
简单地来说，事件(event)=事件类型(event type)+事件目标(event target)。通常情况下我们描述一个事件都会包括两方面的信息：事件类型和事件目标。比如：页面中的红色button触发了click事件
事件监听器
事件监听器(event listener)也叫做事件处理器(event handler)，顾名思义，它就是用于处理或者响应事件的JavaScript函数。

在此，列举几个JavaScript常用的事件

onclick 表示单击事件
onchange 表示域内容发生变化
onload 表示页面或图像被加载完成
onmousemove 表示鼠标移动
onmouseover 表示鼠标移到元素之上
onfocus 表示元素获得焦点
onselect 表示文本被选定

事件处理

在此介绍JavaScript中几种常用的绑定事件处理函数的方式

利用标签属性绑定事件处理函数

在该方式中将事件处理函数绑定到标签的属性上，请看如下示例：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>event</title></head><body>    <button id="button" onclick="buttonClick()">Please click me</button>    <script type="text/javascript">        function buttonClick(){            alert("You click the button");        }    </script></body></html>

在该示例中通过为button标签的onclick属性设值绑定事件处理函数。运行后效果如下图所示：

这里写图片描述

在JavaScript代码中绑定事件处理函数

请看如下示例：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>event</title></head><body>    <button id="button">Please click me</button>    <script type="text/javascript">        var b=document.getElementById("button");        b.onclick=function(){            alert("You click the button");        };    </script></body></html>

在该示例中，通过JavaScript代码为button标签绑定了事件处理函数

采用addEventListener( )绑定事件处理函数

除了刚才提到的两种方式以外，JavaScript还常用addEventListener( )绑定事件处理函数，我们一起来瞅瞅这个函数。

elementObject.addEventListener(eventName,handle,useCapture);

eventName 表示事件名称。例如，单击事件传入”click”即可
handle 表示处理事件的函数
useCapture 该boolean类型参数用于指定监听事件传播的哪个阶段。其中，false表示监听冒泡阶段；true表示监听捕获阶段

我想看到“捕获”二字，很多人心里都在想：这是啥玩意？！？

还记得我们Android里面的事件传递机制么？在Android开发中我们常提事件的传递和消费。其实在JavaScript中也是这么个套路，无非是换了个说法罢了——把”传递”说成了”捕获”；把”消费”说成了”冒泡”。也就是说，JavaScript里常说的事件捕获和冒泡与Android中常说的事件传递和消费是同一回事儿！所以，关于JavaScript的事件传播可以分成两个阶段：事件捕获阶段和事件冒泡阶段。嗯哼，关于JavaScript的事件传播不再赘述，如果有不明白的童鞋请参考我的博客专栏《 Android自定义View系列经典教程》，在该教程中从源码角度剖析了Android事件传递机制。

嗯哼，回到JavaScript的世界，请看如下示例：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>event</title></head><body>    <button id="button">Please click me</button>    <script type="text/javascript">        var buttonClick=function(){            alert("You click the button");        }        var b=document.getElementById("button");        b.addEventListener("click",buttonClick,false);    </script></body></html>

在此中通过addEventListener( )为标签绑定了事件处理函数，也可在需要的时候利用JavaScript提供的removeEventListener( )解除事件处理函数的绑定。在该示例中，我们将addEventListener( )函数的第三个参数设置为false，表示不监听捕获阶段而监听冒泡阶段。其实，一般情况下均为第三个参数传入false即可。为什么呢？因为IE8和更老的浏览器压根就不支持对于捕获阶段的监听；我们来瞅瞅当时用于绑定和解除事件处理函数的方法：

elementObject.attachEvent(eventName,handle);
elementObject.detachEvent(eventName,handle);

从这里也可以看出来，这一对方法只有两输入参数，压根就没有第三个boolean类型的参数！再回过头来瞅瞅：

elementObject.addEventListener(eventName,handle,useCapture);
elementObject.removeEventListener(eventName,handle,useCapture);

这一对方法的第三个参数useCapture表示是否监听捕获阶段！
如果设为false，表示不监听捕获阶段，监听冒泡阶段
如果设为true，表示不监听冒泡阶段，监听捕获阶段

阅读全文

1 0