本文实例讲述了
javascript
事件用法。分享给大家供大家参考,具体如下:
JavaScript通过事件与HTML交互。
事件流
事件流规定了事件的触发规则和顺序。DOM2规定了事件流包括三个阶段:事件捕获 -> 目标触发除 -> 事件冒泡。DOM2规定在事件捕获阶段不应调用事件处理程序,不过各大浏览器都不鸟它。DOM2级的事件处理程序操作函数对:addEventListener和removeEventListener的第三个参数则把这种事变成了DIY,这是一种妥协,同时让初学者认为dom的管理一片混乱。
立即学习
“
Java免费学习笔记(深入)
”;
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
下载
更新上述js中addEventListener和removeEventListener中的第三个参数为true,对比为false时的效果,便大约能理解事件流了。
事件
事件是用户或浏览器自身执行的某和动作。
事件处理程序的添加方式
响应事件的函数称为事件处理程序。
指定事件处理程序有以下方式:
HTML特性指定。
如果某个元素支持某个事件,那么就有一个对应的HTML特性,用此特性就可以给其添加事件处理程序 。
立即学习
“
Java免费学习笔记(深入)
”;
DOM0级。 将一个函数赋值给一个元素的事件处理程序属性:这是使用js指定事件生理程序的传统方式,至今仍被使用。
立即学习
“
Java免费学习笔记(深入)
”;
DOM2级。
通过addEventListener和removeEventListener来管理元素的事件。所有DOM节点都包含这两个方法,它们都包含三个参数,以add为例:
addEventListener(事件名,事件处理函数,是否在事件捕获时执行事件处理程序)
立即学习
“
Java免费学习笔记(深入)
”;
在上面代码中,指向同一对象的引用被认为是相同的,同样的申明生成的是两个外表相同但是存储在堆上两个不同位置的不同对象。
事件对象
DOM上的事件被触发时,会生成一个事件对象event。无论指定了什么事件处理程序都会传入event对象:准确的地说,event对象是在调用执行函数的执行环境中创建的,根据作用域链的定义,可知它是如何传入的。
立即学习
“
Java免费学习笔记(深入)
”;
event包含丰富的成员,用来控制访问事件,下面是所有事件的共有成员。
target:触发事件的动作直接作用的目标元素。
currentTarget:等于this,事件处理程序作用于的元素。
eventPhase:调用事件处理程序时,所处的事件流中的阶段。1,2,3 三个值分别对应事件流三阶段。
type:事件类型。单击事件对应 String: "click"。
事件类型
事件类型分为以下几类:
UI事件。
焦点事件。
鼠标与滚轮事件。
键盘与文本事件。
复合事件。
变动事件。
HTML5事件。
设备事件。
触摸与手势事件。
var btn = document.getElementById("btn");
btn.addEventListener("click",function(){alert(this.id);},false);
document.body.addEventListener("click",function(){alert("body");},false);var btn = document.getElementById("btn");
btn.onmouseover = function(){
this.innerHTML="按钮";
};var btn = document.getElementById("btn");
btn.addEventListener("click",function(){alert(this.id);},true);
//注意下面的remove,它完全没有用,这两个匿名函数实际上是不同的对象
btn.removeEventListener("click",function(){alert(this.id);},true);var btn = document.getElementById("btn");
var btnClick = function(){
alert(event.type);
}
btn.onclick = btnClick;//点击btn按钮时,弹出msg:click