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对象.
