JavaScript 学习笔记（十五）

事件
事件是DOM（文档对象模型）的一部分。事件流就是事件发生顺序，这是IE和其他浏览器在事件支持上的主要差别。
一、事件流
1、冒泡型事件
IE上的解决方案就是冒泡型事件，它的基本思想是从最特定的目标到最不特定的事件目标（document对象）的顺序触发。
过程：按照DOM的层次结构像水泡一样不断上升至顶端。（从里面的div触发事件再到body，到html最后直到document最顶端）。
2、捕获型事件
可以说跟冒泡是正好相反的，事件从最不精确的对象开始触发，然后直到最精确。
3、DOM事件流
DOM同时支持以上两种事件模型，其中捕获型事件先发生，从document对象开始，最后在document对象结束。
二、事件监听函数
1、IE
每个函数和window对象都有两个方法：
attachEvent()方法：附加事件处理函数
[Object].attachEvent(“事件名”，处理函数fnHandler)；
该方法有两个参数。
var fnClick = function() {
alert("你点击了ID为div1的DIV");
}
var oDiv = document.getElementById("div1");
oDiv.attachEvent("onclick", fnClick);
可以附加多个处理函数。
detachEvent()方法：分离移除事件处理函数
2、DOM
addEventListener()方法：分配附加事件处理函数
[Object]. addEventListener (“事件名”，处理函数fnHandler，Boolean)；
该方法有三个参数（“事件名”，“分配的函数”，处理函数是冒泡阶段还是捕获阶段）
如果事件处理函数是用于捕获阶段，则第三个参数是true，用于冒泡阶段则为false
var fnClick = function() {
alert("Clicked!");
}
var oDiv = document.getElementById("div");
oDiv.addEventListener("click", fnClick, false);
oDiv.removeEventListener("click", fnClick, false);
可以附加多个处理函数。
removeEventListener()方法：移除事件处理函数
三、事件对象
包含三个方面的信息：
1、引起事件的对象：IE中就是window.event，DOM中是处理函数的为唯一参数；
2、事件发生时的鼠标信息；
3、事件发生时的键盘信息。
IE事件对象
在IE中，事件对象是window对象的一个属性event。也就是说，事件处理函数必须这样访问事件对象：
oDiv.onclick = function() { var oEvent = window.event; }oDiv.onclick = function(){ var oEvent = window.event;}
尽管是window对象的属性，event对象还是只能在事件发生时访问。所有的事件处理函数执行完毕后销毁。
DOM标准的事件对象
event对象必须作为唯一的参数传给事件处理函数。所以，在DOM兼容的浏览器(如Mozilla，Safari和Opera)中访问事件对象，要这么做：
oDiv.onclick = function() {
var oEvent = arguments[0];
}
//也可以这样
oDiv.onclick = function(oEvent) {
//.....
}

赞 (0)

相关推荐

  • javascript学习笔记(十五) js间歇调用和超时调用

    1.超时调用setTimeout() setTimeout() 方法接受两个参数,第一个参数是函数,第二个参数是时间(单位微秒),返回数值ID 复制代码 代码如下: setTimeout( function () { alert("你好!"); },1000); 调用前取消clearTimeout(),接受一个参数超时调用ID 复制代码 代码如下: var timeOutId = setTimeout( function () { alert("你好!"); },1

  • javascript学习笔记（五）原型和原型链详解

    javascript学习笔记（五）原型和原型链详解

    私有变量和函数 在函数内部定义的变量和函数,如果不对外提供接口,外部是无法访问到的,也就是该函数的私有的变量和函数. 复制代码 代码如下: <script type="text/javascript">     function Test(){         var color = "blue";//私有变量         var fn = function() //私有函数         { }     } </script> 这样在

  • javascript学习笔记（五）正则表达式

    常用到的元字符有: •. 查找单个字符,除了换行和行结束符: •\w 匹配字母.汉字.数字.下划线等符号: •\s 匹配空白符(包含空格.制表符等): •\d 匹配数字: •\b 匹配位于单词的开头或结尾的匹配: 常用的量词有: •^n 匹配任何开头为 n 的字符串: •n$ 匹配任何结尾为 n 的字符串: •n+ 匹配任何包含至少一个 n 的字符串: •n* 匹配任何包含零个或多个 n 的字符串: •n? 匹配任何包含零个或一个 n 的字符串: •n{X} 匹配包含 X 个 n 的序列的字符串

  • javascript学习笔记(十九) 节点的操作实现代码

    本节要用到的html例子 复制代码 代码如下: <ul id="myList"> <li>项目一</li> <li>项目二</li> <li>项目三</li> </ul> 1.创建元素节点 document.createElement() 方法 用于创建元素,接受一个参数,即要创建元素的标签名,返回创建的元素节点 复制代码 代码如下: var div = document.createEle

  • JavaScript 学习笔记（五）

    本地对象 ①Array类 ②Date类 对象的类型 内置对象 ①Global对象 ②Math对象 宿主对象 今天继续学习JS中的对象,昨天内置对象Global对象和Math对象,今天继续. 宿主对象 所有非本地对象都是宿主对象host object,即由ECMAScript实现的宿主环境提供的对象.所有BOM和DOM对象都是宿主对象,书上说将在后面的章节讨论.-_-||| 作用域 JS中只存在一种作用域----公用作用域,所有对象的所有属性和方法是公用的.许多开发者都在网上提出了有效的属性作用域

  • javascript学习笔记(十四) window对象使用介绍

    1.窗口位置 以下取得浏览器窗口距屏幕左边和上边的位置 复制代码 代码如下: var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX; //左边位置 var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY; //上边位置 2.浏

  • javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)

    1.警告框alert() 复制代码 代码如下: alert("欢迎光临!"); 2.信息框confirm(),有取消,确定按钮 复制代码 代码如下: if (confirm("你同意吗?")) { alert("同意"); } else { alert("不同意"); } 3.提示框prompt(),用于提示用户输入一些文本 复制代码 代码如下: var result = prompt("您尊姓大名?",&

  • javascript学习笔记(十八) 获得页面中的元素代码

    javascript学习笔记(十八) 获得页面中的元素代码

    1.获取元素 getElementById()方法,通过元素的id获取元素,接受一个参数即要获取元素的id,如果不存在这个id返回 null 注意不要让表单元素的name和别的元素的id相同,IE8以下的IE浏览器用这个方法通过元素的name属性可以获得该元素 以下面元素为例 <div id ="myDiv">这里是id为"myDiv"的div内容</div>var document.getElementById("myDiv&qu

  • javascript学习笔记(十二) RegExp类型介绍

    1.匹配模式标记: g ------ 表示全局模式,而不是发现第一个匹配成功就立刻结束 i ------- 表示不区分大小写模式 m ----- 表示多行匹配,一行结束时向下一行继续匹配 复制代码 代码如下: //匹配第一个bat 或cat,不区分大小写 var pattern1 = /[bc]at/i var pattern2 = new RegExp("[bc]at","i"); //同上 使用RegEXp是字面量模式要转换成字符串 /\[bc\]at/ ===

  • javascript学习笔记(十) js对象 继承

    1.原型链 //很少单独使用 复制代码 代码如下: View Code //定义 SuperClass类,有一个属性property和一个方法getSuperValue function SuperClass() { this.property = true; } SuperClass.prototype.getSuperValue = function() { return this.property; } //定义SubClass类,有一个属性subproperty和后来添加的一个方法get

随机推荐