JavaScript——06事件高级

coderwm

于 2024-07-16 14:37:18 发布

阅读量245

点赞数 9

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_44089555/article/details/106575941

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

注册事件（绑定事件）
删除事件（解绑事件）
DOM事件流
 事件对象
 阻止事件冒泡
 事件委托（代理、委派）
常见的鼠标事件
 常见的键盘事件

注册事件（绑定事件）

注册事件有两种方式：传统方式和方法监听方式
传统方式：

利用on开头的事件onclick
<button onclick=" alert(' hi! ')"></button>
btn.οnclick=function( ){ }
特点：注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

方法监听注册方式

w3c推荐标准
addEventListener（）它是一个方法
ie9之前不支持此方法可以attachEvent( )代替
特点：同一个元素同一个事件可以注册多个监听器
按注册顺序执行

addEventListener事件监听方式
eventTarget.addEventListener(type,listener [,userCapture] )
eventTarget.addEventListener()方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。
该方法接收3个参数：

type：事件类型字符串，比如click、mouseover 不要带on
listener：事件处理函数，事件发生时，会调用该监听函数
userCapture：可选参数，是一个布尔值，默认false

删除事件（解绑事件）

传统注册方式
eventTarget.οnclick=null;
方法监听注册方式
eventTarget.removeEventListener(type,listener[,userCapture]);

DOM事件流

事件流描述的是从页面接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流

DOM事件流分为3个阶段：
1.捕获阶段
2.当前目标阶段
3.冒泡阶段

事件冒泡：IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到DOM罪顶层节点的过程
事件捕获：网景最早提出，由DOM罪顶层节点开始，然后逐级向下传播到最具体的元素接收的过程。

1.JS代码中只能执行捕获或者冒泡其中的一个阶段
2.onclick和attachEvent只能得到冒泡阶段
3. eventTarget.addEventListener(type,listener [,userCapture] )第3个参数true，表示在捕获阶段调用事件处理程序；如果false（不写默认false），表示在事件冒泡阶段调用事件处理程序。
4. 事件开发中很少使用事件捕获，我们更关注事件冒泡
5. 有些事件是没有事件冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave

事件对象

什么是事件对象

eventTarget.onclick=function(event){  }
eventTarget.addEventListener('click', function(event) { })
//这个event就是事件对象，我们还喜欢写成e或者evt

event代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态
事件发生后，跟事件相关的一系列信息数据的集合都会放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法
比如：
1.谁绑定了这个事件
2.鼠标触发事件后，会得到鼠标的相关信息，如鼠标位置
3.键盘触发事件后，会得到键盘的相关信息，如按了哪个键
这个event是个形参，系统帮我们设定为事件对象，不需要传递实参过去。
当我们注册事件时，event对象就会被系统自动创建，并一次传递给事件监听器（事件处理函数）

e.target和this的区别：
this是事件绑定的元素，这个函数的调用者（绑定这个事件的元素）
e.target是事件触发的元素

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

事件对象属性方法	说明
e.target	返回触发事件的对象标准
e.srcElement	返回触发事件的对象非标准 ie6-8使用
e.type	返回事件的类型比如click、mouseover 不带on
e.cancelBubble	该属性阻止冒泡非标准 ie6-8使用
e.returnValue	该属性阻止默认事件（默认行为）非标准 ie6-8使用比如不让链接跳转
e.preventDefault()	该方法阻止默认事件（默认行为）标准比如不如不让链接跳转
e.stopPropagation()	阻止冒泡标准

阻止事件冒泡

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点

标准写法:
e.stopPropagation（）
非标准写法 ie6-8
e.cancelBubble=true;

事件委托

事件冒泡本身的特性，会带来好处，也会带来坏处。

 <ul>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
    </ul>

点击每个li都会弹出对话框，以前需要给每个li注册事件，非常麻烦，并且访问DOM的次数越多，这就会延长整个页面的交互就绪时间。
事件委托原理：
不是每个子节点单独设置时间监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

body>
    <ul>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
    </ul>
    <script>
        // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            // alert('知否知否，点我应有弹框在手！');
            // e.target 这个可以得到我们点击的对象
            e.target.style.backgroundColor = 'pink';


        })
    </script>
</body>

事件委托的作用：
我们只操作了一次DOM，提高了程序的性能。

常见的鼠标事件

鼠标事件	触发事件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

document.addEventListener('contextmenu',function(e){
e.preventDefault();
}

禁止鼠标选中（selectstart开始选中）

document.addEventListener('selectstart',function(e){
e.preventDefault();
}

鼠标事件对象

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

常用键盘事件

注意给文档document添加键盘事件

键盘事件	触发条件
onkeyup	某个键盘按键被松开时触发
onkeydown	某个键盘按键被按下时触发
onkeypress	某个键盘被按下时并弹起时触发
onkeypress和前面2个的区别，它不识别功能键，比如左右箭头、shift等
onkeydown和onkeyup不区分字母大小写，onkeypress区分字母大小写

鼠标事件对象

鼠标事件对象	说明
keyCode	返回该键的ASCII值

<body>
    <script>
        // 常用的键盘事件
        //1. keyup 按键弹起的时候触发 
        // document.onkeyup = function() {
        //         console.log('我弹起了');

        //     }
        document.addEventListener('keyup', function() {
            console.log('我弹起了');
        })

        //3. keypress 按键按下的时候触发  不能识别功能键 比如 ctrl shift 左右箭头啊
        document.addEventListener('keypress', function() {
                console.log('我按下了press');
            })
            //2. keydown 按键按下的时候触发  能识别功能键 比如 ctrl shift 左右箭头啊
        document.addEventListener('keydown', function() {
                console.log('我按下了down');
            })
            // 4. 三个事件的执行顺序  keydown -- keypress -- keyup
    </script>
</body>

参考：
黑马pink老师的课件