JavaScript HTML DOM 事件
1. html 事件属性
onclick
:用户点击鼠标时触发onfocus
:获取鼠标焦点时触发onchange
:输入字段被改变时触发onmouseover, onmouseout
:鼠标移入或移出时触发onmousedown, onmouseup
:鼠标点击或释放时触发onload, onunload
:进入页面或离开页面时触发
2. DOM 事件基本实例
2.1 onclick 事件 点击元素时改变内容
< h3> 2.1 从事件处理器调用函数</ h3>
< script>
function changeText ( obj ) {
obj. innerHTML = "OOP" ;
}
</ script>
< p onclick = " changeText(this)" > 点击文本</ p>
p
元素中添加 onclick
属性编写事件函数changeText(obj)
,传入this
参数对事件调用者更改 修改逻辑:根据传输的对象obj
通过obj.innerHTML
修改文本
2.2 onclick 事件 点击按钮时添加日期
< h3> 2.2 onclick 事件属性</ h3>
< script>
function displayDate ( ) {
document. getElementById ( "date" ) . innerHTML = Date ( ) ;
}
</ script>
< button onclick = " displayDate()" > 日期</ button>
< p id = " date" > </ p>
2.1
和2.2
的区别在于使用onclick
事件改变的不是事件的调用者改动点在于将参数this
修改为需要改变的元素的id
,但是displayDate("date")
会被当做字符串处理而非当作对象处理 因此不能采用参数方式传递对象,而是在函数代码块里获取待修改对象document.getElementById("date")
2.3 onfocus 事件 获得鼠标焦点时改变文本框颜色
< h3> 2.3 onfocus 当输入字段获得焦点时,改变颜色</ h3>
< script>
function monfocus ( obj ) {
obj. style. backgroundColor= "yellow" ;
}
</ script>
点击:< input type = " textd" onfocus = " monfocus(this)" style = " border : 1px solid black" />
2.4 onchange 事件 离开输入框后将文本转变为大写
< h3> 2.4 onchange事件</ h3>
< p> onchange事件常结合对输入字段的验证来使用</ p>
< script>
function checkChange ( ) {
var x = document. getElementById ( "inputName" ) ;
x. value = x. value. toUpperCase ( ) ;
}
</ script>
< input type = " text" id = " inputName" onchange = " checkChange()" />
< p> 离开输入框后,函数将被触发,将小写转为大写</ p>
2.5 onmouseover, onmouseout 事件 鼠标移入移除切换时改变文本及样式
< h3> 2.5 onmouseover和onmouseout事件</ h3>
< p> onmouseover和onmouseout事件可用于在用户移至HTML元素上方或移除元素时触发函数</ p>
< script>
function mOver ( obj ) {
obj. innerHTML = "Thank You" ;
obj. style. backgroundColor= "#a7c942"
}
function mOut ( obj ) {
obj. innerHTML = "Mouse Over Me"
obj. style. backgroundColor= "#AD38C9"
}
</ script>
< div onmouseover = " mOver(this)" onmouseout = " mOut(this)"
style = " width : 150px; height : 20px; padding : 40px; " > Mouse Over</ div>
2.6 onmousedown, onmouseup 事件 鼠标点击释放切换时改变本文
< h3> 2.6 onmousedown,onmouseup事件</ h3>
< script>
function mDown ( obj ) {
obj. innerHTML = "pick up" ;
obj. style. backgroundColor= "#a7c942"
}
function mUp ( obj ) {
obj. innerHTML = "put down" ;
obj. style. backgroundColor= "lightcoral" ;
}
</ script>
< div onmousedown = " mDown(this)" onmouseup = " mUp(this)"
style = " width : 150px; height : 20px; padding : 40px; " > mouse up && down</ div>