焦点、event对象、事件冒泡、事件绑定、AJAX知识点备忘

浏览数：23 / 时间：2015年06月09日

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

设置焦点的几种方式：

1、点击

2、TAB键

3、JS

onfocus onblur 属性

var oinp=document.getElementById(‘shuru‘)

oinp.onfocus=function(){

if(oinp.value==‘请输入‘){

oinp.value=‘‘

}

oinp.onblur=function(){

if(oinp.value==‘‘){

oinp.value=‘请输入‘

}

-----------------------------------

JS设置焦点如点击百度首页已进入页面焦点就会自动搜索框里面

focus() blur() select()方法

chrome ff 不支持操作复制可以用select()方法

xxx.focus()

---------------------------------------------------

事件对象：当一个事件发生的时候，当前这个对象发生的这个事件的一些详细信息（json）被临时保存

到一个指定地方---event对象，必须事件发生后才能用,在事件调用函数里面使用，就像飞机的黑匣子

IE/Chrome :event是一个内置对象就像document对象一样

如 document.onclick=alert(1) 这个就不是点击事件发生后执行的，这个是一打开网页就执行了，和点击事件没关系

,而事件对象必须是在当前这个事件发生后才能获取相关事件信息，所以用函数把后面这一块包起来，让他点击后才发生后面的事件

document.onclick=function(){alert(event)} 这样才能获取当前点击事件的event信息。

function haha(){

alert(event)

}

haha() //这样就不是事件调用的函数，会返回空或者未定义

document.onclick=haha //这样就是事件调用的，这样就会有点击的事件的相关信息

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

FF下面调用事件对象，事件对象是通过事件函数的第一个参数传入的,如果一个函数是被事件调用的

那么这个函数定义的第一个参数就是事件对象

兼容：var ev=ev||event

查看点击事件EVENT事件对象的信息

function haha(ev){

var ev=ev||event

for(var attr in ev){

console.log(attr+‘=‘+ev[event])

}

document.onclick=haha

------------------------------------

clientX Y的使用当一个事件发生的时候，鼠标到可视区的位置

window.onload=function(){

var odiv=document.getElementById(‘jieshao‘)

function haha(ev){

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

var ev=ev||event

odiv.style.display=‘block‘

odiv.style.left=ev.clientX+‘px‘

odiv.style.top=ev.clientY+st+‘px‘

}

document.onmousemove=haha

}

</script>

</body>

--------------------------------------------

事件冒泡：当一个元素接收到事件（onclick,onmouseover...）的时候，他会把事件传播到他的父级，直到WIndow

也就是一个元素接收到事件的时候，他不仅触发他自己的事件，还会把事件传播到父级，父级又传播到父级.

<style>

div{padding:30px;}

#div1{background:red;}

#div2{background:green;}

#div3{background:blue; position:absolute; top:200px;}

</style>

window.onload=function(){

var odiv1=document.getElementById(‘div1‘)

var odiv2=document.getElementById(‘div2‘)

var odiv3=document.getElementById(‘div3‘)

function haha(){alert(this.id)}

odiv3.onclick=haha

/*odiv2.onclick=haha*/

odiv1.onclick=haha

}

</script>

<body>

</div>

</body>

-------------------------------------------

事件绑定函数

事件冒泡跟绑不绑定函数没关系

例子就如同我捡到100块钱，这就是一个事件，然后这100块钱怎么处理交给谁这就是一个函数

所以如上个例子

odiv3.onclick=haha

odiv2.onclick=haha

odiv1.onclick=‘‘

这里如果不给odiv3绑定函数，他也会冒泡到父级

阻止当前事件对象冒泡：

event.canceleBubble=true

-----------------------

例2.点击按钮显示列表，点击document,隐藏列表

因为input是document的子元素

所以当点击input的时候，列表先显示，然后冒泡把事件传播到document

而document又触发了接收到的点击事件,又把列表隐藏了。。所以切换速度太快，显示结果就是没变化，

window.onload=function(){

var odiv=document.getElementById(‘div1‘)

var oinp=document.getElementById(‘anniu‘)

oinp.onclick=function(ev){

odiv.style.display=‘block‘

/* var ev=ev||event

ev.cancelBubble=true */ 阻止当前点击事件冒泡

}

document.onclick=function(){

setTimeout(function(){

odiv.style.display=‘none‘

},1500)

}

</script>

<body>

这是一个列表

</div>

</body>

----------------------------------

分享到按钮制作：只给父级加函数，子元素会在事件发生时把事件传播到父级

#div1{background:red;width:100px; height:200px; background:red; position:absolute; left:-100px;top:150px;}

#div2{width:20px; height:65px; position:absolute;right:-20px; top:60px;background:green;padding-top:15px;color:#fff}

</style>

window.onload=function(){

var odiv1=document.getElementById(‘div1‘)

odiv1.onmouseover=function(){

this.style.left=‘0px‘

}

odiv1.onmouseout=function(){

this.style.left=‘-100px‘

}

</script>

<body>

</div>

</body>

----------------------------------------------------------------------------

事件绑定第二种形式：

我们前面一般是这样绑定的（赋值形式）

xxx.onclick=function(){}

xxx.onmouseover=function(){}

取消绑定：

xxx.onclick=null

但是这样有个不足如下：

function fn1(){}

function fn2(){}

document.onclick=fn1

document.onclick=fn2

这样的话第二个绑定函数会覆盖第一个绑定函数

为了能给某个对象同一个事件增加多个绑定函数

事件绑定的第二种方式：

IE 下：obj.attachEvent(事件名称，事件函数)

1.不能捕获

2.事件名称有on

3.this指向window

解决指向问题

call是函数下的一个方法

fn1.call()==fn1()

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

有其他参数的话，后面就紧跟其他的参数

如：

document.attachEvent(‘onclick‘,fn1)

document.attachEvent(‘onclick‘,fn2)

取消绑定：

doccument.deattachEvent(‘onclick‘,fn1)

doccument.deattachEvent(‘onclick‘,fn2)

改变this指向为document

document.attachEvent(‘onclick‘,function(){fn1.call(document)})

document.attachEvent(‘onclick‘,function(){fn2.call(document)})

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

是否捕获，默认下为false，即冒泡

1.能捕获

2.事件名称没有on

3.指向触发该事件函数的对象

document.addEventListener(‘click‘,fn1,false)

document.addEventListener(‘click‘,fn2,true)

取消绑定：

doccument.removeEventListener(‘click‘,fn1,false)

doccument.removeEventListener(‘click‘,fn2,true)

绑定方法封装：

function bind(obj,evname,fn){

if(obj.attachEvent){

obj.attachEvent(‘on‘+evname,

function(){fn.call(obj)}

)

}

else{

obj.addEventListener(evname,fn,false)

}

-----------------------------------------------------------

AJAX：

最简单的流程：

window.onload=function(){

var obtn=document.getElementById(‘btn‘)

obtn.onclick=function(){

var xhr;

try {

xhr = new XMLHttpRequest();

} catch (e) {

xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);

}

xhr.open(‘get‘,‘1.txt‘,true)

xhr.send()

xhr.onreadystatechange=function(){

if(xhr.readyState==4){

if(xhr.status==200){

alert(xhr.responseText)}else{alert(‘错误信息:‘+xhr.status)}

}

</script>

<body>

</body>

-------------------------------------------------------

//过程解释说明

window.onload=function(){

var obtn=document.getElementById(‘btn‘)

obtn.onclick=function(){

var xhr;

var xhr=new XMLHttpRequest() //创建一个AJAX对象，就像打开浏览器

//IE6下创建AJAX对象：new ActiveXObject(‘Miscrosoft.XMLHTTP‘)

//兼容写法:

/*if(window.XMLHttpRequest){

xhr=new XMLHttpRequest();

}else{xhr=new ActiveXObject(‘Microsoft.XMLHTTP‘)}*/

//或者用try catch的方式

//try catch 的用法

/*try {

//代码尝试执行这个块中的内容,如果有错误，则会执行catch{}，并且传入错误信息参数

//alert(a);

//new throw();

//throw new Error(‘错了错了‘);直接抛错

} catch (e) {

alert(e);

}*/

try {

xhr = new XMLHttpRequest();

} catch (e) {

xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);

}

xhr.open(‘get‘,‘1.txt‘,true) //通过什么方式获取，获取东西得地址，是否异步，默认是异步,这一步相当于在浏览器地址栏输入地址

//异步同步的说明 :异步（非阻塞）的意思是前面代码的不影响后面代码的执行。而同步（阻塞）就是前面代码会影响后面代码的执行

xhr.send()//提交

//等待服务器返回内容

xhr.onreadystatechange=function(){

if(xhr.readyState==4){

alert(xhr.responseText)//获取的是字符串

}

</script>

<body>

</body>

-----------------------------------------------------

readyState : ajax工作状态

responseText : ajax请求返回的内容就被存放到这个属性下面

on readystate change : 当readyState改变的时候触发

status : 服务器状态，http状态码

xhr.onreadystatechange = function() {

if ( xhr.readyState == 4 ) {

if ( xhr.status == 200 ) {

alert( xhr.responseText );

} else {

alert(‘出错了,Err：‘ + xhr.status);

}}}

-----------------------------------------------------

get方式缓存问题和中文乱码问题：

1.缓存在url？后面连接一个随机数，时间戳

2.乱码编码encodeURI

xhr.open(‘get‘,‘2.get.php?username=‘+encodeURI(‘中文‘)+‘&haha=hehe&‘ + new Date().getTime(),true);

xhr.send();

xhr.open(‘post‘,‘2.post.php‘,true);

//post方式，数据放在send()里面作为参数传递

xhr.setRequestHeader(‘content-type‘, ‘application/x-www-form-urlencoded‘);//申明发送的数据类型

//post没有缓存问题

//无需编码

xhr.send(‘username=中文&haha=hehe‘);

-----------------------------------------------------

同步异步解释

setTimeout(function() {

alert(1);

}, 2000); //在这里定时器不会在2秒后执行后才执行下面的alert(2)，这就是异步，不影响后面代码的执行

alert(2)

$(function(){}) //在这里如果没有上面的JQ引入，那么这里执行就会出问题，这就是同步，分先后，影响后面代码的执行

</script>

-----------------------------------------------------------

表单提交解释：

action:数据提交的地址，默认提交当前页

method:提交的方式，默认是get方式

1.get

//age=

把数据名称和数据值用=连接，如果有多个的话，那么他会把多个数据组合用&进行连接，然后把数据放到url?后面传到指定页面

get方式缺点：

1、提交的数据大小限制

2、不安全，浏览器会缓存，通过历史记录会查看到提交的信息

2.post 理论上无限制

enctype : 提交的数据格式，默认application/x-www-form-urlencoded

</form>

-----------------------------------------------------------

JSON方法

JSON.stringify

可以把一个对象转成对应字符串

var arr=[1,2,3]

JSON.stringify(arr)

parse : 可以把字符串转成对应对象

var ostring = ‘[1,2,3]‘;

var oarr = JSON.parse(ostring);

//alert(oarr[0])

这里转换成数组

var ostring = ‘{"left":100}‘;

var ojson = JSON.parse(ostring);

alert(ojson.left)

这里转换成json对象

-----------------------------------------------------------

ajax封装：

function ajax(method, url, data, success) {

var xhr = null;

try {

xhr = new XMLHttpRequest();

} catch (e) {

xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);

}

if (method == ‘get‘ && data) {

url += ‘?‘ + data;

}

xhr.open(method,url,true);

if (method == ‘get‘) {

xhr.send();

} else {

xhr.setRequestHeader(‘content-type‘, ‘application/x-www-form-urlencoded‘);

xhr.send(data);

}

xhr.onreadystatechange = function() {

if ( xhr.readyState == 4 ) {

if ( xhr.status == 200 ) {

success && success(xhr.responseText);

} else {

alert(‘出错了,Err：‘ + xhr.status);

}

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

焦点、event对象、事件冒泡、事件绑定、AJAX知识点备忘

标签： style log com 代码使用 src http si it style log com 代码使用 src http si it

焦点、event对象、事件冒泡、事件绑定、AJAX知识点备忘

相关文章

随机文章

您可能还喜欢

您可能还喜欢

最新图文

您可能还喜欢

您可能还喜欢

文摘排行

文章排行

推荐文章

图文排行

推荐图文

焦点 、event对象、事件冒泡、事件绑定、AJAX知识点备忘

相关文章

随机文章

您可能还喜欢

您可能还喜欢

最新图文

您可能还喜欢

您可能还喜欢

文摘排行

文章排行

推荐文章

图文排行

推荐图文

焦点、event对象、事件冒泡、事件绑定、AJAX知识点备忘