javascript的事件介绍

最新推荐文章于 2024-04-25 20:29:33 发布

南风知我意℡

最新推荐文章于 2024-04-25 20:29:33 发布

阅读量207

点赞数 1

分类专栏： html 文章标签： javascript

本文链接：https://blog.csdn.net/SouthWindKnowMe/article/details/106788239

版权

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

你的点赞就是继续前行的动力，嘻嘻!

文章目录

事件概述

事件：是可以被js检测到的行为，实质上是一种交互操作。
例如：我们可以给某按钮添加一个【onClick点击事件】，当用户对按钮发生点击时来触发某个函数。

事件的作用：
(1)各个元素之间可以借助事件来进行交互
(2)用户和页面之间也可以通过事件来交互
(3)后端和页面之间也可以通过事件来交互（减缓服务器的压力）

ps：注意：事件通常与函数配合使用，当事件发生时函数才会执行。
2. 事件传递
js中规定：
事件不仅能够和触发者交互，还会在特定的情况下沿着dom tree逐级传递，和dom tree中的各个节点进行交互。而js中的这种机制被称为事件传递机制。

事件传递方式主要分两种：事件冒泡、事件捕获

事件冒泡（IE提出）
事件从最具体的元素开始，沿着DOM树逐级向上依次触发，直至最不具体的元素停止。

事件捕获
事件从最不具体的元素开始，沿着DOM树逐级向下依次触发，直至达到最具体的元素停止。

二、事件绑定

2.1HTML事件

绑定操作发生在HTML代码中的事件，称为HTML事件。

语法：on+事件=‘函数();函数();函数();……‘

例如：

在上述HTML代码中，分别给d1和d2绑定了效果不同的HTML事件。

ps：HTML事件采用冒泡机制来处理事件。即
点击d2时会先执行d2的绑定事件（即执行test2函数）。
然后采用事件冒泡将事件传递给上一级DOM节点d1，然后d1执行自己的绑定事件。
pss：函数执行的顺序按照绑定事件时函数的顺序为准

HTML事件的移除方式：
元素.setAttribute(‘on+事件名’，null);
eg:d1.setAttribute(‘onclick’,null);

HTML事件缺陷：耦合性太强了，修改一处另一处也要修改。
当函数没有加载成功时，用户去触发事件，则会报错。

2.2 DOM0级事件

在js脚本中，直接通过【on+事件名】方式绑定的事件称为是DOM0级事件。

语法：元素.on+事件名  = function(){需要执行的语句;}

例如：
btn.onclick = function () {console.log(‘按钮被点击’);};

ps：以冒泡机制来处理事件，不存在兼容的问题

DOM0级事件的移除方式：
元素. on+事件名=null;
eg:btn.οnclick=null;

DOM0级事件缺陷：
一次只能绑定一个触发函数。如果同时绑定多个触发函数，则以最后一个为准。

btn.onclick = function () {console.log(‘按钮被点击11111’);};
btn.onclick = function () {console.log(‘按钮被点击22222’);};
btn.onclick = function () {console.log(‘按钮被点击66666’);};

点击按钮触发函数是最后一个，输出66666。

2.3 DOM2级事件

在js脚本中，通过addEventListener函数绑定的事件称为是DOM2级事件。

语法：元素.addEventListener(type,listener,useCapture)

	type:事件类型。【没有on！没有on！没有on！】
	listener:监听函数，绑定的函数
	useCapture:是否使用捕获机制。如果不写，默认值为false
	false:冒泡机制
	true：捕获机制
	注意:DOM2级事件可以绑定多个函数，执行顺序按照函数书写的顺序。

例如：
	btn.addEventListener('click',function() {console.log('d2');},true);
	btn.addEventListener('click',function() {console.log('d22');},true);

上述代码表示给btn节点添加了两个dom2级点击事件。事件传递采用事件捕获方式传递。

DOM2级事件的移除方式：
node.removeEventListener(type,外部函数名,useCapture)
eg：btn.removeEventListener(‘click’,test,true);

ps：DOM2级事件中如果绑定函数为【匿名函数】则无法删除。能够删除的只能是外部函数。
//绑定匿名函数
d1.removeEventListener(‘click’,function () {console.log(‘d1’);},true); //绑定外部函数 function test() {console.log(‘d1’);} d1.addEventListener(‘click’,test,true); d1.removeEventListener(‘click’,test,true);

pss：第三个参数默认可以不写，默认是false。但是如果删除的是捕获事件，则必须写为true才可以。

三、鼠标事件

鼠标单击触发：click
鼠标双击触发：dblclick
鼠标按下时触发：mousedown
鼠标抬起时触发：mouseup
鼠标移动时触发：mousemove

鼠标移入时触发(不冒泡)： mouseenter
鼠标移出时触发(不冒泡)： mouseleave
鼠标移入时触发(冒泡)： mouseover
鼠标移出时触发(冒泡)： mouseout

语法：元素.on+鼠标事件名称 = 调用函数
例如：d1.ondblclick = function () { console.log(‘这是d1’);};

a.鼠标的基本事件默认采用冒泡传递
b.可以给一个元素添加多个不同的鼠标事件，不同的鼠标事件之间互不影响
c.mouseenter和mouseleave两个事件不冒泡触发。

四、焦点事件

焦点：js当前正在和用户发生交互的节点称为焦点。可以类比为人类目光汇聚的地方。
语法：获得焦点和失去焦点事件既可以使用DOM0绑定也可以使用DOM2绑定

i1.addEventListener(‘focus’, function () {console.log(‘i1捕获事件’);}, true);
i1.addEventListener(‘blur’, function () {console.log(‘i1捕获事件’);}, true);
i2.onfocus = function () {console.log(“i2获得了焦点”)};
i2.onblur = function () {console.log(“i2失去了焦点”)};

注意：
这两个事件均不支持事件冒泡(只有当前节点发生调用)。
如果需要连续多次的触发，则需要使用DOM2级绑定事件中的捕获事件来达到

案例：用来判断输入框内的东西是否满足要求
‘’’

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson1</title>
    <style>
        .colorRed{  color:red;  }
        .colorGreen{  color:green;  }
        .borderRed{  border:2px solid red;  }
        .borderGreen{  border:2px solid green;  }
    </style>
</head>
<body>

<span>用户名：</span>
<input type="text" class="userName"/>
<span class="userNameSpan"></span>
<br/>
<button>获得焦点</button>

<script>
    var userNameInput = document.querySelector('.userName');
    var userNameSpan = document.querySelector('.userNameSpan');
    var btn = document.querySelector('button');

    btn.onclick = function () {
        userNameInput.focus();//当按钮点击的时候，主动让input获得焦点。
        userNameInput.blur();
        userNameInput.focus();
    };

    userNameInput.onblur = function () {
        if(userNameInput.value.length == 11){
            userNameSpan.innerHTML = '正确';
            /*只要是系统提供的属性，大多在js中可以直接访问*/
            userNameInput.className = 'borderGreen';
            userNameSpan.className = 'colorGreen';
        }else{
            userNameSpan.innerHTML = '请输入11位正确手机号';
            userNameInput.className = 'borderRed';
            userNameSpan.className = 'colorRed';
        }
    };

</script>
</body>
</html>

五、滚动事件

scroll事件会在【文档】或【元素】发生滚动操作时触发。

【文档发生滚动时】
属性scrollTop\scrollLeft表示文档滚动的距离:(没有单位)

IE：document.documentElement.scrollTop\Left
非IE：document.body.scrollTop\Left

（可以使用document.body.scrollTop||document.documentElement.scrollTop来解决兼容性）

例：

window.onscroll = function () {
	var top = document.body.scrollTop||document.documentElement.scrollTop;
	var left = document.body.scrollLeft||document.documentElement.scrollLeft;
	console.log('top:'+top+'left:'+left);
	};

【元素发生滚动时】

元素发生滚动时并不存在兼容性的问题，但是需要有一个前提那就是：必须存在滚动条。
(元素的滚动条属性可以同过overflow:scroll/overflow-x:scroll/overflow-y:scroll来实现)

在元素发生滚动的时候，可以通过【元素.scrollTop/scrollLeft】获取到元素的位移距离。

例如：

var div =  document.querySelector('div');
	div.onscroll = function () {
	console.log(div.scrollTop);
	};

当然，上述例子中div必须得有内容，而且还要保证内容高度要大于实际高度才行。

//css代码
	body {  height: 2000px; width: 2000px;  }

//html代码
<p class="p1">点击一下</p>

//js代码
var p1= document.querySelector('.p1');
p1.onclick = function () {
document.body.scrollLeft = 2000;
document.body.scrollTop = 2000;
};

完成的功能，点击这个div块之后就会跳到页面的右下角。

六、键盘事件

6.1 介绍

键盘事件是指当用户在操作键盘的时候会自动被触发的事件，通常有以下三种：
(1) keydown:用户按下任意键都可以触发这个事件。如果按住不放，事件会被连续触发。
(2) keypress:用户按下任意键都可以触发这个事件(功能键除外)。如果按住不放，事件会被连续触发
(3) keyup: 用户释放按键时触发

ps：键盘事件一般绑定在需要用户输入的元素上(例如input)，但是由于键盘事件默认采用事件冒泡机制，因此将键盘事件直接绑定在body之上也是允许的。

6.2 属性

在键盘事件中可以通过event.keycode来获取按下按键的编码值。

input1.onkeydown = function () {
console.log("down:"+event.keyCode);
};

ps：因此我们可以通过这个属性来获取到，在页面中用户曾按下过哪些按键。
pss：常见的按键编码【回车：13】【backspace：8】
3.keydown和keypress事件的区别
(1)keyPress主要用来捕获：数字(包括Shift+数字的符号)、字母（包括大小写）、小键盘等能够显示在屏幕中的字符。但是不能对系统功能键(例如：后退、删除等，其中对中文输入法不能有效响应)进行正常的响应
而KeyDown和KeyUp通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键）

(2)捕获字符长度区别
KeyPress只能捕获单个字符
KeyDown和KeyUp可以捕获组合键。

(3)捕获字符大小写识别区别
KeyPress可以捕获单个字符的大小写
KeyDown和KeyUp对于单个字符捕获的KeyCode都是一个值，也就是不能判断单个字符的大小写。

(4)捕获字符数字区别
KeyPress不区分小键盘和主键盘的数字字符。
KeyDown和KeyUp区分小键盘和主键盘的数字字符。
常见字符的按键编码

七、手机触摸事件

7.1 手机触摸事件

(1)touchstart:当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。 (2)touchmove:当手指在屏幕上滑动时连续的触发。
(3)touchend:当手指从屏幕上移开时触发。 (4)*touchcancel:当系统停止跟踪触摸时触发。(如电话接入或者弹出信息,一般在这个操作中来做一些暂停游戏类的操作)

div.addEventListener('touchstart',function () {console.log("touches began");}); 
div.addEventListener('touchend',function () {console.log("touches end");});
div.addEventListener('touchmove',function (event) {console.log("touches move");});
div.addEventListener('touchcancel',function(event){console.log("cancel");});

ps：如非特殊说明，事件均为冒泡事件
pss：手机触摸事件必须使用dom2来进行绑定
psss：可以给一个元素添加多个触摸事件

7.2 事件对象的属性

事件对象，即【事件触发的时】用来保存【事件相关的所有信息的对象】。
事件对象基本都是系统为我们自动生成，不必手动创建。
以上事件都存在事件对象：
div.addEventListener(‘touchstart’,
function (event) {
console.log(“touches began”);
}
);
(1)touches:表示当前跟踪的触摸操作的Touch对象的数组(当前屏幕上所有的触摸点列表)。
(2)targetTouches:特定于事件目标的Touch对象的数组(当前对象上所有的触摸点列表)。
(3)changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组（涉及当前事件的触摸点列表）。

7.3 触摸对象的属性

触摸对象，即【事件对象的touches属性】中的每一个元素。
一次触摸会创建一个触摸对象。

触摸对象中提供了很多属性方便我们获取和使用：
clientX:触摸目标在视口中的X坐标。
clientY:触摸目标在视口中的Y坐标。
identifier：表示触摸的唯一ID。
pageX：触摸目标在页面中的x坐标
pageY：触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触摸的DOM节点坐标

通常情况下都会在触摸事件被触发的时候，通过这两个属性来获取当前节点的位置。

7.4 this对象

概念：this代表【函数运行时】【自动生成的】一个【用来指代函数调用者】的对象，this只能在函数内部使用。

eg：

function test(){
			console.log(this);
		}
		test();//指向window，因为函数的调用者默认是window
		document.addEventListener(‘click’,test);//指向document节点
		document.querySelector(‘div’).addEventListener(‘click’,test);//指向div节点

根本原则：函数的调用者是谁，this就是谁

八、event事件

8.1概念

当dom tree中某个事件被触发的时候，会同时自动产生一个用来描述事件所有的相关信息（比如出发事件的元素、或者是事件的类型）的对象，这个对象就是event（事件对象）。

获取方式：
(1)直接通过event来获取
(2)还可以通过函数传参数的形式来使用，一般而言我们使用【形参e或eve】来代替

document.querySelector("#d1").onclick = function(e){
	console.log(e);
};
document.querySelector("#d1").onmousemove = function(eve){
	console.log(eve);
};
document.querySelector("#d1").onclick = function(){
	console.log(event);
};

8.2 event 属性

【type属性】
type属性用来获得【当前触发事件】的类型，此属性只读。

document.getElementById(“d1”).onclick = function () {
console.log(event);
console.log(event.type); //依赖于事件的触发而存在，只读属性
};

【bubbles 属性】
bubbles属性用来获得【当前触发事件的类型】是否冒泡，如果当前事件类型支持冒泡则返回true，否则返回false。

【eventPhase 属性】
eventPhase：事件传导至【当前节点】时处于什么的状态。
1：事件处于捕获状态
2：事件处于真正的触发者
3：事件处于冒泡状态

【target 属性和 currentTarget 属性】
target：返回事件真正的触发者
currentTarget：返回事件的监听者(触发的事件绑定到了哪个节点，就返回谁)

<div id="d1">d1
<div id="d2">d2</div>
</div>

document.getElementById("d1").onclick = function (e) {
console.log(e.target);
console.log(e.currentTarget);
};

为了在不同的浏览器下解决获取target的兼容性问题，可以采用如下的写法：
var target = eve.target || eve.srcElement

南风知我意℡

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript的事件介绍

你的点赞就是继续前行的动力，嘻嘻!文章目录事件概述二、事件绑定2.1HTML事件2.2 DOM0级事件2.3 DOM2级事件三、鼠标事件事件概述事件：是可以被js检测到的行为，实质上是一种交互操作。例如：我们可以给某按钮添加一个【onClick点击事件】，当用户对按钮发生点击时来触发某个函数。事件的作用：(1)各个元素之间可以借助事件来进行交互(2)用户和页面之间也可以通过事件来交互(3)后端和页面之间也可以通过事件来交互（减缓服务器的压力）ps：注意：事件通常与函数配合使用，当事件发
复制链接

扫一扫