事件处理
- Event对象
- 事件注册
- form对象
- 表单事件
一、Event对象
1.1、说明
1）、什么时候会产生Event对象？
当用户单击某个元素的时候，我们给这个元素注册的事件就会触发。事件的本质就是一个函数，而该函数的形参列表中第一个参数（argument[0]）就是event对象。
2）、Event对象干嘛用的？
event 对象代表事件的状态，而通过event对象我们可以获取一些相关参数，比如是谁（event.target）触发了此事件，当事件触发时鼠标的坐标（event.clientX、event.clientY）等
1.2、属性
1）、标准属性
- target：返回触发此事件的元素对象（事件的目标节点）。
- type： 返回被触发事件的的事件名。
- timeStamp：返回毫秒数（从页面加载完到事件触发），可以用来判断两个事件被触发的先后顺序
- bubbles： 返回布尔值，表示事件是否会冒泡
- cancelable： 返回布尔值，表示该事件是否可以通过preventDefault()取消执行函数
2）、鼠标键盘属性（当事件被触发时）
- altKey：“ALT” 是否被按下。【boolean】
- ctrlKey：“CTRL” 键是否被按下。【boolean】
- shiftKey：“SHIFT” 键是否被按下。【boolean】
- metaKey：“meta” 键是否被按下。【boolean】
- button：哪个鼠标按钮被点击。【number】
- clientX：鼠标指针的水平坐标。【number】
- clientY：鼠标指针的垂直坐标。【number】
1.3、方法
- initEvent()： 初始化新创建的 Event 对象的属性。
- preventDefault()：通知浏览器不要执行与事件关联的默认动作
1.4、使用
<body id="body">
<div id="out">
<p>重合就对了</p>
</div>
<script>
document.getElementById("out").onclick=function (event) {
let tag = event.target.tagName;//获取标签名
if (tag==="P") console.log("段落");
else console.log("盒子");
}
</script>
</body>
<!--
------------console---------------
段落
-->
二、事件注册
2.1、在DOM中直接绑定
将事件处理函数直接在对应的DOM元素中声明，当该元素触发该事件时，根据函数名执行对应的函数。
<input type="button" onclick="open()">
<script>
function open(){
alert("按钮被点击了");
}
</script>
2.2、在JS代码中绑定
通过匿名函数的方式将事件处理程序放在<Script></script>代码块中
<input type="button" id="input1">
<script>
document.getElementById("input1").onclick = function () {
alert("按钮被点击了");
}
</script>
2.3、绑定事件监听函数
通过元素的 addEventListener() 或 attachEvent() 方法来绑定事件监听函数。
- addEventListener()函数语法：
elementObj.addEventListener(eventName,handle,useCapture);
| 参数 | 参数说明 |
|---|---|
| elementObj | DOM对象，即事件触发的Element元素 |
| eventName | 事件名称（没有"on"） |
| handle | 函数名，即对应的事件处理函数 |
| useCapture | boolean值，用于判断是否捕获(给false就完事了)。详情----JS事件流 |
- attachEvent()函数语法：
elementObj.attachEvent(eventName,handle);
| 参数 | 参数说明 |
|---|---|
| elementObj | DOM对象，即事件触发的Element元素 |
| eventName | 事件名称（有"on"） |
| handle | 函数名，即对应的事件处理函数 |
三种绑定事件的区别；
第一种：测试的时候可以用一用，其他时候尽量不要用。同一个元素绑定多个“onclick”事件，只执行第一个
第二种：做到了行为与结构分离，但是仍然不能解决冒泡问题。同一个元素定义多个“onclick”事件处理函数，只执行最后一个
第三种：可以绑定多次同一个事件，且都会执行，可以取消捕获。推荐使用
2.4、事件句柄
可以插入到HTML标签中为其定义事件的属性
| 属性 | 此事件发生在何时… |
|---|---|
| onabort | 图像的加载被中断。 |
| onblur | 元素失去焦点。 |
| onchange | 域的内容被改变。 |
| onclick | 当用户点击某个对象时调用的事件句柄。 |
| ondblclick | 当用户双击某个对象时调用的事件句柄。 |
| onerror | 在加载文档或图像时发生错误。 |
| onfocus | 元素获得焦点。 |
| onkeydown | 某个键盘按键被按下。 |
| onkeypress | 某个键盘按键被按下并松开。 |
| onkeyup | 某个键盘按键被松开。 |
| onload | 一张页面或一幅图像完成加载。 |
| onmousedown | 鼠标按钮被按下。 |
| onmousemove | 鼠标被移动。 |
| onmouseout | 鼠标从某元素移开。 |
| onmouseover | 鼠标移到某元素之上。 |
| onmouseup | 鼠标按键被松开。 |
| onreset | 重置按钮被点击。 |
| onresize | 窗口或框架被重新调整大小。 |
| onselect | 文本被选中。 |
| onsubmit | 确认按钮被点击。 |
| onunload | 用户退出页面。 |
三、form对象
3.1、属性
- id：设置（返回）表单的id属性
- name：设置表单的name属性。【String】
- length：返回表单种的元素个数（一级）
- action：设置表单数据提交的地址（URL）。【String】
- encoding：
- method：指定表单数据发送前的编码格式
- target：规定在哪里打开action、URL。 (_blank、__self、_parent、__top)
3.2、方法
- reset（）：把表单的所有输入元素重置为它们的默认值。
- submit（）：提交表单。
3.3、使用
<form action="#" id="out">
用户名：<input type="text" name = "user"><br/>
密码：<input type="password" name="passwd">
</form>
<script>
var out = document.getElementById("out");
out.action = "http://www.baidu.com/";
console.log(out.user.type);
console.log(out.passwd.type);
setTimeout(out.submit(),5000);//5秒后跳转
</script>
四、表单事件
4.1、提交、重置按钮
每个form元素都有一个onsubmit事件处理程序来侦测表单提交，一个onreset事件处理程序来侦测表单重置。且这两个事件处理程序不能通过调用submit()与reset()方法来触发，只能通过单击提交或重置按钮来触发
如果在onsubmit或者onreset事件处理程序里面return false会取消表单提交或表单重置
document.forms[0].onsubmit=function () {
return false;//取消表单提交
};
document.forms[0].onreset=function () {
return false;//取消表单重置
};
4.2、普通按钮
<input type="button">按钮和<button type="button"></button>按钮本身是没有任何用处的，除非给它注册一些事件处理程序。如onclick事件、onmouseover事件等。
需要注意的是，input定义的按钮会将value属性的值以纯文本展示出来，而button定义的按钮，会将两个标签中的内容全部展示出来，可以说button按钮是包含input按钮的，且功能更强大
4.3、开关按钮
单选按钮和复选按钮都属于开关按钮。开关按钮本身不显示任何文本，这意味着改变其value值不会产生任何视觉效果，只会改变其提交表单时发送的字符串。（为了视觉效果，开关按钮通常与<lable>标签连用）
- 事件
- onclick
- 属性
- checked：指示元素当前是否被选中
- defaultChecked：HTML元素的checked的值，指示两个按钮的初始状态
4.4、文本域
text、Textarea、password、file都属于文本域。
- 事件
- onblur：当文本框失去焦点时触发
- onfocus：文本框获得焦点时触发
- onchange：用户更改文本框内的文本且将焦点移出文本框时触发
- 属性
- readonly：使文本框的内容不能被修改（只读）
- value：获得文本框中的文本，file文件的value属性是只读的
placeholder：指定了文本框内的提示信息，在用户输入后消失。
- 方法
- focus()：使文本框获得焦点
- select()：选中文本框内容
4.5、选择框和选项元素
- 事件
- onchange
- 属性
- Select——delectedIndex：被选中元素的下标
- Option——text：对应下拉列表中显示的文本（可读/写）
- Select——value：指定了提交表单时发送的字符串。
五、键盘鼠标事件
5.1、键盘事件
- 事件
- keydown： 当用户再键盘上按下按键时触发
- keyup：当用户再键盘上释放按键时触发
- 属性
- key： 返回被按下键对应的的字符串（如：a—“a”、Tab—“Tab”）
- keyCode：返回被按下键的Unicode编码值（无视大小写：字母：65-90、数字：48-57、…）
5.2、鼠标事件
- onmousedown： 鼠标（左键/右键）按下时触发
- onmouseup： 鼠标（左键/右键）弹起时触发
- onclick： 单击鼠标左键或者按下键盘Enter键时触发
- ondblclick： 双击鼠标左键时触发
- onmouseover： 鼠标移入目标元素上方时触发
- onmouseout： 鼠标移出目标元素上方时触发
- onmouseenter： 鼠标移入目标元素上方时触发（不会冒泡）
- onmouseleave：鼠标移出目标元素上方时触发（不会冒泡）
- onmousemove： 鼠标在元素内部移动时不断触发
3781
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
