JavaScript事件

一、事件处理

1、基本概念

        (1) 事件：JavaScript可以侦测到的行为(用户在页面上进行的某种操作)

页面加载(浏览器打开页面)、单击鼠标、鼠标进入某个区域、焦点事件、键盘

        (2) 事件处理程序：用户进行了某种操作后，所运行的JavaScript程序段

        (3) 事件驱动式：当事件发生后才去执行相应的程序

        (4) 事件流：事件发生时，会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播，这个事件传播的过程就是事件流

        (5) 在web中对事件流的解决方案

        事件捕获：网景公司(Netscape)。事件流传播的顺序应该是从DOM树的根节点到发生事件的元素节点。

        事件冒泡：微软公司(Microsoft)。事件流传播的顺序应该是从发生事件的元素节点到DOM树的根节点。

        冒泡的前提：父级也定义了相应的事件，当子元素与父元素有相同的事件时，当子元素被触发时父元素也会被触发----冒泡机制

        W3C的事件流处理：事件发生阶段采用捕获方式(此时不处理)，在事件处理阶段采用冒泡

        (6) 事件捕获的实现：

        addEventListener(事件名，事件处理程序，事件处理方式)

        参数1：事件名(click、change、mousedown)

        参数2：事件处理程序()

        参数3：事件处理方式(true--表示采用事件捕获方式，false---采用事件冒泡方式) 默认为false

2、事件的绑定方式

        (1) 行内绑定方式

<标签名 事件名="事件处理程序"></标签名>

事件处理程序中的this代表的是window对象

        (2) 动态绑定式

DOM对象名.事件名 = 事件处理程序

        (3) 事件监听式：可以给DOM对象的同一个事件绑定多个事件处理程序

DOM对象.attachEvent(type,callback); //早期浏览器

DOM对象.addEventListener(type,callback,[capture]) //标准浏览器

注意：行内绑定式和动态绑定式的区别

不同点：

        (1) 行内绑定式中事件名作为标签的属性，动态绑定式中事件名作为DOM对象的属性

        (2) 行内绑定式的事件处理程序中的this代表的是window对象，动态绑定式的事件处理程序中的this代表的是触发事件的DOM对象

相同点：一个DOM对象的同一个事件只能有一个处理程序

3、删除事件绑定：

DOM对象.removeEventListener(type，callback)

二、事件对象

1、来源：当事件发生时，都会产生一个事件对象(event对象)

2、作用：通过事件对象可以了解与事件相关的信息(DOM对象，事件类型....)

3、获取事件对象

        (1) 早期的IE浏览器：window.event

        (2) 标准浏览器：将一个event对象直接传入事件处理程序中

4、常用属性:

        (1) type：返回当前事件的类型，如click

        (2) target：返回触发此事件的元素(事件的目标节点)

        (3) currentTarget：返回其事件监听器触发该事件的元素

        (4) bubbles ：表示事件是否是冒泡事件

5、常用函数

        (1) stopPropagation():阻止事件冒泡

        (2) preventDefault()：阻止默认行为

三、事件分类

1、鼠标事件

        click：鼠标单击

        mouseover：鼠标进入

        mouseout：鼠标离开

<div id="app" style="width: 300px;height:300px;background-color:red"></div>
    <script>
        document.getElementById('app').addEventListener('mouseover',function(){
            this.style.backgroundColor = 'blue'
        })
        document.getElementById('app').addEventListener('mouseout',function(){
            this.style.backgroundColor = 'red'
        })
    </script>

2、页面事件

        （1）load ：页面加载事件。 --- 用于body内所有标签都加载完成后才触发

        （2）unload：用于页面关闭时触发，经常用于清除变量，避免内存的泄露

3、焦点事件：多用于表单验证

        （1）focus：当获得焦点时触发（不会冒泡）

        （2）blur：失去焦点时触发（不会冒泡）

课堂练习：表单验证（验证用户名和密码的合法性）

<div>
        用户名：<input type="text" id="userName"><span id="nameInfo"></span>
        <br><br>
        密码：<input type="password" id="pwd"><span id="pwdInfo"></span>
    </div>
    <script>
        let name = document.querySelector('#userName')
        name.addEventListener('blur',function(){ //失去焦点
            let span = document.querySelector('#nameInfo')
            if(this.value === 'abc'){ //表示用户名正确
                span.classList.remove('fail') //删除原有的fail
                span.innerHTML = '用户名正确'
                span.classList.add('ok')
            }else{
                span.classList.remove('ok')//删除原有的ok
                span.innerHTML = '用户名错误'
                span.classList.add('fail')
            }
        })
    </script>

4、鼠标事件

        （1）click：鼠标单击

        （2）dblclick：鼠标双击

        （3）mouseover：鼠标进入

        （4）mouseout：鼠标离开

        （5）change：当内容发生改变时触发---input、select

示例：通过select改变页面背景色

<select id="changeColor">
        <option value="%">请选择</option>
        <option value="blue">蓝色妖姬</option>
        <option value="red">血腥玛丽</option>
        <option value="green">青青草原</option>
    </select>
    <script>
        let select = document.querySelector('#changeColor')
        select.addEventListener('change',function(){
            document.body.style.backgroundColor = this.value //this代表select
        })
    </script>

        （6）mousedown：当按下任意鼠标键时触发

        （7）mouseup：当释放任意鼠标键时触发

        （8）mousemove：在元素内当鼠标移动时持续触发

5、在鼠标事件中，鼠标的位置信息的获取

        （1）clientX：鼠标指针位于浏览器页面当前窗口可视区的水平坐标(x轴坐标)

        （2）clientY：鼠标指针位于浏览器页面当前窗口可视区的垂直坐标(y轴坐标)

        （3）pageX：鼠标指针位于文档的水平坐标(x轴坐标)

        （4）pageY：鼠标指针位于文档的垂直坐标(y轴坐标）

        （5）screenX：鼠标指针位于屏幕的水平坐标(x轴坐标)

        （6）screenY：鼠标指针位于屏幕的垂直坐标(y轴坐标)

课堂练习：当鼠标在浏览器窗口中移动时，在鼠标指针旁边显示指针的坐标

<style>
    #pos{
        width: 30px;
        height: 15px;
        line-height: 15px;
        text-align: center;
        position: absolute; /*绝对定位*/
        color:red
    }
</style>
<body>
    <div id="pos"></div>
    <script>
        window.onload = function(){
           //1.获取div 
           let div = document.querySelector('#pos')
           //2.给document绑定mousemove事件
           document.onmousemove = function(e){
            //2.1 获取鼠标指针在浏览器可视窗口中的坐标
              let my_left = e.clientX 
              let my_top = e.clientY 
            //2.2 修改div的坐标
            div.style.left = (my_left + 10)+'px'
            div.style.top = my_top + 'px' 
            //2.3 设置div的内容
            div.innerHTML = `(${my_left},${my_top})`
           }
        }
    </script>
</body>

强调：事件对象的兼容性处理

1、浏览器获取对象方法：

早期IE浏览器版本获取事件对象的方法：window.event

标准浏览器获取事件对象的方法：event

DOM对象.addEventListener('事件名称',function(e){
		let my_event = e|| window.event
})

2、早期IE浏览器事件对象的pageX和pageY的兼容性处理：

var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;

6、键盘事件：用户在使用键盘时触发

        (1) keypress : 键盘上按键按下时触发，不包含非字符按键。保存按键的ASCII码值

        (2) keydown : 键盘上按键按下时触发

        (3) keyup : 键盘按键弹起时触发

        keydown和keyup保存的是按键的虚拟键码

document.addEventListener('keydown',function(e){
            console.log('keydown：',e.keyCode)
            if(e.altKey){
                alert('Alt')
            }
            if(e.ctrlKey){}
            if(e.shiftKey){}
            console.log(e)
            console.log(e.code)
            console.log(e.key)
        })

7、表单事件：操作表单时触发

        (1) submit：当表单提交时触发

        (2) reset：当表单重置时触发