DHML中的其他对象

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 提交表单事件

事件处理

1. 在HTML属性中直接处理
2. 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>