JavaScript事件
Posted tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript事件相关的知识，希望对你有一定的参考价值。
1. 事件含义
按钮点击、鼠标移动、按下快捷热键等操作 都属于事件。
2. 事件作用
根据用户的意愿去操作页面
3. 实现步骤
a. 给元素标签添加一个 onclick 属性. 例如 onclick = "函数名称()"
b. 完成函数要做事情
事件驱动机制的几部分:(了解) a. 事件源 b. 事件 c. 监听器 d. 注册/绑定监听器 案例: 警察抓小偷 a. 事件源（小偷） 专门产生事件的组件 b. 事件 （偷东西）由事件源所产生的动作或者事情 c. 监听器（警察） 专门处理 事件源 所产生的的事件 d. 注册/绑定监听器（让警察时刻盯着小偷） 让监听器时刻监听事件源是否有指定事件产生，如果有事件产生则调用监听器处理
具体代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function run1(){
alert("点了");
}
</script>
</head>
<body>
<!--
1.事件源： 按钮 button
2.事件: 点击 onclick
3.监听器: run1()方法
4.注册监听器: onclick="run1()"
-->
<input type="button" value="每次创建按钮都点我,好气哦" onclick="run1()" />
</body>
</html>
点击事件: 给单独的一个 标签,设置 onclick 属性即可，例如: onclick = "函数名称()";
1. 焦点含义
一个网页当中,元素的注意力.一般情况下一个页面只会存在一个焦点。
当元素获取到焦点的时候，表示用户目前正在操作这个元素了。
2. 焦点事件:
a. 获取焦点事件 onfocus="函数名称()"
b. 失去焦点事件 onblur="函数名称()"
域内容改变事件
onchange = "方法名称()"
加载完毕事件,应用场景: 当整个页面(window窗体)加载完毕之后,来获取元素的。
整个页面加载完的代码:
window.onload = function(){
//具体操作的代码
}
1. 绑定表单提交事件的操作
onsubmit = "return 方法名称()"
2. 关于 onsubmit 属性接收的 true和false值的含义:
a. 如果返回 true 允许表单提交.
b. 如果返回 false 阻止表单提交.
关于 键位操作的事件:
a. onkeydown 某个键盘的键 被按下
b. onkeypress 某给键盘的按键 被按下或按住
c. onkeyup 某个键盘的按键 被松开
关于 常用鼠标 的事件:
a. onmousedown 某个鼠标按键被按下
b. onmousemove 鼠标被移动
c. onmouseout 鼠标从某个元素移开
d. onmouseover 鼠标被移到某个元素之上
e. onmouseup 某个鼠标按键被松开
1. 句柄绑定的本质:
在标签上添加对应事件类型的属性,触发要执行的函数即可。
2. 句柄绑定事件. this参数含义
在句柄绑定事件当中,this参数 表示的是 当前的标签元素对象.
3. 句柄绑定的优缺点
A. 优点:
a. 使用和传参方便
b. 可以绑定多个方法. 方法的执行顺序,就是绑定顺序
B. 缺点:
javascript代码和HTML代码 高度的耦合,不利于团队开发.
1. DOM绑定的本质
通过DOM方式获取元素对象,调用元素对象对应事件类型的属性来绑定事件,触发要执行的函数。
2. DOM绑定方式优缺点
A. 优点:
使得 HTML 代码和 JS 代码完全分离
B. 缺点:
a. 不能传递参数 （解决方案: 匿名函数是可以的）
b. 一个事件只能绑定一个函数 （解决方案： 匿名函数内部是可以绑定多个函数）
以上是关于JavaScript事件的主要内容，如果未能解决你的问题，请参考以下文章
VSCode自定义代码片段12——JavaScript的Promise对象
是否可以使用 Javascript 在音频文件中找到一段无声的片段？
Android 事件分发事件分发源码分析 ( Activity 中各层级的事件传递 | Activity -＞ PhoneWindow -＞ DecorView -＞ ViewGroup )(代码片段