JavaScript本地对象常用方法(七)——DOM事件及其方法
一、DOM事件
1.onfocus()和onblur()
onfocus()和onblur()获得焦点和失去焦点事件
点击输入框获得焦点,触发onfocus(),获得焦点后,点击页面内输入框以外位置触发onblur()
type="text"
onfocus="this.style.backgroundColor='cornflowerblue';"
onblur="this.style.backgroundColor='#D0011B';"
value="焦点事件" />2.onchange()
onchange()内容改变确认时触发
"text" id="onchangeTxt"
onchange="onchangeBox.style.backgroundColor=onchangeTxt.value;" placeholder="输入颜色如:red 按回车该变下方盒子颜色" />
<div style="width: 100px;height: 100px;border: 1px solid black;" id="onchangeBox">
按输入框内容改变背景色
div>3.oninput()
oninput()内容改变时触发
"text" id="oninputTxt"
oninput="oninputBox.innerHTML=oninputTxt.value;"
placeholder="输入内容下方盒子内容改变" />
<div style="width: 100px;height: 100px;border: 1px solid black;" id="oninputBox">
随输入框改变
div>4.onclick()和ondblclick()
onclick()和ondblclick()单击和双击事件
单击事件单击时触发,双击事件双击时触发
要双击必先先单击,所以双击时有单击事件,单击事件也触发
<div id="box" style="width: 50px;height: 50px;background-color: cornflowerblue;"
ondblclick="this.style.width='100px';this.style.height='100px';"
onclick="this.style.backgroundColor='#D0011B';">div>5.onerror()
onerror()加载错误时触发
<img src="123" onerror="this.alt='图片加载错误'"/>6.onkeydown()
onkeydown()按下按键时触发
type="text"
onkeydown="var e=e||event;alert(e.keyCode);"
placeholder="按下按键时alert输出对应键值"/>7.onkeypress()
onkeypress()按下按键后触发,触发时点比onkeydown()晚
type="text"
onkeypress="var e=e||event;alert(e.keyCode);"
onkeydown="alert('按下按键');"
placeholder="按下按键后alert输出对应键值"/>8.onkeyup()
onkeyup()按键弹起时触发
type="text"
onkeyup="var e=e||event;alert(e.keyCode);"
placeholder="按键弹起时alert输出对应键值"/>9.onmousedown()、onmousemove()、onmouseup()
在区域内按下鼠标触发onmousedown()
在区域内移动鼠标触发onmousemove()
在区域内鼠标弹起触发onmouseup()
"width: 100px;height: 100px;background-color: orange;"
onmousedown="
this.style.backgroundColor='cornflowerblue';
this.down=1;"
onmousemove="
if(this.down==1)
{this.style.width='200px';this.style.height='200px';};"
onmouseup="
this.style.backgroundColor='orange';
this.down=0;
this.style.width='100px';
this.style.height='100px';
" >10.onmouseover()和onmouseout()
鼠标划入区域内触发onmouseover()
鼠标划出区域外触发onmouseover()
<div style="width: 100px;height: 100px;background-color: violet;"
onmouseover="this.style.backgroundColor='slateblue';"
onmouseout="this.style.backgroundColor='violet';" >div>11.onselect()
onselect()输入框和文本框内,鼠标拖动选中内容时触发
<textarea style="width: 100px;height: 100px;"
onselect="alert(this.value.substring(this.selectionStart,this.selectionEnd));">选中的文字会在窗口弹出:
Lasciate ogne speranza, voi ch'intratetextarea>12.onsubmit()和onreset()
onsubmit()和onreset()点击表单提交按钮触发和重置按钮触发
二、DOM事件的常用方法
1.preventDefault()
preventDefault()阻止默认事件,如:选中文本,复选框,单选框,输入文本
"width: 100px;height: 100px;background-color: #46B8DA;"
onmousemove="var e=e||event;e.preventDefault();">
Lasciate ogne speranza, voi ch'intrate
type="checkbox"
onclick="var e=e||event;e.preventDefault();"/>
type="radio"
onclick="var e=e||event;e.preventDefault();"/>
type="text"
onkeydown="var e=e||event;e.preventDefault();"/>2.stopPropagation()
stopPropagation()阻止事件冒泡
四个层级嵌套的盒子,通过定位分开排成一列
最外层的第一个盒子触发自己的事件
第二层的第二个盒子阻止事件冒泡只会触发自己的事件
第三层和第四层的盒子本来由于事件冒泡,会逐层触发上一层的相同事件,直到最外层;
但是第二层的盒子阻止了事件冒泡,所以第一层的盒子事件没有触发,事件只冒泡到第二层,第二层的盒子事件触发
"width: 100px;height: 100px;background-color: #E3146E;text-align: right;position: relative;"
onmouseover="this.style.backgroundColor='royalblue'"
onmouseout="this.style.backgroundColor='#E3146E'">
第一个盒子
"width: 100px;height: 100px;background-color: #B60730;position: absolute;top: 0;left: 100px;"
onclick="alert()"
onmouseover="
var e=e||event;
this.style.backgroundColor='#800080';
e.stopPropagation();
"
onmouseout="
var e=e||event;
this.style.backgroundColor='#B60730';
e.stopPropagation();
">
第二个盒子
"width: 100px;height: 100px;background-color: #E2C608;position: absolute;top: 0;left: 100px;"
onmouseover="
this.style.backgroundColor='palegreen';
"
onmouseout="
this.style.backgroundColor='#E2C608';
">
第三个盒子
"width: 100px;height: 100px;background-color: aqua;position: absolute;top: 0;left: 100px;"
onmouseover="
this.style.backgroundColor='darkred';
"
onmouseout="
this.style.backgroundColor='aqua';
">
第四个盒子