js事件

一、焦点事件

焦点：使浏览器能够区分用户输入的对象，当一个元素有焦点的时候，那么他就可以接收用户的输入

设置焦点方式：点击、tab、js

onfocus:当元素获取到焦点的时候触发

onblur:当元素失去焦点的时候触发

obj.focus();给指定的元素设置焦点

obj.blur();取消指定元素的焦点

obj.select();选择制定元素里面的文本内容（用户输入的内容，可以操作可交互性元素的内容，例如P，div内的内容是无法全选的）

 

oText.onfocus=function(){

　　if(this.value=="请输入内容"){

　　　　this.value="";

　　}

}

oText.onblur=function(){

　　if(this.value==""){

　　　　this.value="请输入内容";

　　}

}

二、event事件对象

定义：当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细信息都会被临时保存到一直指定地方——event对象，供我们在需要的时候调用

事件函数：事件调用的函数，一个函数是不是事件函数，不在定义的时候决定，而是取决于这个函数调用的时候

ie/chrome:event是内置全局对象

标准下:事件对象是通过事件函数的第一个参数传入

如果一个函数是被事件调用的，那么 这个函数定义的第一个参数就是事件对象

 

兼容处理：vav ev=ev||event; 

 

clientX:当一个事件发生的时候，鼠标到页面可视区的距离

clientY:当一个事件发生的时候，鼠标到页面可视区的顶部距离

 

onmousemove:当鼠标在一个元素上面移动的时候触发

触发的频率不是像素，而是间隔时间，在一个指定的时间内（很短），如果鼠标的位置和上一次的位置发生了变化，那么就会触发一次

三、事件流

1、事件冒泡：当一个元素接收到事件，会吧他接收到的所有传播给他的父级

　  阻止冒泡：当前要阻止冒泡的事件函数中调用event.cancelBubble=true;

2、时间捕获：当一个元素接收到事件

　 　  

3、事件绑定

（1）给一个对象绑定一个事件处理函数：obj.onclick=fn;　　　　会覆盖前面绑定的函数，属于赋值形式

（2）给一个对象的同一个事件绑定多个不同的函数：

ie:obj.attachEvent(事件名称，事件函数)             document.attachEvent("onclick",fn1);

• • 没有捕获
  • 事件名称有on
  • 事件函数执行的顺序：标准ie——正序      非标准ie——倒序
  • this指向window

标准：obj.addEventListener(事件名称，事件函数，是否捕获)        document.addEventListener("click",fn2)      //默认是false  false:冒泡   true：捕获

 

• • 有捕获
  • 事件名称没有有on
  • 事件函数执行的顺序：正序
  • this指向触发该事件的对象

call()函数下的一个方法，call方法的第一个参数可以改变函数执行过程中的内部this的执行

调用函数：fn1()=fn1.call();

4、取消事件绑定

（1）第一种事件绑定取消方法：document.onclick=null;

（2）第二种事件绑定取消方法：

ie:obj.detachEvent(事件名称，事件函数)；

标准：obj.removeEventListener(事件名称，事件函数，是否捕获);

四、键盘事件

 

 1、onkeydown:当键盘按键按下的时候触发，如果按下不抬起，那么会连续触发

     onkeyup:当键盘按键抬起的时候触发

2、event.keyCode:数字类型  键盘按键的值  键值

    ctrlKey,shiftKey,altKey  布尔值

    当一个事件发生的时候，如果ctrl||shift||alt是按下的状态，返回true

    不是所有元素都能够接收键盘事件，能够响应用户输入的元素，能够接收焦点的元素就能够接收键盘事件

3、如何取消连续输入时间间隔

五、事件默认行为

1、定义：当一个事件发生的时候，浏览器自己会默认做得事情

2、如何阻止？

（1）当前这个行为是什么事件触发的，然后在这个事件处理函数中使用return false;

（2）oncontextmenu:右键菜单事件，当右键菜单（环境菜单）显示处理的时候触发

六、拖拽事件

1、setCapture   //设置全局捕获，当我们给一个元素设置全局捕获以后，那么这个元素就会监听后续发生的所有事件，当有事件发生的时候，就会被当前设置了全局捕获的元素所触发

ie:有,并且有效果

ff:有，但是没有效果

chrome:没有

 

释放全局捕获：releaseCapture

七、鼠标滚轮

ie/chrome : onmousewheel
event.wheelDelta（数字类型的值）
上：120
下：-120

firefox : DOMMouseScroll 必须用addEventListener
event.detail（数字类型的值）
上：-3
下：3

return false阻止的是 obj.on事件名称=fn 所触发的默认行为
addEventListener绑定的事件需要通过event下面的preventDefault();

八、cookie存储数据

定义：当用户访问某个网站（网页）的时候，我们可以通过cookie来像访问者电脑上存储数据

1、不同的浏览器存放cookie的位置不一样，也是不能通用的

2、cookie的存储是以域名形式进行区分的

3、cookie的数据可以设置名字的  document.cookie=“名字=值”——可读可写的属性

4、一个域名下存放的cookie的个数是有限制的，不同的浏览器存放的个数不一样

5、每个cookie存放的内容大小也是有限制的，不同的浏览器存放的大小不一样

 

我们通过document.cookie来获取当前网站下的cookie的时候，得到的字符串形式的值，他包含了当前网站下所有的cookie，他会把所有的cookie通过一个分号+空格的形式串联起来

 

var oDate=new Date();

oDate.setDate(oDate.getDate()+5);

oDate.toGMTSring();
如果我们想长时间存放一个cookie。需要在设置这个cookie的时候同时给他设置一个过期的时间：document.cookie = '名称=值;expires=' + 字符串格式的时间;

 

cookie默认是临时存储的，当浏览器关闭进程的时候自动撤销

 

内容最好编码存放，encodeURI，解码读取：decodeURI

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有