JavaScript 基础（五）【事件】

女爷i 2023-07-19 08:19 18阅读 0赞

### 事件 ###

*  定义
 *   *  三种方式
 *  事件流
 *  事件对象
 *  事件
 *   *  用户行为
     *  浏览器行为

# 定义 #

事件就是用户或浏览器自身执行的某种动作，click、load、mouseover，都是事件的名字。而响应某个事件的函数就叫做事件处理程序，click的事件处理程序就是onclick,load事件处理程序就是onload

## 三种方式 ##

1、Html事件处理程序

在HTML中指定事件处理程序有两个缺点，一是存在时间差，如果页面已经出现了HTML元素，但是js还没加载完，这时候就会报错。还有就是会造成js代码与HTML代码耦合。

2、将一个函数赋值给一个事件处理程序属性

var btn = document.getElementById('mybtn');
    btn.onclick = function () { 
        alert(this.id);    //mybtn
    }
    可以使用 btn.onclick = null取消

3、添加事件监听

addEventListener()和 removeEventListener()。

所有DOM节点都包含这两个方法，并且它们都接收三个参数，要处理的事件名、事件处理函数、一个布尔值。最后一个参数如果是true，表示在捕获阶段调用，如果是false，表示在冒泡阶段调用。

# 事件流 #

同时点击多个元素时的事件触发顺序  
事件流包含三个阶段，事件捕获阶段、处于目标阶段和事件冒泡阶段。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hxYWlueW8_size_16_color_FFFFFF_t_70]

<div id="calldiv">
    	<p id="callp">
    		<span id="callspan">
    			sss
    		</span>
    	</p>
    </div>
    var mydiv = document.getElementById('calldiv');
    var myp = document.getElementById('callp');
    var myspan = document.getElementById('callspan');
    	
    mydiv.addEventListener('click', calldiv, true);
    myp.addEventListener('click', callp, true);
    myspan.addEventListener('click', callspan, true);
    function calldiv() { 
    	alert('div');
    }
    function callp() { 
    	alert('p')
    }
    function callspan() { 
    	alert('span')
    }

事件委托：也称事件代理 就是利用冒泡的原理 把加事件加到父级上，触发执行效果

# 事件对象 #

绑定的函数会默认传入一个事件对象，事件对象的currentTarget == this
    在元素标签中用onclick等绑定的事件没有事件对象，this == window
    event.preventDefault()：取消事件对象的默认动作。
    event.stopPropagation()/ event.cancelBubble = true：阻止事件传播。

# 事件 #

事件可以是用户行为，也可以是浏览器行为

## 用户行为 ##

鼠标事件

click：单击事件。
    dblclick：双击事件。
    mousedown：按下鼠标键时触发。
    mouseup：释放按下的鼠标键时触发。
    mousemove：鼠标移动事件。
    mouseover：移入事件。
    mouseout：移出事件。
    mouseenter：移入事件。
    mouseleave：移出事件。
    contextmenu：右键事件。

键盘事件

keydown：按键按下
    keyup：按键抬起
    keypress：按键按下抬起

HTML事件

load：文档加载完成
    select：被选中的时候
    change：内容被改变
    focus：得到光标
    resize：窗口尺寸变化
    scroll：滚动条移动

表单事件

onblur 元素失去焦点时触发
    onchange 该事件在表单元素的内容改变时触发
    onfocus 元素获取焦点时触发
    onfocusin 元素即将获取焦点时触发
    onfocusout 元素即将失去焦点时触发
    oninput 元素获取用户输入时触发
    onreset 表单重置时触发
    onsearch 用户向搜索域输入文本时触发 ( <input="search">)
    onselect 用户选取文本时触发 ( <input> 和 <textarea>)
    onsubmit 表单提交时触发

## 浏览器行为 ##

onload	页面加载完成后触发
    ononline 该事件在浏览器开始在线工作时触发。	 
    onoffline 该事件在浏览器开始离线工作时触发。	 
    onstorage 该事件在 Web Storage(HTML 5 Web 存储)更新时触发	 
    onwheel 该事件在鼠标滚轮在元素上下滚动时触发	
    transitionend 该事件在 CSS 完成过渡后触发。
    animationend 该事件在 CSS 动画结束播放时触发	 
    animationiteration 该事件在 CSS 动画重复播放时触发	 
    animationstart 该事件在 CSS 动画开始播放时触发

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hxYWlueW8_size_16_color_FFFFFF_t_70]: /images/20230528/f3123f4d8d504287a0eceb48b9c38652.png