DOM高级事件

最新推荐文章于 2024-07-26 11:41:15 发布

shirlyran

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量124

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/shirlyran/article/details/107498144

版权

1. 注册事件（绑定事件）

1.1 传统注册方式

利用on开头的事件，如onclick，onmouseover等
特点：注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

1.2 方法监听注册方式

1.2.1 addEventListener（）

addEventListener（）方法
ie9之前用attachEvent() 代替
特点：同一个元素同一时间可以注册多个监听器
按注册顺序执行

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

该方法接收三个参数:

type :事件类型字符串,比如click. mouseover ,注意这里不要带on
listener :事件处理函数,事件发生时,会调用该监听函数
useCapture :可选参数,是一个布尔值,默认是false。值为ture时，DOM事件流处于捕获阶段；值为false或者省略，处于冒泡阶段
    btn.addEventListener('click',fn);//里面的fn不需要调用加小括号
    function fn(){
        alert('ll');
    }

1.2.2 attachEvent () （非标准，尽量不使用）

eventrarget .attachEvent ()方法将指定的监听器注册到eventrarget (目标对象).上,当该对象触
发指定的事件时,指定的回调函数就会被执行。
该方法接收两个参数:

eventNameWithOn :事件类型字符串,比如onclick、onmouseover , 这里要带on
callback :事件处理函数,当目标触发事件时回调函数被调用

1.2.3 注册事件兼容性解决方案

function addEventLi stener (element, eventName, fn) {
    //判断当前浏览器是否支持addEventListener方法
    if (element. addEventLi stener) {
        element . addEventListener (eventName, fn); // 第三个参数默认是false
    } else if (element .attachEvent) {
        el ement。attachEvent('on' + eventName, fn);
    } else {
        //相当于element .onclick= fn; 
        element[ 'on' + eventName] = fn;
}

2. 删除事件（解绑事件）

2.1 传统方式

element.onclick=null

2.2 监听注册方式

eventTarget.removeEventListener(type，listener[,useCapture])

3. DOM事件流

三阶段：

捕获阶段
当前目标阶段
冒泡阶段

注：

js代码只能执行捕获或者冒泡其中的一个阶段
onclick 和attachEvent 只能得到冒泡阶段
实际开发中我们很少使用事件捕获,我们更关注事件冒泡。
有些事件是没有冒泡的,比如onblur. onfocus. onmouseenter. onmouseleave

4. 事件对象

var div=document.querySelector('div');
div.onclick=function(event){}
event 就是一个事件对象，写到我们侦听函数的 () 里，当作形参看待

事件对象只有有了事件才会存在，它是系统自动创建的，不需要我们传递参数

事件对象是事件的一系列相关数据的集合，与事件相关的，如onclick事件，包含了鼠标的相关信息，鼠标坐标等

事件对象名可自定义

兼容性问题 ie678--window.event

4.1 常见属性和方法

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

e.target 返回触发事件的对象；this 返回的是绑定事件的对象

阻止默认行为 return false；没有兼容性问题，只限于传统注册方式

5. 事件委托（代理、委派）

5.1 原理

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

6. 常用鼠标事件

6.1 禁止鼠标右键菜单

contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单

<body>
    想复制？想想吧！
    <script>
        document.addEventListener('contextmenu', function(e) {
            e.preventDefault();
        })
    </script>
</body>

6.2 禁止鼠标选中

selectstart

<body>
    想复制？想想吧！
    <script>
        document.addEventListener('selectstart', function(e) {
            e.preventDefault();
        })
    </script>
</body>

6.3 鼠标事件对象

6.4 案例：图片跟随鼠标移动 mousemove

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            position: absolute;
        }
    </style>
</head>

<body>
    <img src="cloud.png">
    <script>
        var pic = document.querySelector('img');
        var btn = document.querySelector('button');
        document.addEventListener('mousemove', function(e) {
            var x = e.pageX;
            var y = e.pageY;
            pic.style.left = x - 24 + 'px';
            pic.style.top = y - 24 + 'px';
        });
    </script>
</body>

7. 常见键盘事件

如果使用addEventListener，不需要加on
三个事件的执行顺序是down-press-up

7.1 键盘事件对象

键盘事件对象中的keyCode属性可以获得对应键的ASCII码

keyup和keydown不区分字母大小写，keypress能区分
keydown和keypress在文本框的特点：他们两个事件触发的时候，文字还没有落入文本框中
keyup事件触发时，文字已经落入文本框里面了

shirlyran

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM高级事件

1. 注册事件（绑定事件）1.1传统注册方式利用on开头的事件，如onclick，onmouseover等特点：注册事件的唯一性同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数1.2方法监听注册方式1.2.1 addEventListener（）addEventListener（）方法 ie9之前用attachEvent() 代替特点：同一个元素同一时间可以注册多个监听器按注册顺序执行eventTarget.a...
复制链接

扫一扫