标签：function 知识点 鼠标 触发 DOM 事件处理 window 事件

1.事件概念和事件三要素

​ 事件就是能被JS监听到的的行为。

​ 事件三要素：

​ 1.事件源：触发事件的源头，谁触发的事件谁就是事件源。

​ 2.事件类型：是哪种事件类型，如：鼠标事件，键盘事件…(click, dblclick, mouseover, mouseout…)

​ 3.事件处理函数：事件触发后执行的行为({}中会执行的代码)

2.this的指向

//事件中的this，指向事件源，即oBtn。
oBtn.onclick = function(){
    this.style.backgroundColor = '';
}

//普通函数中的this，指向window
function method(){
    console.log(this);
}

3.事件的绑定(事件注册)

1.DOM0级事件绑定
	语法：事件源.on事件类型 = 事件处理函数;
	缺点：不能给同一个对象的同一个事件进行多次绑定。
    优点：书写简单，兼容性好。
    
2.DOM2级事件（事件监听）
	语法：事件源.addEventListener("事件类型", 事件处理函数, 布尔值);第三参数可省。
	优点：可以给同一个对象的同一个事件进行多次绑定。
    缺点：兼容性不佳（IE低版本不支持该写法）

	IE低版本支持
    语法：事件源.attachEvent("on事件类型", 事件处理函数);只有两个参数。

4.事件的解绑

1.DOM0级事件解绑
	语法：事件源.on事件类型 = null;

2.DOM2级事件解绑
	语法：事件源.removeEventListener('事件类型', 事件处理函数);
	注意：先绑定再移除（函数在外面单独写）
		1.绑定：事件源.addEventListener('事件类型', fn);
		2.移除：事件源.removeEventListener('事件类型', fn);
	function fn(){};

5.事件类型

鼠标事件
click 单击
dblclick 双击
mouseover / mouseout 鼠标移入 / 鼠标移出
mouseenter / mouseleave 鼠标移入 / 鼠标移出
mousedown / mouseup 鼠标按下 / 鼠标弹起
mousemove 鼠标移动
contextmenu 鼠标右键

表单事件
focus 获得焦点时触发
blur 失去焦点时触发
input 输入内容时触发,输入的时候就触发
change 内容发生改变时触发,需要失去焦点一次，内容与初始状态发生了改变就触发。
submit 提交时触发
reset 重置时触发

键盘事件
	注意：不是任何元素都可以绑定键盘事件，window，document
    表单元素是可以绑定键盘事件的
keydown 按下键盘的按键触发，会连续触发。
keypress 按住键盘的按键触发，会连续触发。
keyup 当键盘中按下的按键弹起时触发。

浏览器事件
window.onscroll = function(){}; 页面滚动时触发
window.onresize = function(){}; 页面窗口大小变化时触发
window.onload = function(){}; 页面资源(图片，视频...)加载完成时触发

6.事件对象

​ 事件对象：

​ 事件对象中包含(记录)该事件发生时的一系列的信息。

​ 事件对象的获取：

​ 标准浏览器下的获取：

​ 事件处理函数的参数位置，书写一个参数，这个参数就是事件对象。

tianIn.onclick = function(e){ };//e就是事件对象

​ IE低版本获取：事件处理函数的内部用window.event来表示事件对象。

​ 处理兼容性问题：

tianIn.onclick = function(e){
    var ve = e || window.event;
    //ve就是兼容性的事件对象
}

​ 鼠标事件对象的一些属性：

1.鼠标点击位置距离页面的左偏移量和上偏移量
e.pageX 和 e.pageY

2.鼠标点击位置距离浏览器窗口的左偏移量和上偏移量
e.clientX 和 e.clientY

3.鼠标点击位置距离自身元素（事件源）的左偏移量和上偏移量
e.offsetX 和 e.offsetY

标签：function,知识点,鼠标,触发,DOM,事件处理,window,事件
来源： https://blog.csdn.net/qq_44153295/article/details/121951400

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。