9.事件
事件:用户操作页面元素时,可以被JS侦测到的行为,如单击、双击等
9.1 JS中的事件绑定
事件绑定:JS侦测到用户触发的事件后,执行一段代码,即给某一个标签的特定事件绑定一个函数
9.1.1.标签的事件属性
- 所有标签都有的事件属性
单击事件:onclick
双击事件:ondblclick
鼠标移入事件:onmouseover
鼠标移出事件:onmouseout
鼠标按下事件:onmousedown
鼠标弹起事件:onmouseup
鼠标移动事件:onmousemove
- body标签
页面加载完毕事件:onload
//通常在该事件中定义只需要执行1次的代码
- form标签相关事件
- input标签事件
获取焦点事件:onfocus
失去焦点事件:onblur
值改变事件:onchange- form表单事件
表单提交事件:onsubmit
- 给标签绑定事件
- 示例
<h1 onclick="handleClick()">h1_1</h1>
<h1 ondblclick="handleDblClick()">h1_2</h1>
<h1 onmouseover="handleMouseOver()">h1_3</h1>
<h1 onmouseout="handleMouseOut()">h1_4</h1>
<h1 onmousedown="handleKeyDown()">h1_5</h1>
<h1 onmouseup="handleMouseUp()">h1_6</h1>
<h1 onmousemove="handleMouseMove()">h1_7</h1>
<script type="text/javascript">
function handleClick(){
console.log("单击");
}
function handleDblClick(){
console.log("双击");
}
function handleMouseOver(){
console.log("鼠标移入");
}
function handleMouseOut(){
console.log("鼠标移出");
}
function handleMouseDown(){
console.log("鼠标按下");
}
function handleMouseUp(){
console.log("鼠标弹起");
}
function handleMouseMove(){
console.log("鼠标移动");
}
</script>
<form action="" onsubmit="handleSubmit()">
数据: <input type="text" onfocus="handleFocus()" onblur="handleBlur()" onchange="handleChange()"> <br>
<input type="submit" value="提交"/>
</form>
<script type="text/javascript">
function handleFocus(){
console.log("获取焦点");
}
function handleBlur(){
console.log("失去焦点");
}
function handleChange(){
console.log("值发生改变");
}
function handleSubmit(){
// console.log("submit");
alert("submit");
}
</script>
9.2 事件对象
事件对象:在用户触发标签的一个事件时,同时会产生包含事件详细信息的对象。通过事件对象可以获取发生事件的标签、事件的类型、事件的位置等等信息.
<!--
1. 事件属性中,调用函数必须传入名为event的实参
-->
<input type="button" value="单击" onclick="handleClick(event)">
<script type="text/javascript">
/*
2. 函数要定义形参接收事件对象
*/
function handleClick(e){
console.log("click");
//e接收事件对象event
console.log(e.target);//发生事件的标签
console.log(e.type);//事件的类型
//获取事件发生的位置 clientX 在x轴(水平方向)距左上角的距离
// clientY 在y轴(竖直方向)距左上角的距离
console.log(e.clientX);
console.log(e.clientY);
}
</script>
9.3 事件函数中的this
直接在函数中使用this,this并不是触发事件的标签。
<input type="button" value="单击" onclick="handleClick()">
<script type="text/javascript">
function handleClick(){
console.log("click");
console.log(this);//window对象,不是input
}
</script>
如何在函数中获取触发事件的标签对象?
- 1.使用事件对象
<input type="button" value="单击" onclick="handleClick(event)">
<script type="text/javascript">
function handleClick(e){
console.log("click");
console.log(this);
console.log(e.target);
}
</script>
- 2.使用this
<input type="button" value="单击" onclick="handleClick(this)">
<script type="text/javascript">
function handleClick(t){
console.log("click");
console.log(this);
console.log(t);
}
</script>
9.4 事件冒泡
父标签包含子标签,子标签所在的区域是父标签的一部分。触发子标签的事件也会级联触发父标签的事件。
事件冒泡是现行的标准。
单击li会触发ul的单击事件。
<ul onclick="handleUlClick()">
<li onclick="handleLiClick()">桃子</li>
<li onclick="handleLiClick()">李子</li>
<li onclick="handleLiClick()">梨子</li>
</ul>
<script type="text/javascript">
function handleLiClick(e){
console.log("li click");
}
function handleUlClick(e){
console.log("ul click");
}
</script>
事件冒泡的价值:可以在父标签统一处理子标签的事件
<ul onclick="handleUlClick(event)">
<li >桃子</li>
<li >李子</li>
<li >梨子</li>
</ul>
<script type="text/javascript">
function handleLiClick(){
console.log("li click");
}
function handleUlClick(e){
console.log("ul click");
console.log(e.target.tagName);
if(e.target.tagName =="LI"){
console.log("li click");
}
}
</script>