JS基础学习4：绑定事件

JS基础学习四：绑定事件
添加事件
IE: attachEvent
Other: addEventListener

var button = document.getElementById("buttonId");if(button.addEventListener){    button.addEventListener("click",eventFunction,false);}else if(button.attachEvent){    button.attachEvent("onclick",eventFunction);}

删除事件
IE: detachEvent
Other: removeEventListener

事件冒泡机制
IE: 事件从它发生的地方被触发，然后向DOM结构的上层冒泡
Other: 事件先向下沉入到目标元素，再向上冒泡
     addEventListener( , ,[true|false])
true: 向下沉入时截获事件false: 向上冒泡时截获事件

停止事件冒泡:
IE: window.event.cancelBubble=false;
Other: e.stopPropagation();

实验的例子：

function bindEvent() {var button = document.getElementById("buttonId");if (button.addEventListener) {alert("Other browser");//button.addEventListener("click",showEvent,false);//button.addEventListener("click",showEvent2,false);button.addEventListener("click", showEvent, true);button.addEventListener("click", showEvent2, true);} else if (button.attachEvent) {alert("IE browser");button.attachEvent("onclick", showEvent);button.attachEvent("onclick", showEvent2);}}function removeEvent() {var button = document.getElementById("buttonId");if (button.removeEventListener) {alert("Other browser");//button.removeEventListener("click",showEvent,false);button.removeEventListener("click", showEvent, true);} else if (button.detachEvent) {alert("IE browser");button.detachEvent("onclick", showEvent);}}function showEvent(e) {if (window.event != undefined) {window.event.cancelBubble = true;} else if (e.stopPropagation) {e.stopPropagation();}alert("Event here!");}function showEvent2() {alert("Other event here!");}function divEvent() {alert("Div Event");}

<div onclick="divEvent()">    <input type="button" id="buttonId" value="showEvent"/></div>

键盘事件

window.onload=function(){     //绑定键盘事件     document.onkeydown=showkey;}function showkey(e){     var key;     if(window.event)          key= window.event.keyCode;     else          key= e.keyCode;     alert(String.fromCharCode(key));}

鼠标事件
获取mouse的位置
IE: clientX,clientY
Other: pageX, pageY

document.onmouseover= showPosition;

查看更多 下一篇