DOM事件高级导读

最新推荐文章于 2024-04-30 16:57:21 发布

黑暗名单㊣

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量49

点赞数 1

分类专栏：事件委托文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_44928631/article/details/117412994

版权

事件委托专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.注册事件

给元素添加事件，称为注册事件或者绑定事件。

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

addEventListener()事件监听方式

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

该方法接收三个参数︰
type :事件类型字符串，比如click、mouseover ，注意这里不要带on
listener :事件处理函数，事件发生时，会调用该监听函数
useCapture:可选参数，是一个布尔值，默认是false。学完DOM事件流后，我们再进一步学习

注意要加引号:‘’

  btns[1].addEventListener('click', function() {
            alert('加油周周');
        });

注册事件兼容性解决方案
function addEventListener(element, eventName,fn){
//判断当前浏览器是否支持addEventListener方法if (element.addEventListener) {
element.addEventListener(eventName，fn);1/第三个委数J认是false} else if (element.attachEvent) {
element.attachEvent ( 'on' + eventName,fn) ;}else {
//相当于element.onclick = fn;element [ 'on' + eventName] = fn;
}
兼容性处理的原则:首先照顾大多数浏览器，再处理特殊浏览器

removeEventListener

DOM 事件流

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

DOM对象

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

e.target和this

区别: e.target点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁

阻止默认事件

e.preventDefault(); e.type

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

事件委托

事件委托也称为事件代理，在jQuery里面称为事件委派。

事件委托的原理

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

鼠标事件对象

e.clientX返回鼠标相对于浏览器窗口可视区的×坐标
e.clientY返回鼠标相对于浏览器窗口可视区的Y坐标

e.pagex返回鼠标相对于文档页面的×坐标IE9+支持
e.pageY返回鼠标相对于文档页面的Y坐标IE9+支持
e.screenX返回鼠标相对于电脑屏幕的坐标
e.screenY返回鼠标相对于电脑屏幕的Y坐标

跟随鼠标移动代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img {
            position: absolute;
            top: 2px;
        }
    </style>
</head>

<body>
    <img src="img/angel.gif" alt="">
    <script>
        //获取元素
        var str = document.querySelector('img');
        document.addEventListener('mousemove', function(e) {
            var x = e.pageX;
            var y = e.pageY;
            console.log('x坐标是' + x, 'y的坐标是' + y);
            //要给left top+个px
            str.style.left = x - 30 + 'px';
            str.style.top = y - 40 + 'px'
        })
    </script>
</body>

</html>