001 学习目标第一期

最新推荐文章于 2024-05-28 15:11:27 发布

溪山行旅1024

最新推荐文章于 2024-05-28 15:11:27 发布

阅读量111

点赞数

分类专栏：一个半路出家的前端文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43190801/article/details/106895458

版权

一个半路出家的前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1）

一、元素注册事件的两种方式

添加事件两种方法：传统方法和监听注册方法

1、传统 btn.onclick = function() {

} 注册事件具有唯一性，一个元素智能处理一个函数也就是最后一个会覆盖前面的。

2 方法监听注册方式： addEventListener

eventTarfet.addEventListneer(type, listener[, useCapture])

type :事件类型字符串 click mouseover 不带on

listener ：时间处理函数，事件发生就调用

useCapture：可选参数，布尔值默认false。

同一元素同一事件可以条件多个监听器（事件处理函数）

二.删除事件的两种方式（解绑时间）

1、传统方式：Element.onclick = null ;

2、事件监听方式：eventTarget.removeEventListener(type,listener[, useCapture]);

三、DOM事件流

页面接收事件的顺序叫做事件流。

1、捕获阶段

2、当前目标阶段

3、冒泡阶段（没有冒泡事件 onblur 、 onfocus、 onmouseover、 onmouseleave）

JS代码中智能执行捕获或者冒泡其中的一个阶段。

四、事件对象

div.onclick = function (event) {

} //这个知识点没啥玩意儿 IE678不兼容通过windows。event

阻止对象默认行为

a.onclick = function() {

e.preventDefault(); // 三种方法

e.returnValuye; //低版本浏览器 IE678

returen false; //后面有代码便不再执行，限于传统注册方式

}

五、阻止冒泡事件

事件冒泡：开始后由最具体的元素接收，然后逐级向上传播

e.stopPropagation();

例如 ,点击下面的son对象则会弹出三个对话框，因为document>father>son 会从son往上冒泡，可是我们并不想

var  son = document.querySelector('.son')
    son.addEventListener('click',function(e)) {
    alert ('son');
},false);
var  father= document.querySelector('.father')
    father.addEventListener('click',function(e)) {
    alert ('father');
},false);

    document.addEventListener('click',function(e)) {
    alert ('document');
},false);

因此就要在son和father 里加上，e.stopPropagation();

var  son = document.querySelector('.son')
    son.addEventListener('click',function(e)) {
    alert ('son');
    e.stopPropagation(); //阻值继续冒泡
},false);
var  father= document.querySelector('.father')
    father.addEventListener('click',function(e)) {
    alert ('father');
    e.stopPropagation(); //阻值继续冒泡
},false);

    document.addEventListener('click',function(e)) {
    alert ('document');
},false);

六、事件委托（代理、委派）

例子,利用事件冒泡，在ul中设置事件监听器，这样只要点击里面的li就会触发事件，不需要给每个li添加事件监听，节约了DOM交互事件

七、常用鼠标和键盘事件

1、禁用鼠标右键菜单

document.addEventListener('contextmenu',function(e) {

e.preventDefault();

})

2、禁止鼠标选中（selectstrat）

document.addEventListener('selectstart',function(e) {

e.prevebtDefault();

})

指尖跟随天使

<style>
 img {
position:absolute;
 top :2px;
}    
</style>
<body>
    <img src= ""  alt= "" >
    <script>
        var pic = document.querySelector('img');
        document.addEventListener('mousemove' ,function(e) {
            var x = e.pageX;
            var y = e.pageY;
            console.log ('x的坐标是'+x,'y的坐标是'+y);
            pic.style.left = x+'px'; //千万不能忘了加px 的单位
            pic.style.right = y+'px';
    })
    </script>    
</body>

键盘事件：

onkeyup

onkeydown

onkeypress //不能识别 Ctrl shift 箭头等功能键其他的和上面一个同 区分大小写对应不同的码，而上面两个不

键盘ASCII码对用表参看： https://www.runoob.com/note/29592

溪山行旅1024

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
001 学习目标第一期

1）一、元素注册事件的两种方式添加事件两种方法：传统方法和监听注册方法1、传统 btn.onclick = function() {} 注册事件具有唯一性，一个元素智能处理一个函数也就是最后一个会覆盖前面的。2 方法监听注册方式： addEventListenereventTarfet.addEventListneer(type, listener[, useCapture])type :事件类型字符串 click mouseover 不带onlisten...
复制链接

扫一扫