JS学习-DOM2

注册事件（绑定事件）

传统注册方式

on开头，事件唯一（同一个事件只能设置一个处理函数，后覆盖前），如onclick、onmouseover等

方法监听注册方式

1. w3c推荐

2. addEventListener()是一个方法

3. IE9之前不支持，使用attachEvent()代替

4. 同一元素同一事件可注册多个监听器，按注册顺序依次执行

/*enentTarget.addEventListener(type,listener[,useCapture])
  type:事件类型，比如click、mouseover，不带on
  listener:事件处理函数，事件发生调用该监听函数
  可选函数，为布尔值，默认false*/
var btns = document.querySelectorAll('button');
btns.addEventListener('click',function(){})

/*enentTarget.attachEvent(eventNameWithon, callback)
  eventNameWithon:事件类型，比如onclick、onmouseover，带on
  callback:事件处理函数，目标触发事件时回调函数被调用*/
btns.attachEvent('onclick', function(){})

删除事件（解绑事件）

//传统方式解绑事件
var divs = document.querySelectorAll('div');
divs[0].onclick = function(){
    //解绑
    divs[0].onclick = null;
}

//事件监听解绑
divs[1].addEventListener('click',fn);//里面的函数调用不用加小括号
function fn(){
    divs[1].removeEventListener('click',fn);
}

//attachEvent注册解绑
divs[2].attachEvent('onclick',fn1);
function fn1(){
    divs[2].detachEvent('onclick',fn1);
}

DOM事件流

捕获阶段：Document-->Element html-->Element body-->Element div

冒泡阶段：Element div-->Element body-->Element html-->Document

//JS代码中只能执行捕获或冒泡其中的一个阶段
//onclick和attachEvent只能得到冒泡阶段

var son = document.querySelector('.son');
son.addEventListener('click',function(){},ture);
//addEventListener第三个参数是 ture 为捕获阶段，是 false 或省略为冒泡阶段

//有些事件无冒泡，如：onblur、onfocus、onmouseenter、onmouseleave
/

事件对象

var div = document.querySelector('div');
div.onclick = function(event){}
//1.event就是事件对象，写到监听函数里，当形参看待
//2.事件对象有事件才存在，系统自动创建，不需传递参数
/*3.事件对象是事件一系列相关数据集合，比如鼠标点击包含鼠标相关信息、鼠标坐标等
    如果是键盘事件就包含判断用户按下的键*/
//4.事件对象可自己命名
//5.有兼容性问题，IE6、7、8通过 window.event 兼容写法 e = e || window.event;

//常见事件对象属性和方法
/*e.target:返回触发事件对象 标准
  e.srcElement:返回触发事件对象 非标准 ie6-8使用
  e.type:返回事件类型 如：click、mouseover 不带on
  e.stopPropagation():阻止冒泡 标准
  e.canceIBubble:阻止冒泡 非标准 ie6-8使用
  e.preventDefault():阻止默认事件 标准如 不让链接跳转
  e.returnValue:阻止默认事件 非标准 ie6-8使用 如不让链接跳转
*/

//target和this区别:target返回触发事件对象；this返回绑定事件对象

事件委托

原理：不给每个子节点单独设置事件监听器，将事件监听器设置在父节点上，然后利用冒泡原理影响设置每个子节点

常用鼠标事件

//禁止鼠标右键菜单
document.addEventListener('contextmenu',function(e){
    e.preventDefault();
})

//禁止鼠标选中
document.addEventListener('selectstart',function(e){
    e.preventDefault();
})

//event对象代表事件状态，事件相关的一系列信息的集合
//鼠标事件对象：MouseEvent
//键盘事件对象：KeyboardEvent

//鼠标事件对象
/*e.clientX:返回鼠标相对于浏览器窗口可视区的X坐标
  e.clientY:返回鼠标相对于浏览器窗口可视区的Y坐标
    e.pageX:返回鼠标相对于文档页面的X坐标 IE9+支持
    e.pageY:返回鼠标相对于文档页面的Y坐标 IE9+支持
  e.screenX:返回鼠标相对于电脑屏幕的X坐标
  e.screenY:返回鼠标相对于电脑屏幕的Y坐标
*/

//鼠标移动事件触发，每次鼠标移动都会获得最新鼠标坐标
document.addEventListener('mousemove',function(e){
    var x = e.pageX;
    var y = e.pageY;
})

常用键盘事件

/*onkeyup:某个键盘按键被松开时触发，不区分大小写
  onkeydown:某个键盘按键被按下时触发，不区分大小写
  onkeypress:某个键盘按键被按下时触发 *不识别功能键 如：ctrl shift 箭头等，区分大小写
*/


document.onkeyup = function(){}
document.addEventListener('keyup',function(){})
//执行顺序：keydown-->keypress-->keyup

//判断用户按下键
document.addEventListener('keyup',function(e){
    console.log(e.keyCode);//keyCode返回是按键的ASCⅡ值，不区分字母大小写
})