DHML中的其他对象
history对象
- go()
- back()
- forward()
window.onload = function (){
document.getElementsByTagName("input")[1].onclick = function() {
window.history.back();
}
}
<input type="button" value="确定" />
<input type="button" value="上一步" />
<input type="button" value="下一步" onclick="window.history.forward()" />
location对象
- href 属性,指定浏览器的URL
- replace(URL) 替换浏览器的URL
- reload() 重新加载
function toURL(i){
if(i == "r"){
window.location.href = "demo1.html"
return;
}
window.location.href = "demo2.html"
}
<input type="button" value="go" onclick="toURL('r')" />
事件
事件句柄
- onclick 点击事件
ondbclick 双击事件
onmouseover 鼠标移入
- onmouseout 鼠标移出
- onmousedown 鼠标弹起
onmousepress 鼠标按下
onload 加载完毕
- onunload 卸载完毕
- onfocus 获取焦点
onblur 失去焦点
onkeydown 键盘按下
onkeyup 键盘弹起
onchange
- onsubmit 提交表单事件
事件处理
- 在HTML属性中直接处理
- JS代码中动态定义
事件处理机制:冒泡处理机制
取消事件冒泡处理机制:
event.cancelBubble = true;
Event对象
任何事件触发后都会产生一个Event对象
获取Event对象需要留意浏览器兼容问题
获取触发事件的事件源:
IE:Event.srcElement
FireFox:Event.target
// IE浏览器
function test01(){
var txt = document.getElementById("txt");
txt.value = "x:"+event.clientX +"y:"+event.clientY;
var obj = event.srcElement;
alert(obj.innerHTML);
}
// 火狐浏览器
function test02(e){
var txt = document.getElementById("txt");
txt.value = "x:"+e.clientX +"y:"+e.clientY;
var obj = e.target;
alert(obj.innerHTML);
}
<input type="button" id="txt" />
<div onclick = "test01()"> </div>