注册事件
evenrTarget.addEventlistener(type,listener[useCapture])将指定的监听器注册到eventTarget目标对象，当该对象触发指定的事件时，就会执行事件处理函数。
type事件类型字符串，不带on
listener事件处理函数，事件发生时，会调用该监听函数
useCapture可选参数，是一个布尔值，默认为false
btn.addEventlistener('click',function (){})
eventTarget.attachEvent(eventNameWithOn,callback)
eventNameWithOn事件类型字符串，要带on
callback事件处理函数，当目标触发事件时回调函数被调用。
btn.attachEvent('onclick',function (){})
注册事件兼容性方案
function addEventListener(element,eventNmae,fun) {
if(element,.addEventListener) {
element.addEventListener(eventName,fn);
} else if (element.attachEvent) {
element.attachEvent('on' + eventName,fun);
}else {
element['on' + eventName] = fn;
}
删除事件方式
传统方式
eventTarget.onclick=null;
方法监听方式
eventTarget.removeEventListener(type,listener[useCapture]);
eventTatget.detachEvent(eventNameWithOn,callback);
删除事件兼容性方案
function removeEventListener(element,eventNmae,fun) {
if(element,.removeEventListener) {
element.removeEventListener(eventName,fn);
} else if (element.detachEvent) {
element.detachEvent('on' + eventName,fun);
}else {
element['on' + eventName] = null;
}
DOM事件流
捕获阶段-当前目标阶段-冒泡阶段
事件冒泡-事件开始时由最具体的元素接受，然后逐级向上传播到DOM最顶层节点的过程。
事件捕获-由DOM最顶层节点开始，然后逐级向下传播到具体的元素接受的过程。
事件捕获阶段:document-html-body-div-处于目标阶段
事件冒泡:处于目标阶段-div-body-html-document
addEventListener(type,function (){},false)
第三个参数默认是false，处于冒泡阶段，true是处于捕获阶段。
事件对象e
eventTarget.onclick=function (e) {};
有时间就会有事件对象，系统自动创建的
事件对象兼容性问题e=e || window.event;
e.target和this区别
this是事件绑定的元素，这个函数的调用者
e.tatget是事件触发的元素
事件对象常见属性和方法
e.target 返回触发事件的对象
e.srcElement 返回触发事件的对象，非标准ie678
e.type 返回事件的类型，不带on
e.cancelBubble=true 该属性阻止冒泡，非标准ie678
e.returnValue 该属性阻止默认行为，非标准ie678
e.preventDefault() 该方法阻止默认事件,比如阻止事件跳转
e.stopPropagation() 阻止冒泡
阻止时间冒泡兼容性问题
if(e && e.stopPropagation) {
e.stopPropagation();
} else {
window.event.cancelBubble = true;
}
事件委托可以利用事件冒泡实现
原理-事件监听器设置在父节点上，利用冒泡原理影响设置每一个子节点。
作用-只操作了一次Dom，提高了性能
鼠标事件
禁止鼠标右键菜单
document.addEventListener('contextmenu',function (e){
e.preventDefault();
)
禁止鼠标选中document.addEventListener('selectstart',function (e){
e.preventDefault();
)
鼠标事件对象
e.clienntX 返回鼠标相对于浏览器窗口可视区的X坐标
e.clienntY 返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX 返回鼠标相对于文档页面的X坐标ie9+
e.pageY 返回鼠标相对于文档页面的Y坐标ie9+
e.screenX 返回鼠标相对于电脑屏幕的X坐标
e.screenY 返回鼠标相对于电脑屏幕的Y坐标
键盘事件
onkeyup 弹起
onkeydown 按下
onkeypress 按下并弹起触发-不能识别shif alt 等功能键
执行顺序-onkeydown-onkeypress-onkeyup
键盘事件对象
keyCode 返回该键ASCII值
onkeyup和onkeydown不区分大小写
onkeypress区分大小写
BOM浏览器对象模型
核心是window
window下面包含document,location,navigation,screen,history
窗口加载事件
window.onload = function (){}或者window.addEventLisyener('load',function (){});
前者只能写一次，多次书写会以最后一个为准。后者可以书写多次。
软加载
document.addEventListener('DOMContentLoaded',function () {})加载dom，不包括样式图片等。
调整窗口大小事件，触发时就会调用这个处理函数
window.onresize = function () {}
window.addEventListener('resize',function (){});
window.innerWidth 当前屏幕宽度
定时器
window.setTimeout(callback,1000)-一次性定时器
window.clearTimeout(timer)
window.setInterval(callback,1000)
window.clearInterval(timer)
倒计时案例
定时器this指向window
Js执行机制-单线程
同步任务-都在主线程上执行，形成一个执行栈。
异步任务-通过回调函数实现，一般来说有以下三种类型:1.普通事件click,resize等 2.资源加载:load,error等 3.定时器:包括setTimeout,steInterval等
异步任务相关回调函数添加到任务队列中。
先执行执行栈中的同步任务，异步任务(回调函数)放入任务队列中。一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环event loop
location对象
window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL,因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。
URL-统一资源定位符，是互联网上标准资源的地址。
protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link
protocol-通信协议
host-主机(域名)
port-端口号，可选省略时使用方案的默认端口
path-路径
query-参数，以键值对的形式通过&符号分隔开来
fragment-片段，#后面内容常见于链接锚点
location对象的属性
location.href 获取或者设置，整个URL
location.host 返回主机(域名)
location.port 返回端口号，如果未写返回，空字符串
location.pathname 返回路径
location.search 返回参数
location.hash 返回片段，#后面内容常见于链接锚点
重点记:href ,search
location对象的方法
location.assign() 跟href一样，可以跳转页面(也称为重定向页面)
location.replace() 替换当前页面，因为不记录历史，所以不能后退页面
location.reload() 重新加载页面，相当于刷新按钮或者f5, 如果参数为true强制刷新Ctrl+f5
navigator对象
包含有关浏览器的信息，它有很多属性，我们常见的是userAgent.该属性可以返回由客户机发送服务器的user-agent头部的值。
history对象
与浏览器历史记录进行交互，该对象包含用户(在浏览器窗口中)访问过的URL
history.back() 可以后退功能
history.forward() 前进功能
history.go(参数) 前进后退功能，参数如果是1前进一个页面，如果是-1后退一个页面。
常用于OA办公系统。