前端的第二十天(DOM、事件高级)

前端的第二十天(DOM、事件高级)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

一、事件高级

在这里插入图片描述

1.注册事件(绑定事件)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.删除事件(解绑事件)

在这里插入图片描述
在这里插入图片描述

3.DOM事件流

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.事件对象

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5.阻止事件冒泡

在这里插入图片描述
在这里插入图片描述

6.事件委托(代理、委派)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

7.常用的鼠标事件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

    <style>
        img {
    
    
            position:absolute;
        }
    </style>
</head>
<body>
    <img src="./images/angel.gif" alt="" title="菜菜宝贝">
    <script>
        var src = document.querySelector('img');
        document.addEventListener('mousemove',function(e){
    
    
            var x = e.pageX;
            var y = e.pageY;
            src.style.left = x - 48 + 'px';
            src.style.top = y - 40 + 'px';
        })
    </script>

8.常用的键盘事件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

var search = document.querySelector('input');
document.addEventListener('keyup', function(e) {
    
    
// console.log(e.keyCode);
if (e.keyCode === 83) {
    
    
search.focus();
}
})

在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/m0_56901161/article/details/121522167
今日推荐