Web API笔记03 DOM事件流

1.事件监听

1.1事件监听注册事件

• 事件源.addEventListener（(事件类型,事件处理函数,[事件流])
• 事件类型是字符串，必定加引号，而且不带on
• 同一个元素、同一个事件可以添加多个监听器（事件处理程序）

1.2事件监听删除事件

• 事件源.removeEventListener(事件类型,事件处理函数,[事件流])
• 删除时函数要命名，事件处理函数写函数名
• arguments.callee表示函数地址

2.DOM

• 事件的流向，事件触发的顺序
• 捕获阶段、当前目标阶段、冒泡阶段
• js代码中只能执行捕获或冒泡其中的一个阶段
• onclick和attachEvent（ie）只能得到冒泡阶段

2.1捕获阶段

1. 如果addEventListener中事件流的参数是true，那么则处于捕获阶段
2. 从外到内触发，跟位置无关，跟结构有关
3. 只有事件监听才有捕获，传统注册方式没有
4. 代码注释

		var son = document.querySelector('.son');
        var father = document.querySelector('.father');
        son.addEventListener('click', function () {
            alert('son');
        }, true);
        father.addEventListener('click', function () {
            alert('father');
        }, true); //会先弹出father再弹出son

2.2冒泡阶段

1. 如果addEventListener中事件流的参数是false或者省略，那么则处于冒泡阶段
2. 从内到外触发事件，跟位置无关，跟结构有关
3. 实际开发中，更关注事件冒泡
4. 有些事件是没有冒泡的，如onblur、onfocus、onmouseenter、onmouseleave
5. 代码注释

		var son = document.querySelector('.son');
        var father = document.querySelector('.father');
        son.addEventListener('click', function () {
            alert('son');
        });
        father.addEventListener('click', function () {
            alert('father');
        }, false); //会先弹出son再弹出father

3.事件对象

• 事件对象：记录本次事件的一些信息集合
• 语法：事件函数内部有一个看不见的event
• event就是一个事件对象，写在侦听函数的小括号里面，当形参来看
• 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
• 事件对象是我们事件的一系列相关数据的集合，跟事件相关的，有很多属性和方法
• 这个事件对象我们可以自己命名，比如event、evt、e
• 事件对象也有兼容性问题，ie678通过window.event

3.1事件对象常见属性和方法

• ==e.target ==，返回触发事件的元素（对象），点哪个返回哪个
• e.type，返回事件类型
• e.preventDefault()，阻止默认事件（行为），比如点击链接不跳转
• e.stopPropagation()，阻止冒泡，点击谁只触发谁的事件

3.2事件委托

• 原理：事件冒泡
• 给父节点添加侦听器，利用冒泡影响每一个子节点，让每一个子节点都绑定父节点的事件
• 后来创建的新的子节点也会绑定事件

3.3常见鼠标事件

• contextmenu 禁止鼠标右键菜单
• selectstart 禁止选中文字
• mouseover、mouseout 鼠标经过和离开，经过自身和盒子都会触发
• mouseenter、mouseleave 鼠标经过和离开，只有经过自身才会触发
• mousedown、mouseup 鼠标点击和松开
• mouseEvent 鼠标事件对象
  1. clientX/Y, 鼠标在可视区的X和Y坐标
  2. pageX/Y, 鼠标在页面文档的X和Y坐标
  3. screenX/Y, 鼠标在电脑屏幕的X和Y坐标
• 跟随鼠标的图片代码

		var pic = document.querySelector('img');
        document.addEventListener('mousemove', function (e) {
            //1、mousemove，只要我们鼠标移动，就会触发这个事件
            var x = e.pageX;
            var y = e.pageY;
            pic.style.left = x - 50 + 'px';
            pic.style.top = y - 40 + 'px';
        })

3.4常见键盘事件

• keyup ，按键弹起时触发，不区分大小写
• keydown, 按键按下时触发，不区分大小写
• keypress， 按键按下时触发，不包括功能键，区分大小写
• keyCode， 通过获取ASCII码，得知用户按下哪个键
• 执行顺序：keydown —— keypress —— keyup
• 京东快递单号案例代码

		var con = document.querySelector('.con');
        var input = document.querySelector('input');
        input.addEventListener('keyup', function () {
            if (this.value.trim() == '') {
                con.style.display = 'none';//没有内容，大盒子隐藏
            } else {
                con.style.display = 'block';
                con.innerText = this.value;//当输入内容时，显示大盒子
            }
        })
        input.addEventListener('blur',function(){
            con.style.display = 'none';//失去焦点时，大盒子隐藏
        })
        input.addEventListener('focus',function(){
            if(this.value != ''){
                con.style.display = 'block';//获得焦点并且有内容时，显示大盒子
            }
        })