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";
}

 

posted @ 2012-02-26 16:16  Ghost Soar  阅读(183)  评论(0编辑  收藏