JS基础知识(七)事件

题目：

1.编写一个通用的事件监听函数
2.描述事件冒泡流程
3.对一个无限下拉加载图片页面，如何给每一个图片绑定事件

 

知识点：

1.通用事件绑定
     封装

		var link1 = document.getElementById('link1')
		 link1.addEventListener('click', function(e) {
		 	e.preventDefault()
		 	console.log('aaaa')
		 })

//通用绑定函数
		 function bindEvent(elem, type, fn) {
		 	elem.addEventListener(type,fn)
		 }

		 bindEvent(link1, 'click' , function(e) {
		 	e.preventDefault()
		 	console.log('aaaa')
		 })

<a>是特殊标签，会点击跳转，preventDefault，默认点击事件就跳到链接

关于IE低版本的兼容性
1.IE低版本使用attachEvent绑定事件，和W3C标准不一样
2.IE低版本使用量以非常少，很多网站都早已不支持
3.建议对IE低版本的兼容性：了解即可，无需深究
4.如果遇到对IE低版本要求苛刻的面试，果断放弃

2.事件冒泡

	<div id="div1">
		<a href="http://imooc.com" id="link1">imooc</a>
		<a href="http://imooc.com" id="link2">imooc</a>
		<a href="http://imooc.com" id="link3">imooc</a>		
		<p id="p1">激活</p>
		<p id="p2">取消</p>
	</div>
	<div id="div2">
		<p id="p3">取消</p>
		<p id="p4">取消</p>
	</div>

 

		//事件冒泡
		var p1 = document.getElementById('p1')
		bindEvent(p1, 'click', function(e){
			e.stopPropagation()
			alert('激活')
		})
		var body = document.body
		bindEvent(body, 'click', function(e) {
			alert('取消')
		})

冒泡都是往上
  P1,div,body....
  默认会冒泡
  e.stopPropatation 阻止冒泡
3.代理
  事件冒泡的具体应用

		//事件代理
		//nodeName都是大写开头的
		var div1 = document.getElementById('div1')
		bindEvent(div1, 'click' , function(e) {
			e.preventDefault()
			console.log(e.target)
			var target = e.target
			if (target.nodeName === 'A') {
				console.log('click a')
			}
		})

target告诉你是哪里触发的
1.通过事件冒泡机制
2.用target拿到他真实触发的元素

->完善通用绑定事件的函数。

		//通用绑定函数2.0
		//match是否匹配选择器
		function bindEvent(elem, type, selector, fn) {
			if (fn == null) {
				fn = selector
				selector = null
			}
			elem.addEventListener(type, function(e){
				var target
				if (selector) {
					//代理
					target = e.target
					if (target.matches(selector)) {
						fn.call(target, e)
					}
				} else {
					//不是代理
					fn(e)
				}
			})
		}

		bindEvent(div1, 'click' , 'a' , function(e) {
			e.preventDefault()
			console.log(this.innerHTML)
		})

		var p1 = document.getElementById('p1')
		bindEvent(p1, 'click', function(e) {
			console.log(p1.innerHTML)
		})

代理的好处：
1、代码简洁
减少浏览器内存

____________________________________________________________________________________________________

AJAX

题目：
  1.手动编写一个ajax，不依赖第三方库
  2.跨域的几种实现方式

知识点：
1.XMLHttpRequest

var xhr = new XMLhttpRequest()
xhr.open("GET", "/api", false)
xhr.onreadystatechange = function () {
   //这里的函数异步执行，可参考之前的异步模拟的
   if (xhr. readyState == 4) {
      if(xhr.status == 200) {
         alert(xhr.responseText)
     }
   }
}
xhr.send(null)

关于IE兼容性问题
1.IE低版本使用ActiveXObject,和W3C标准不一样
2.IE低版本使用量以非常少，很多网站都早已不支持
3.建议对IE低版本的兼容性：了解即可，无需深究
4.如果遇到对IE低版本要求苛刻的面试，果断放弃

2.状态码说明
    readyState ==4 
0- 未初始化 还没有调用send()
1-载入 已调用send() 方法，正在发送请求
2-载入完成 send()方法执行完成，已经接受到全部响应内容
3-交互 正在解析相应内容
4-完成 相应内容解析完成，可以在客户端调用了

    status http标准的码
2xx - 表示成功处理请求。 200
    3xx - 需要重定向，浏览器直接跳转
    4xx - 客户端请求错误，如404 
    5xx - 服务器端错误    

3.跨域
    （1）什么是跨域：
    浏览器有同源策略，不允许ajax访问其他域接口
    
    跨域条件：协议，域名，端口，有一个不同就算跨域

    有关跨域的三个标签
1.<img src = xxx> 防盗链处理
    (1)用于打点统计，统计网站可能是其他域
    (2)兼容浏览
2.<link href = xxx>
    (1)跨域使用CDN,CDN的也是其他域
3.<script src = xxx>
    (1)跨域使用CDN,CDN的也是其他域
    (2)跨域用于jsonp

注意：
   所有跨域请求都必须经过信息提供方允许
   如果未经过允许即可获取，那是浏览器同源策略出现漏洞

（2）JSONP
   实现原理：

加载http://coding.m.imooc.com/classindex.html
不一定服务器真正有一个classindex.html文件
服务器跨域根据请求，动态生成一个文件，返回
同理于<script src=”http://codig.m.imooc/api.js>

例如跨域访问慕课网一个借口
给你一个接口http://coding.m.imooc.com/api.js
返回内容格式如 callback({x:100,y:200})  (可动态生成)

定义函数，请求外域api,js片段再把参数传回来

（3）服务器端设置http header
  另一个解决跨域的简洁方法，需要服务器端来做
  但是作为交互方，我们必须知道这个方法
  是将来解决跨域的方法的趋势

3.存储
题目：
1.请描述cookie,sessionStorage和localStorage

 

知识点：
1.Cookie
   本身用于客户端和服务器通信
   但是它有本地存储的功能，于是就被“借用” 
   使用document.cookie = ... 获得和修改即可

缺点：
   存储量太小，只有4KB
   所有http请求都带着，会影响获得资源的效率
   api简单，需要封装才能用document.cookie=...

2.localStorage和sessionStorage

    HTML5专门为存储而设计，最大容量5M，

    API简答易用相同都是set...get...

    localStorage.setItem(key, value);
    localStorage.getItem(key);

区别：
   session关了浏览器都会清理
   local不会清理

坑：
   Ios safari隐藏模式下
   localStorage.getItem 会报错
   建议使用统一try catch 封装

_____

解答：

1.编写一个通用的事件监听函数

        function bindEvent(elem, type, selector, fn) {
            if (fn == null) {
                fn = selector
                selector = null
            }
            elem.addEventListener(type, function(e){
                var target
                if (selector) {
                    //代理
                    target = e.target
                    if (target.matches(selector)) {
                        fn.call(target, e)
                    }
                } else {
                    //不是代理
                    fn(e)
                }
            })
        }

2.描述事件冒泡流程
   dom树形结构
   事件冒泡
   阻止冒泡
   冒泡的应用-代理
3.对一个无限下拉加载图片页面，如何给每一个图片绑定事件
   使用代理
   代理的两个优点，绑定一次就行，给浏览器的压力小

1.手动编写一个ajax，不依赖第三方库

var xhr = new XMLHttpRequest()
xhr.open("GET", "/api", false) //false表示使用异步
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            alert(xhr.responseText)
        }
    }
}
xhr.send(null)

2.跨域的几种实现方式

(1)JSONP (2)img,link,script (3)服务器端设置http header

1.请描述cookie,sessionStorage和localStorage

1）容量：cookie只有4kb，而sessionStorage和localStorage最大容量5M
2）是否会携带到ajax中：cookie每次都会带，而sessionStorage和localStorage不会
3）API易用性：cookie要自己封装且较麻烦，而sessionStorage和localStorage，getItem,setItem基本上就能搞定