Javascript学习历程之事件

增加监听函数（f1）
方法一

window.onload = function () {
    var myP = document.getElementById("myP");
    myP.onclick = function () {
        alert("我被点击了");
    }
}

方法二 添加处理函数attachEvent("onclick", fnClick)，删除处理函数detachEvent("onclick", fnClick)

var myP;
function fnClick() {
    alert("我被点击了");
    myP.detachEvent("onclick", fnClick);
}
window.onload = function () {
    myP = document.getElementById("myP");
    myP.attachEvent("onclick", fnClick);
}

方法三 添加多个处理函数

var myP;
function fnClick1() {
    alert("我被点击了a");
}
function fnClick2() {
    alert("我被点击了b");
}
window.onload = function () {
    myP = document.getElementById("myP");
    myP.attachEvent("onclick", fnClick1);
    myP.attachEvent("onclick", fnClick2);
}

 

同一个函数处理多个事件（f2）

function handle(event) {
    var divshow = document.getElementById("show");
    if (event.type == "click") {
        divshow.innerHTML = "你点击了我";
    }
    else
        divshow.innerHTML = "你鼠标经过我";
}
window.onload = function () {
    var elem = document.getElementById("img-f2");
    elem.onclick = handle;
    elem.onmouseover = handle;
}

 

获取事件的目标（f2）event.target

function handle(event) {
    var mydiv = document.getElementById("show");
    mydiv.innerHTML = "事件的目标是" + event.target.tagName;
}
window.onload = function () {
    var myElem = document.getElementById("img-f2");
    myElem.onclick = handle;
}

 

/*浏览器兼容性处理
function handle(oEvent){
    if(window.event) oEvent=window.event;
    var oTarget;
    if (oEvent.srcElement)
        oTarget = oEvent.srcElement;
    else
        oTarget=oEvent.target;
}
*/

控制鼠标事件(f2) onclick,ondblclick,onmouseover,onmouseout,onmouseup,onmousedown

function handle(event) {
    var mydiv = document.getElementById("show");
    mydiv.innerHTML+=event.type+"<br>";
}
window.onload = function () {
    var myElem = document.getElementById("img-f2");
    myElem.onclick = handle;
    myElem.ondblclick = handle;
    myElem.onmouseover = handle;
    myElem.onmouseout = handle;
    myElem.onmouseup = handle;
    myElem.onmousedown = handle;
}

 

鼠标button属性

function handle(event) {
    var mydiv = document.getElementById("show");
    mydiv.innerHTML ="button的值："+ event.button;
}
document.onmousedown=handle;
window.onload = handle;

 

键盘事件
例子1

function handle(event) {
    var show = document.getElementById("show");
    show.innerHTML += event.type+" ";
}
window.onload = function () {
    var mytext = document.getElementById("mytext");
    mytext.onkeydown = handle;
    mytext.onkeyup = handle;
    mytext.onkeypress = handle;
}

例子2

function handle(event) {
    var show = document.getElementById("show");
    show.innerHTML += event.type + ":charCode: "+event.charCode+"keyCode"+event.keyCode+"<br>";
}
window.onload = function () {
    var mytext = document.getElementById("mytext");
    mytext.onkeydown = handle;
    mytext.onkeyup = handle;
    mytext.onkeypress = handle;
}

 

/*html事件
load
unload
error
select
change
submit
focus
blur
*/

屏蔽鼠标右键（f4）属性document.oncontextmenu 

function block(oEvent) {
    var myP = document.getElementsByTagName("p")[0]; oEvent.returnValue = false; oEvent.preventDefault();
    myP.innerHTML = "屏蔽鼠标右键";
    if (window.event) {
        oEvent = window.event;//兼容IE
        oEvent.returnValue = false; //取消默认事件
    }
    else {
        oEvent.preventDefault();//取消默认事件
    }
}
document.oncontextmenu = block;

 

window.onload = function () {
    var oUL = document.getElementById("listUL");
    var aLi = oUL.childNodes;
    var oA;
    for (var i = 0; i < aLi.length; i++) {
        if (aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length) {
            oA = aLi[i].firstChild;
            oA.onclick = change;
        }
    }
}
function change() {
    var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];
    if (oSecondDiv.className == "myHide")
        oSecondDiv.className = "myShow";
    else
        oSecondDiv.className = "myHide";
}