十月十五日课堂笔记
事件模型
事件是一种异步编程的实现方式。本质上程序各个组成部分之间的通信。DOM支持大量的事件。
1. EventTarget接口
DOM的事件操作（监听和触发），都定义在EventTarget接口上。Element节点、document节点和window对象，都部署了这个接口。
该接口有三个重要的方法：
addEventListener：绑定事件的监听函数
removeEventListener：移除事件的监听函数
dispatchEvent：触发事件
addEventListener
该方法用于在当前节点或对象上，定义一个特定时间的监听函数
示例// 语法：target.addEventListener(type,listenerFunc,false);window.addEventListener("load", function(){alert("hello listener");
});document.getElementById("btn2").addEventListener("click",function(){alert("hello, button");
});type：事件的名称，大小写敏感
listenerFunc：监听函数，事件发生时，会调用这个函数
removeEventListener()
移除addEventListener方法添加的事件监听函数
var btn2Click = function() {alert("hello, button");
};document.getElementById("btn2").addEventListener("click", btn2Click);document.getElementById("btn3").addEventListener("click",function(){document.getElementById("btn2").removeEventListener("click",btn2Click);
});dispatchEvent()：一般不怎么使用
2.监听函数
监听函数是事件发生时，程序所要执行的函数。它是事件驱动编程模式的主要编程方式。
在DOM中提供三种方法为事件绑定监听函数。
HTML标签的on-属性
HTML语言允许在元素标签的属性中，直接定义某些事件的监听代码。
<body onload="alert('hello');alert('world');">
body>Element节点的事件属性
Element节点对象有事件属性，同样可以指定监听函数。
var btn4Func = function() {alert("hello");
};document.getElementById("btn4").onclick = btn4Func;addEventListener方法
3.事件的种类
鼠标事件
鼠标事件是指与鼠标操作相关的事件
click事件、dblclick事件
mouseup事件（释放按下鼠标时触发）、mousedown事件（按下鼠标键时触发）、mousemove事件（鼠标在某个节点内部移动时触发）
mouseover事件、mouseenter事件都是鼠标进入一个节点时触发，区别是mouseenter只执行一次，而mouseover会在子节点上触发多次。
document.getElementById(“ul1”).addEventListener(“mouseenter”, function(event){
event.target.style.color = “red”;
});
mouseout事件、mouseleave事件都是鼠标离开节点时触发，mouseout事件会冒泡，mouseleave事件不会。
contextmenu事件（节点上点击鼠标右键时触发或者按下上下文菜单键时触发）
事件冒泡和捕获
事件流包含三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，然后是实际的目标接收到事件，最后阶段是冒泡阶段
"myDiv">
var div=document.getElementById("myDiv"); console.log(div); div.onclick=function(event){alert("div");};document.body.addEventListener("click",function(event){alert("event bubble");},false);document.body.addEventListener("click",function(event){alert("event catch");},true); 面向对象编程中的 this
1.this在对象中的运用
this 关键字是个非常重要的语法点，在 javascript 编程中如果对 this 不能理解，大部分的编程任务是无法完成的。
this 返回的是一个对象，简单的说就是返回属性或者方法当前所在的对象。
this.property，在这个代码中，this就是指property属性所在的对象
var person = {name : "Tom",description: function() {return "name:" + this.name;}
};
console.log(person.description()); // name:Tom上面代码中，this.name表示 descriptioin 方法所在的对象的name属性。调用person.description（）方法时，descriptioin 方法所有在当前对象是 person，所有就是调用person.name。
var f = function() {console.log("name:" + this.name);
}var p1 = {name : "Tom",desc : f
};
var p2 = {name : "Jack",desc : f
};
p1.desc(); // name:Tom
p2.desc(); // name:Jack在上面的代码中，f函数中使用了this关键字，随着f所在的对象不同，this的指向也不同。
2.this在网页编程中的运用
"button" value="删除" onclick="delLine(this)" />function delLine(obj){var trNode = obj.parentNode.parentNode;trNode.parentNode.removeChild(trNode);}3.this在函数中的运用
列子1
this 的指向在函数定义的时候是确定不了的，只有函数执行的时候才能去确定this到底指向谁，实际上this最终指向的是调用它的对象。
function a(){var user = 'javascript';lg(this.user);//undifinedlg(this);//Window}a();//window.a();alert 实际上也是window的对象。
列子2
var o = {user:'javascript',fn:function(){lg(this.user);lg(this);}}o.fn();window.o.fn();wondow是JS中的全局对象，我们创建变量实际上是给window对象添加属性。
列子3
var o = {a:10,b:{a:12,fn:function(){lg(this.a);lg(this);}}}// window.o.b.fn();var j = o.b.fn;j();最终是window调用的fn方法。
Web Storage
Storage接口用于在浏览器客户端中存储用户自定义的信息。
有几种存储形式：
LocalStorage：永久的存储在浏览器中，但是要注意，在不同的浏览器中间数据是不能共享的。
SessionStorage：当前页面会话基本的存储，当浏览器关闭或页面关闭时，数据就会丢失。
GlobalStorage:HTML5中被localStorage代替。
为了能访问到同一个localStorage对象，页面必须来自同一个域名，使用同一种协议，在同一个端口上。
我们只介绍localStorage的相关用法。
1.LocalStorage接口的方法
localStorage.setItem(key,value)：用于将key-value键值对的方式插入localStorage中。
localStorage.getItem(key)：读取key的localStorage字符串值。
localStorage.removeItem(key)：删除localStorage中key。
localStorage.clear()：清空localStorage所有key。
需要注意的是：在localStorage中只能存储字符串类型的数据。
key():在指定的数字位置获取该位置的名字.
//使用方法来存储数据localStorage.setItem('name','Bizzbee');//用属性设值localStorage.username = "bizzbee";console.log(localStorage);console.log(localStorage.getItem('username'));console.log(localStorage.name);本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！