JavaScript 事件

guokanglun

于 2020-01-21 16:29:54 发布

阅读量436

点赞数 1

分类专栏： JavaScript基础知识

本文链接：https://blog.csdn.net/gklcsdn/article/details/104063205

版权

JavaScript基础知识专栏收录该内容

59 篇文章 0 订阅

订阅专栏

文章目录

1. 事件作用

JavaScript 通过事件检测用户行为

2. 鼠标事件

onclick：点击鼠标左键触发
oncontextmenu：点击鼠标右键触发
ondblclink：左键双击
onmousedown：鼠标任意键按住时触发
onmouseup：鼠标任意键抬起时触发
onmouseenter：鼠标进去元素时触发
onmousemove：鼠标在元素上移动触发
onmouseleave：鼠标离开元素触发

onclick = onmousedown + onmouseup

触发：

box.click() // 触发点击事件
input.select()   // input文本选中
...

3. 滚轮事件

onmousewheel：鼠标滚轮在元素上滚动触发

event参数最最重要的事就event.wheelDelta属性，表示滚动的方向。这是浏览器的规定：

鼠标往上滚， 120

鼠标往下滚， -120

4. 键盘事件（document）

onkeydown：按住键盘上任意键触发
onkeyup：按键抬起触发
onkeypress ：输入键触发，功能键不触发
可编辑盒子使用键盘事件（表单或者通过contenteditable属性使容器处于可编辑状态）
https://blog.csdn.net/gklcsdn/article/details/108687646
或者使用document.onkeydown 使用键盘事件

按键码：
event.keyCode 左上右下键对应的keyCode 为37,38,39,40
Enter键对应的keyCode` 为13

6. window 事件

onresize：窗口大小改变时触发
onscroll：页面滚动时触发
onload：页面或者图片加载完成时触发
onerror：页面加载错误后触发

7. 表单事件

onfocus ：获取焦点后
onblur ：失去焦点
onchange：内容发生改变
oninput ：实时改变刷新
onreset : 重置后
onselect ：选择后
onsubmit : 提交后

8. dom 0级事件绑定

oBox.onclick = function(){
	...
}
/*===================================*/
oBox.onclick = fn;

function fn(){}

9. dom 0级绑定事件处理函数次数

返回后一个事件绑定的值；打印2

oBox.onclick = function(){
	console.log(1)
}

oBox.onclick = function(){
	console.log(2)
}

10. 解除事件绑定

oBox.onclick = null;

// 使用
oBox.onclick = function(){
	console.log(1);
	this.onclick = null;
}

/*=============================*/

var bol = true;
oBox.onclick = function(){
	if(!bol) return;
	console.log(1);
	bol = false;
}

11. 点击事件的对应和排他

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        ul {
            width: 500px;
            height: 100px;
            border: 2px solid black;
            margin: 10px 10px;
            display: flex;
            justify-content: space-around;
        }
        
        li {
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>

<body>
    <ul id="wrap1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <ul id="wrap2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

    <script>
        var oUl1Li = document.querySelectorAll('#wrap1 li');
        var oUl2Li = document.querySelectorAll('#wrap2 li');
        // 信号量控制点击的li
        var num = 0;
        for (let i = 0; i < oUl1Li.length; i++) {
            oUl1Li[i].onclick = function() {
                oUl2Li[num].style.backgroundColor = 'pink';
                num = i;
                oUl2Li[num].style.backgroundColor = 'green';
            }
        }
    </script>
</body>

</html>

在这里插入图片描述

12. Dom 2级事件绑定

三个参数：事件、函数、是否监听捕获阶段。

第1个参数： click、mouseover 、mouseout

第2个参数：函数可以是匿名函数，也可以是有名函数

第3个参数：布尔值(默认false，可以省略)，true表示监听捕获、false表示监听冒泡阶段

oBox.addEventListener("click", function(){
    consloe.log(1);
}, false)

this 指向box

dom 0级事件只能绑定一个；
dom 2级事件可以绑定多个

// 不会覆盖，11,22 都会打印
oBox.addEventListener("click", function(){
    alert(11);
}, false);

oBox.addEventListener("click", function(){
    alert(22);
}, false);

13. dom 2级事件绑定解绑

oBox.addEventListener("click", fn, false);

// 解绑通过有名函数
oBox.removeEventListener("click",fn, false);
function fn(){
    alert("哈哈");
}

14. 事件处理模型

当一个dom节点触发事件后，该事件会按照HTML结构在根节点和这个元素节点之间传播，路径上所有的节点都会收到该事件

事件流就是当你单击了某个元素，单击事件不仅仅发生在这个元素上，你也单击了它的父元素、父元素的父元素、……它的祖先元素，甚至单击了整个页面。

冒泡：子级向父级执行顺序
捕获：父级向子级

15. dom 0级事件绑定（捕获冒泡）

oDiv.onclick = function(){
}

dom 0级事件绑定只能监听冒泡过程（子级向父级）

在这里插入图片描述

        wrap1.onclick = function() {
            console.log(1)
        }
        wrap2.onclick = function() {
            console.log(2)
        }
        wrap3.onclick = function() {
            console.log(3)
        }

点击box3 打印 321

15. dom 2级事件绑定（捕获冒泡）

oBox.addEventListener(“click”,function(){

},false);

第1个参数：事件名不用写on， click、mouseover 、mouseout

第2个参数：函数可以是匿名函数，也可以是有名函数

第3个参数：布尔值，true表示监听捕获、false表示监听冒泡阶段

在这里插入图片描述

        wrap1.addEventListener('click', function() {
            console.log(1);
        }, false)
        wrap2.addEventListener('click', function() {
            console.log(2);
        }, false)
        wrap3.addEventListener('click', function() {
            console.log(3);
        }, false)

        wrap1.addEventListener('click', function() {
            console.log("a");
        }, true)
        wrap2.addEventListener('click', function() {
            console.log("b");
        }, true)
        wrap3.addEventListener('click', function() {
            console.log('c');
        }, true)

点击box3 打印 ab3c21

先执行捕获阶段再执行冒泡阶段；
事件源box3只有冒泡阶段，谁在前面先执行谁

DOM 0级的方式，只能监听冒泡阶段。不能有同名的事件，会覆盖。
this是触发事件的这个元素。
高版本浏览器会冒泡到window，
低版本浏览器冒泡到document。

DOM 2级的方法，addEventListener()，
可以自由设置冒泡、捕获。第三个参数: true就是捕获，false就是冒泡。
事件名不加on，可以有同名事件，会顺序执行，不覆盖。
this是触发事件的这个元素。
事件会冒泡到window。

16. 事件对象

任何的事件处理函数，我们的浏览器、JS引擎会默认往里面传一个实参，就是事件对象。

通常用形参event来接收：

oDiv.onclick = function(event){
	console.log(event);
}

1. 通用事件对象属性和方法

event.type 返回事件的类型，没有on，比如”click”
event.target 返回点击的元素
event.currentTarget 返回自己，this一定和event.currentTarget是一个元素
event.button 区分左键0,中间1,右键2

阻止冒泡

event.stopPropagation();   // 停止传播事件流

阻止默认事件

右键出菜单图片拖动 a标签跳转表单提交这些网页的默认事件

preventDefault() 阻止默认事件

//阻止右键事件（默认事件）
oBox.oncontextmenu = function(ev){
     ev.preventDefault();
}

event.preventDefault();

2. 事件对象上储存的常用信息

clientX/clientY 鼠标距离浏览器左上角的水平/竖直距离
pageX/pageY 鼠标距离页面左上角的水平/竖直距离
offsetX/offsetY 鼠标距离触发事件的元素左上角的水平/竖直距离
layerX/layerY 鼠标距离定位元素左上角的水平/竖直距离
screenX/screenY 鼠标距离计算机屏幕左上角的水平/竖直距离

17. 事件委托

利用事件冒泡的原理把子级的事件委托给祖先元素,然后通过事件源确定,事件发生在那个子元素上

然后给对应的子元素添加响应的处理程序

优点:

不需要循环绑定每个子元素，可以节约浏览器性能
添加新的子元素时，不需要再给新元素绑定事件

在这里插入图片描述

     wrap.onclick = function(event) {
         event.target.style.backgroundColor = 'blueviolet';
         if (event.target.nodeName == 'LI') {
             event.target.style.backgroundColor = 'red';
         }
     }

guokanglun

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 事件

文章目录1. 事件作用2. 鼠标事件3. 滚轮事件4. 键盘事件5. 资源事件6. window 事件1. 事件作用JavaScript 通过事件检测用户行为2. 鼠标事件 onclick：点击鼠标左键触发 onmousedown：鼠标任意键按住时触发 onmouseup：鼠标任意键抬起时触发 oncontextmenu：点击鼠标右键触发 onmouseenter：...
复制链接

扫一扫