标签：
焦点：使浏览器能够区分用户输入的对象，当一个元素有焦点的时候，那么他就可以接收用户的输入。
设置焦点的几种方式：
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 style="height:2000px;">
<p id=‘jieshao‘ style="background:red; position:absolute; display:none">详细信息</p>
</body>
--------------------------------------------
事件冒泡：当一个元素接收到事件（onclick,onmouseover...）的时候，他会把事件传播到他的父级，直到WIndow
也就是一个元素接收到事件的时候，他不仅触发他自己的事件，还会把事件传播到父级，父级又传播到父级.
<style>
div{padding:30px;}
#div1{background:red;}
#div2{background:green;}
#div3{background:blue; position:absolute; top:200px;}
</style>
<script>
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 id="div1">
<div id="div2">
<div id="div3">
</div>
</div>
</div>
</body>
-------------------------------------------
事件绑定函数
事件冒泡跟绑不绑定函数没关系
例子就如同我捡到100块钱，这就是一个事件，然后这100块钱怎么处理交给谁这就是一个函数
所以如上个例子
odiv3.onclick=haha
odiv2.onclick=haha
odiv1.onclick=‘‘
这里如果不给odiv3绑定函数，他也会冒泡到父级
阻止当前事件对象冒泡：
event.canceleBubble=true
-----------------------
例2.点击按钮显示列表，点击document,隐藏列表
因为input是document的子元素
所以当点击input的时候，列表先显示，然后冒泡把事件传播到document
而document又触发了接收到的点击事件,又把列表隐藏了。。所以切换速度太快，显示结果就是没变化，
<script>
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>
<input type="button" id="anniu" value=‘点击‘/>
<div id="div1">
这是一个列表
</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>
<script>
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 id="div1">
<div id="div2">分享到</div>
</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：
最简单的流程：
<script>
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>
<input type="button" value="按钮" id="btn" />
</body>
-------------------------------------------------------
//过程解释说明
<script>
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>
<input type="button" value="按钮" id="btn" />
</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)
<script src="jquery.js"></script>-->
<script>
$(function(){}) //在这里如果没有上面的JQ引入，那么这里执行就会出问题，这就是同步，分先后，影响后面代码的执行
</script>
-----------------------------------------------------------
表单提交解释：
action:数据提交的地址， 默认提交当前页
method:提交的方式，默认是get方式
1.get
//age=
把数据名称和数据值用=连接，如果有多个的话，那么他会把多个数据组合用&进行连接，然后把数据放到url?后面传到指定页面
get方式缺点：
1、提交的数据大小限制
2、不安全，浏览器会缓存，通过历史记录会查看到提交的信息
2.post 理论上无限制
enctype : 提交的数据格式，默认application/x-www-form-urlencoded
<form action="1.get.php" enctype="application/x-www-form-urlencoded">
<input type="text" name="username" />
<input type="text" name="age" />
<input type="submit" value="提交" />
</form>
-----------------------------------------------------------
<script src="https://github.com/douglascrockford/JSON-js/blob/master/json2.js"></script>
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知识点备忘
标签：
原文地址：http://www.cnblogs.com/leyi/p/4498628.html
