事件处理知识

最新推荐文章于 2023-01-02 11:28:49 发布

爱喝红茶的老玩童

最新推荐文章于 2023-01-02 11:28:49 发布

阅读量463

点赞数 1

文章标签： javascript 前端开发语言 html5

本文链接：https://blog.csdn.net/GJW966288/article/details/127657906

版权

一、基本概念

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

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

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

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

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

5、在web中对事件流的解决方案：

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

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

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

（3）w3c的事件流处理：在事件发生阶段采用捕获方式（此时不处理），在事件处理阶段采用冒泡

6、事件捕获的实现：

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

参数1：事件名（click、change、load、mousedown…..）

参数2：事件处理程序

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

二、事件的绑定方式

1、行内绑定式

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

2、动态绑定式

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

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

不同点：

a、 “行内绑定式”中事件名作为标签的属性，”动态绑定式”中事件名作为DOM对象的属性

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

相同点：

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

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

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

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

三、删除事件绑定：

DOM对象.removeEventListener(type, callback);

四、事件对象：

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

2、作用：通过事件对象可以了解与事件相关的信息（DOM对象、事件的类型……）

3、获取事件对象：

（1）早期的IE浏览器：window.event

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

4、常用属性：

（1）type：代表当前事件的类型

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

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

（4）bubbles：表示事件是否是冒泡事件类型

5、常用函数：

（1）stopPropagation()：阻止事件冒泡

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

五、事件的分类

1、鼠标事件

（1）click：鼠标单击

（2）dblclick：鼠标双击

（3）mouseover：鼠标进入

（4）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>

（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：在元素内当鼠标移动时持续触发

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

（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>

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

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

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

DOM对象.addEventListener(‘事件名称’，function(e){

let my_event = e || window.event

})

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

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

鼠标在文档中的坐标等于鼠标在当前窗口中的坐标加上滚动条卷去的文本长度

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

（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)
        })

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

（1）submit：当表单提交时触发

（2）reset：当表单重置时触发