增加监听函数（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+"
"; } 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.οnmοusedοwn=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+"
"; } 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"; }