javascript中的cookie,以及事件解析

Cookie:

它的意思是在本地的客户端的磁盘上以很小的文件形式保存数据,Cookie的处理原则上需要在服务器环境下运行,目前Chrome不可以在客户端操作Cookie,其他浏览器均可以,

 

Cookie的组成:它是由名/值对形式的文本组成:name=value.它的完整格式为;

name=value;[expires=date];[path=path];[domain=somewhere.com];[secure]

中括号是可选,name=value是必选的,

document.cookie = 'user='+encodeURIComponent('lal');//编码写入

alert(decodeURIComponent(document.cookie)); //编码解读

expires=date//失效时间,如果没有写,则为浏览器关闭后即失效,

 

对于COokie,单纯的用JavaScript来设置,读取和删除不是特别的直观方便,我们可以封装成函数来方便调用,

//创建cookie

function setCookie(name,value,expires,path,domain,secure){

var cookeText=encodeURIComponent(name)+"="+encodeURIComponent(value);

if(expires instanceof Date){

cookieText+=';expires='+expires;

}

if(path){

cookieText+=';path='+path;

}

if(domain){

cookieText+=';domain='+domain;

}

if(secure){

cookieText+=';secure='+secure;

}

document.cookie=cookieText;

}

//获取cookie

function getCookie(name){

var cookieName = encodeURIComponent(name)+''=';

var cookiestart = document.cookie.indexOf(cookieName);

var cookieValue = null;

}

if(cookieStart>-1){

var cookieEnd = document.cookie.indexOf(',',cookieStart);

if(cookieEnd == -1){

cookieEnd = document.cookie.length;

}

cookieValue = decodeURIComponent{

document.cookie.substring(cookieStart + cookieName.length,cookieEnd)

}

return cookieValue;

}

//删除cookie

function unsetCookie(name){

document.cookie = name +'=;expires='+newDate(0);

}

 

cookie虽然在持久保存客户端用户数据提供了方便,分担了服务器存储的负担,但是还是由很多局限性的,

第一,每个特定的域名下最多生成20个cookie,

第二,cookie的最大存储约为4096字节,为了兼容性,一般都不超过4095个字节

第三,cookie存储在客户端的文本文件,所以特别重要的和敏感的数据时不建议保存在cookie的.

 

事件:

JavaScript有三种事件模型:内联模型,脚本模型和DOM2模型

内联模型:这是最传统表单的一种处理事件的额方法,

脚本模型:由于内联模型违反了HTML与JavaScript代码层次分离的原则,为了解决这个问题,我们可以在JavaScript中处理事件,这种处理方式就是脚本模型,

var input = document.getElementByTagName('input')[0];

input.onclick = function(){

alert('lee');

}//这种在JavaScript脚本中执行的方式就是脚本模型.

事件处理函数:

//onabort:图像加载过程中去中断加载.

//onblur :焦点改变时触发该函数,

//ondblclick:双击时触发的事件.

//onchange当改变一个元素的值且失去焦点时.

//ondragdrop:当用户将一个对象拖放到浏览器窗口时

//onerror:当图像或文档加载失败出现错误时触发该事件.

//onfocus:当获得焦点时触发的事件.

//onkeydown,onkeyup,onkeypress:

//onmouseout:当鼠标移除区域时,

//onmouseOver:当鼠标进入目标区域时.

//onmousemove:当鼠标在目标区域移动时,

//onmove当浏览器窗口移动时,

//onreset点击的时候清空表单的内容.表单复位按钮.

//onresize:当窗口大小发生改变的时候会调用这种方法.

//onselect:当选择一个表单对象时

//onsubmit:当发送表格到服务器时.

对于每一个时间,他都有自己的触发范围和方式,如果超出了触发范围和方式,事件处理就将失效

1,鼠标事件,页面所有元素都可以触发:其中有 click,dblclick,mousedown,mouseup,mouseover,mouseout,mousemove,z这些事件,

2,键盘事件,keydown当用户按下键盘上任意键触发,如果按住不放,会重复触发,

keypress当用户按下键盘上的字符触发,如果按住不放,会重复触发

keyup当用户释放键盘上的键时触发.

 

3,HTML事件:

load:当页面完全加载后再window上面触发,或当框架集加载完毕后再框架集上触发,

unload:当页面完全卸载后再window上面触发,或当框架集卸载后再框架集上触发,

select:当用户选择文本框(input或textarea)中的一个或多个字符触发,

change事件,blur事件,submit事件,reset事件,resize事件,scroll事件

事件对象

JavaScript事件的一个重要方面是他们拥有一些相对一致的特点,最方便和强大的就是事件对象,他们可以帮你处理鼠标事件和键盘敲击方面的情况,

事件处理有三部分组成:对象,事件处理函数=函数.例如:当即文档任意处:

document.onclick = function(){

alert('lle');

}

以上程序中,click表示一个事件类型,单击.而onclick表示一个事件处理函数或绑定对象的属性(或者叫事件监听器,侦听器).document表示一个绑定的对象,用于触发某个元素的区域.function()匿名函数是被执行的函数,用于触发后执行.

除了用匿名函数的方法,也可以设置成独立的函数.

document.onclick = box;

function box(){

alert('Lee');

}

this关键字和上下文:

在之前我们已经知道,this代表着离他最近的对象.

var input document.getElementByTagName('input')[0];

input.onclick = function(){

alert(this.value); //HTMLinputElement,this表示input对象

}

当触发某个事件时,会产生一个事件对象,这个对象包含着所有与对象有关的信息.包括导致时间的元素,事件的类型,以及其他与特定事件相关的信息,事件对象,我们一般称作为event对象,这个对象是浏览器通过函数传递过来的,直接通过接受参数就可以直接拿到这个对象,

input.onclick=function(evt){

var e = evt||window.event;//shixi按跨浏览器兼容获取event对象,

}

 

鼠标事件:通过鼠标事件可以获取到鼠标按钮信息和屏幕坐标信息等,

事件对象提供了两组来获取浏览器坐标 的属性,一组是页面可视区左边,一组是屏幕坐标,

clientX:可视区X坐标,距离左边框的位置,

clientY:可视区Y坐标,距离上边框的位置

screenX:屏幕区X坐标,距离左屏幕的距离.是整个屏幕,

screenY:屏幕区Y坐标,距离上屏幕的距离,

pageX,距离整个页面内容的左边的位置,

pageY,距离真个页面内容的上边的位置.

 

键盘事件:用户在使用键盘时会触发键盘事件,

键码:在发生keydown和keyup 事件时,event对象的keyCode属性中会包含一个代码,与键盘上的一个特定的键对应,

分歧:在火狐和欧朋中,分号键的keyCode值为59,也就是ASCII中分号的编码,而IE和Safari中返回186,即为键盘中按键的键码.可以使用StringfromCharCode()来将编码来转换为特定的字符,

keyCode和charCode的区别如下:比如当按着a键时,在火狐中会获得:

keydown: keycode is 65 charcode is 0

keyup: keycode is 65 charcode is 0

keypress: keycode is 97 charcode is 97

注:火狐中keycode都是大写,charCode是小写.在IE中charcode这个属性不存在,keypress默认是大写.

event对象包含的属性和方法:

bubbles 表明事件是否冒泡

cancelable 表明是否可以取消事件的默认行为

currentTarget 事件chu里程序当前正在处理事件的那个元素,

eventPhase:调用事件处理程序的阶段:1表示捕获阶段,2表示处理目标,3表示冒泡阶段

preventDefault取消事件的默认行为,如果是cancelable是true,就可以使用这个方法,

stopPropagation 取消事件的进一步捕获或冒泡,如果bubbles为true,则可以使用这个方法,

target:表示当前事件的目标,

type:表示被触发事件的类型,

view:与事件关联的抽象视图,等同于发生事件的window对象

 

事件流:

是描述的从页面接受事件的顺序,当几个都具有事件的元素层叠在一起的时候,那么你点击其中的一个元素,并不是只有当前被点击的元素会触发事件,而层叠在你点击范围的所有元素都会触发事件,事件流包括两种模式,冒泡和捕获.

事件冒泡,是从里往外逐个触发,事件捕获,是从外往里逐个触发,那么现代的浏览器默认情况下都是冒泡模型,

 

事件绑定及深入:

"DOM2级事件"定义了两个方法,用于添加和删除事件处理程序的操作:addEventListener()和removeEventListener(),所有的DOM节点都包含这两个方法,并且他们都接受三个参数:事件名,函数,冒泡或捕获的布尔值,(true表示捕获,false表示冒泡).这种绑定比我们自定义的好处就是:1,不需要自定义了,2,可以屏蔽相同的函数,3,可以设置冒泡和捕获:

IE事件处理函数:IE实现了与DOM中类似的两个方法,attachEvent()和detachEvent(),但俩个函数的弊端也是十分明显的:1,不支持捕获,只支持冒泡,2,IE添加事件不能屏蔽重复的函数,IE中的this指向的是window而不是DOM对象,在传统事件上,IE是无法接受到event对象的,但使用了attachEvent()却可以,这是有些区别的.

事件对象的其他补充:

relatedTarget:这个属性可以在mouseover和mouseout事件中获取从哪里移入和从哪里移除的DOM对象.