bom event周期_BOM&Event

BOM

BOM：Browser Object Model，定义了一些JS操作浏览器的方法。

`windows.open('url','_self||_bank');`//打开一个新的页面。

(url为空默认是新的空白页面,打开方式为空默认打开一个新的页面)。~全为空就是用在新窗口页面打开一个空白页面~

返回值：返回新打开的窗口的`window`对象

opener=window.open('http://www.baidu.com');//不单单是赋值，也会去执行

alert(opener ===window);//false

opener.document.body.style.backgroundColor = 'red';//如果打开的是另外一个域名的网站就会涉及到跨域的问题，会禁止去修改。

//close方法

var getInput = document.getElementsByTagName('input');

var opener = null;

getInput[0].addEventListener('click',function(){

opener = window.open();

});

getInput[1].addEventListener('click',function(){

opener.close()

});

getInput[2].addEventListener('click',function(){

window.close()

});

浏览器大部分属性是在window下的。window代表的是窗口

在JS定义中，如果前面是window可以省略不写

//window.close();

//在本窗口打开新打开的窗口

opener = window.open();

window.close();

//获得浏览器信息

console.log(window.navigator.userAgent);

document.write(window.navigator.userAgent);

if(window.navigator.userAgent.indexOf('MSIE')!=-1){

alert('我是IE');

}else{

alert('我是正规浏览器');

}

//window.location是一个对象

console.log(window.location+'
');

console.log(window.location.href+'
');//与loation相同

console.log(window.location.search+'
');//显示？号后面的

console.log(window.location.hash+'
');//显示#号后面的

2-文档宽高及窗口事件

//clientWidth可视区的宽

//clientWidth可视区的高

//document是一个文档对象，没有尺寸。documentElement是文档元素，有尺寸

document.write('Document的宽是'+document.documentElement.clientWidth);

//滚动条滚动距离

//在chrome里认为滚动条是属于body的

alert(document.documentElement.scrollTop||scrollLeft);

alert(document.body.scrollTop||scrollLeft);//在chrome里面

//兼容处理

var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

varurr =0||1;//0是会隐士转换为false

//元素的内容高于内容宽。内容高：实际上内容显示的高度，溢出的内容块也计算在内。

alert('div1的内容高是'+getDiv1.scrollHeight);

alert('div1的内容宽是'+getDiv1.scrollWidth);

//文档高与文档宽：offsetWidth||offsetHeight。

//在IE中[IE10-]，认为文档高与可视区的高是一样的

alert('文档高是'+getDiv1.offsetHeight);

alert('内容高是'+getDiv1.offsetWidth);

body个margin值是8px

//BOM[window]对象下的两个事件

//触发事件的单位是时间

window.onscroll//当页面滚动的时候触发

window.onresize//当页面大小发生滚动的时候触发

焦点事件

//焦点：浏览器能够区分用户的操作。

//只有能够响应用户操作的才有焦点

/*一般焦点设置的几种方式

1.click

2.table

3.js

*/

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

getInput.onfocus = function(){

if(this.value=='请输入文字'){

this.value = '';

}

}

//失去焦点事件

getInput.onblur = function(){

if(this.value==''){

this.value = '请输入文字';

}

}

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

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

obj.select();//选中指定元素的文本内容。chrome FF 是不允许直接操作用户的鼠标.能选中的只能是用户输入的内容

event事件对象和clientX,clientY

//evnet:事件对象:当一个事件发生之时，事件详细信息被临时保存到的集合

//IE，chrome有一个内置全局对象，

//FF 等标准浏览器event被保存在事件函数的第一个参数。[事件函数：事件发生调用的函数]

function fn1(ev){//兼容解决办法

var ev = ev||event;//非标准对象第一个返回false

}

clientX||clientY:当一个事件发生的时候，鼠标相对于页面可视区的距离

document.onmousemove = function(ev){

var ev = ev||event;

var T = document.documentElement.scrollTop||document.body.scrollTop;

var L = document.documentElement.scrollLeft||document.body.scrollLeft;

document.title = i++;

getDiv.style.left = L+ev.clientX+'px';

getDiv.style.top = T+ev.clientY+'px';

}

事件流，事件冒泡机制

//冒泡:当一个元素接收到事件的时候，会把他接收到的事件传播给他的父级[的父级...]

//正确的解释是给元素添加事件处理函数

//类比：我在马路边捡到一分钱，交给警察叔叔。钱没有交给警察叔叔，钱也是捡到了。

//事件冒泡的机制是默认是存在的

//这样就会出现问题

input.onclick = function(){

div.style.display = 'block';

};

document.onclick = function(){

div.style.display = 'none';

}

//阻止冒泡：在阻止冒泡的事件函数中调用 ev.cancelBubble = true;

//阻止冒泡[add调用事件]：在阻止冒泡的事件函数中调用 ev.stopPropagation();

//只能单独去阻止事件。//阻止click，不回去阻止onmouseover

事件绑定的第二种形式

//事件捕获必须在事件绑定的第二种方式

obj.onclick //是赋值的形式，会覆盖掉

obj.addEventListener();//可以避免掉赋值的问题

//在IE下，这两个的执行顺序在IE下是不一样的。

div1.attachEvent('onclick',function(){//没有捕获参数

alert('hello world');

});//使用this，弹出的是window

//标准下

div.addEventListener('click',fn,是否捕获[默认是false冒泡,true是捕获]);

div1.attachEvent

1.没有捕获

2.时间名称有on

3.函数执行的顺序：标准->正序；非标准->倒序

4.this指向window

div.addEventListener('click',function(){});

1.有捕获

2.事件名称没有on

3.事件函数执行顺序正常

4.this正常

function fn1(a,b){

alert(this);

alert(a+b);

}

//调用call的同时，可以去传参.并且this指向参数。

//fn(); === fn1.call();

//一般使用call是用来改变函数里的this的指向问题

//call();//第二个参数开始就是原函数的参数列表

//如果call();第一个参数是空，是不改变this指向，this会指向原本应该改变的this

fn1.call(1,2,3);

function fn1(){

alert(this);

}

function fn2(){

alert(1);

}

//两个添加事件函数的兼容模式

function bind(obj,evName,fn){

if(obj.addEventListener){

obj.addEventListener(evName,fn,false);

}else{

obj.attachEvent('on'+evName,function(){

fn.call(obj);

});

}

}

bind(document,'click',fn1);

bind(document,'click',fn2);

//兼容方式

事件捕获

//先从外面到里面[捕获]，再从里面倒外面[冒泡]。

事件的取消

//有两种方法

//onclick 通过赋值为其他值。[不要改变变量类型，null赋给点击事件]

obj.onclick = function;

//IE:时间名称和函数与注册要一一致。

//obj.attachEvent('onclick',fn1);

obj.detachEvent('onclick',fn1);

//标准：(事件，事件函数,类型)

div1.removeEventListener('click',function(){},false);

键盘事件

//onkeydown 与onkeyup

要知道事件发生的细节需要用到event对象

event.keyCode返回的是ascii码

ctrlKey shifrtKey altKey //boolean

enter keyCode = 13;

//不是所有元素都能够接收键盘事件，是能够相应用湖输入的元素

//document可以接收焦点。焦点是在默认文档上

//onkeydown 按下不抬起会连续触发，但是会有一个延迟时间

/*

* 38

* 37 40 39

* */

//按下不抬起会连续触发,解决办法是设置定时器。

var getDiv = document.getElementById('div1');

document.onkeydown = function(ev){

var ev = ev||event;

switch (ev.keyCode){

case 37:

getDiv.style.left = getDiv.offsetLeft -10 +'px';

break;

case 38:

getDiv.style.top = getDiv.offsetTop -10 +'px';

break;

case 39:

getDiv.style.left = getDiv.offsetLeft +10 +'px';

break;

case 40:

getDiv.style.top = getDiv.offsetTop +10 +'px';

break;

}

}

//解决延时。抬起是清除事件

var oDiv = document.getElementsByTagName('div')[0];

var timer = null;

document.onkeydown = function(ev){

clearInterval(timer);

var ev = ev||event;

timer = setInterval(function(){

switch (ev.keyCode){

case 37:

oDiv.style.left = oDiv.offsetLeft - 10 + 'px';

break;

case 38:

oDiv.style.top = oDiv.offsetTop - 10 + 'px';

break;

case 39:

oDiv.style.left = oDiv.offsetLeft + 10 + 'px';

break;

case 40:

oDiv.style.top = oDiv.offsetTop + 10 + 'px';

break;

}

},10);

}

document.onkeyup = function(){

clearInterval(timer);

}

事件默认行为-默认事件

//事件发生的时候，浏览器默认运行的行为。

阻止事件行为：在事件处理函数中添加return false;

document.oncontextmenu //右键环境菜单

//模拟右键菜单

var getDiv = document.getElementsByTagName('div')[0];

document.oncontextmenu = function(ev){

var ev = ev||event;

getDiv.style.display = 'block';

getDiv.style.left =ev.clientX +'px';

getDiv.style.top =ev.clientY +'px';

return false;

}

document.onclick = function(){

getDiv.style.display = 'none';

}

拖拽的原理

/*

* 由三大事件组成

* onmousedown选中元素

* onmousemove拖拽元素.有间隔时间

* onmouseup释放元素

* */

var getDiv = document.getElementsByTagName('div')[0];

getDiv.onmousedown = function(ev){

var ev = ev||event;

var disX = ev.clientX - this.offsetLeft;

var disY = ev.clientY - this.offsetTop;

document.onmousemove = function(ev){

var ev = ev||event;

getDiv.style.left = ev.clientX - disX +'px';

getDiv.style.top = ev.clientY - disY +'px';

}

document.onmouseup = function(){

document.onmousemove =document.οnmοuseup=null;

}

}

拖拽的问题以及解决办法

/*

* 拖拽的时候，有文字被选中，会产生问题

*

* 原因：鼠标按下的时候，如果页面有文字被选中，会触发浏览器的默认拖拽文字的效果

* |

* V

* 是 onmousedown 的默认效果->标准浏览器:return false;

*

* */

/*

*

* IE:全局捕获.:打劫事件，没有被分享，而是被抢过去了。

*

* FF：有但不执行

*

* Ch：没有

*

* 当给一个元素设置全局捕获以后，那就元素监听以后发生的所有事件。当事件发生的时候，就会被当前设置全局捕获的元素所触发。

*

* */

var getDiv = document.getElementsByTagName('div')[0];

getDiv.onmousedown = function (ev) {

var ev = ev || event;

var disX = ev.clientX - this.offsetLeft;

var disY = ev.clientY - this.offsetTop;

if(getDiv.setCapture){

getDiv.setCapture();

}

document.onmousemove = function (ev) {

var ev = ev || event;

getDiv.style.left = ev.clientX - disX + 'px';

getDiv.style.top = ev.clientY - disY + 'px';

}

document.onmouseup = function () {

//释放全局捕获

if(getDiv.releaseCapture){

getDiv.releaseCapture();

}

document.onmousemove = document.onmouseup = null;

}

return false;

}

拖拽的封装

function drag(obj){

obj.onmousedown = function (ev) {

var ev = ev || event;

var disX = ev.clientX - this.offsetLeft;

var disY = ev.clientY - this.offsetTop;

if ( obj.setCapture ) {

obj.setCapture();

}

document.onmousemove = function (ev) {

var ev = ev || event;

var L = ev.clientX - disX;

var T = ev.clientY -disY;

if(L<0){

L=0;

}else if(L>document.documentElement.clientWidth-obj.offsetWidth){

//文档元素的宽度减去元素自身的宽度

L = document.documentElement.clientWidth-obj.offsetWidth;

}

if(T<0){

T=0;

}else if(T>document.documentElement.clientHeight-obj.offsetTop){

//文档元素的宽度减去元素自身的宽度

T = document.documentElement.clientHeight-obj.offsetHeight;

}

obj.style.left =L + 'px';

obj.style.top = T + 'px';

}

document.onmouseup = function () {

document.onmousemove = document.onmouseup = null;

if ( obj.releaseCapture ) {

obj.releaseCapture();

}

}

return false;

}

}

碰撞检测

使用排除法

拖拽改变层大小

滚动条的模拟和扩展运用

鼠标滚轮

//在chrome与ie中，事件是 onmousewheel

//FF不执行，会当作添加的一个自定义属性。

oDiv.onmousewheel = function(){

alert('hello');

};

oDiv.addEventListener('DOMMouseScroll',function(){//FF必须使用时间的第二种绑定形式。第二种绑定形式有兼容性问题。绑定一个不存在的事件不会有问题

alert('firefox');

}，false);

//direction

// chrome&&IE

alert(ev.wheelDelta); //上+，下-

// FF

alert(ev.detail);//上-，下+；在其他浏览器上存在这个属性，显示值是为0

//和运算符优先级有关系

dec = ev.wheelDelta>0?true:false;

//阻止事件默认行为，阻止的是第一种绑定事件行为

return false;

//addEventListener

ev.preventDefault();

//attachEvent 使用的还是return false;

cookie

/*

*

* cookie 存储数据 //可以长时间存放数据

*

* 变量只能在开启浏览器中存在

*

* 1.不同浏览器 存放cookie位置不一样，不能够通用

* 2.cookie的存储是以域名进行区分

* 3. cookie的数据可以设置名字

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

* 5.每个cookie存放的内容大小存在限制，不同浏览器存放大小限制不同

* */

//一些浏览器不允许本地操作cookie

//我们通过document.cookie来获取当前网站下的cookie的时候，得到的是字符串形式的值，它包含了当前网站下所有的cookie

// 如果想长时间存放一个cookie，需要在设置cookie的时候，设置过期时间，时间过期，会自动销毁。cookie默认是临时存储。关闭浏览器进程，自动销毁。

//过期后面跟上的是时间，时间必须得是日期对象字符串形式[字符串格式的时间]

var oDate = new Date();

oDate.setDate(oDate.getDate()+5);//设置一个月的某一天

console.log(oDate);

console.log( typeof oDate.toGMTString());//提供的一个方法,可以修改为字符串

document.cookie = 'username=leo;expires ='+oDate.toGMTString();//往访问者电脑里存储一个cookie 'name=value;'

document.cookie = 'age=32';

//chrome不允许本地形式操作cookie

//读取

alert(document.cookie);//username=leo; age=32

//存储特殊字符的时候，会出现一些问题。内容最好编码存放 encodeURI

//如果存储中文，会出现日期不正确的行为， 所以最好先编码。。

console.log(encodeURI('你好'));//出现%什么什么

console.log(decodeURI('%E4%BD%A0%E5%A5%BD'));//解码

//如何获取想要的？

function setCookie(key,value,t){

var oDate = new Date();

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

document.cookie = key+'='+encodeURI(value)+';expires='+oDate.toGMTString();

}

function getCookie(key){

var arr1 = document.cookie.split(';');

for(var i =0;i

var arr2 = arr1[i].split('=');

console.log(arr2);

if(arr2[0]==key){

return decodeURI(arr2[1]);

}

}

}

function removeCookie(key){

setCookie(key,'',-1);

}