现在的位置: 首页 > 综合 > 正文

javascript 事件模型学习笔记

2017年10月19日 ⁄ 综合 ⁄ 共 4645字 ⁄ 字号 评论关闭
 

<html>
    
<head>
        
<title>removeChild() Example</title>
        
<script type="text/javascript">
        
function removeMessage()
        
{
            
var op = document.body.getElementsByTagName("p")[0];
            document.body.removeChild(op);
        }

        
function replaceMessage()
        
{
            
var op = document.createElement("p");
            
var oText = document.createTextNode("hello universe!");
            op.appendChild(oText);
            
var oldOp = document.getElementsByTagName("p")[0];
            oldOp.parentNode.replaceChild(op,oldOp);
        }

        
function appendMessage()
        
{
            
var op = document.createElement("p");
            
var oText = document.createTextNode("hello universe two !");
            op.appendChild(oText);
            document.body.appendChild(op);
        }

        
function insertMessage()
        
{
            
var op=document.createElement("p");
            
var oText = document.createTextNode("hello insert before");
            op.appendChild(oText);
            
var oldOp = document.body.getElementsByTagName("p")[0];
            oldOp.parentNode.insertBefore(op,oldOp);
        }

        
function getUserAgent()
        
{
            
var sUserAgent = navigator.userAgent;
            
var appVersion = parseFloat(navigator.appVersion);
            alert(sUserAgent);
            alert(appVersion);
        }

        
function handleEvent()
        
{
            
var oDiv = document.getElementById("div1");
            oDiv.onclick
=function()
            
{
                alert(
"I was clicked!");
            }

            
//用这种分配事件的形式,事件响应函数的名字必须为小写的.
        }

        
//IE中,attachEvent(),detachEvent(),在IE中,每个元素和window对象都有这两个方法
        var fnclick1=function()
        
{
            alert(
"I am clicked!");
        }

        
var fnclick2=function()
        
{
            alert(
"I am also clicked!");
        }

        
var addIeEvent=function()
        
{
            
var oDiv = document.getElementById("div1");
            oDiv.onclick
=fnclick1;
            oDiv.attachEvent(
"onclick",fnclick2);
        }

        
function addDomEvent()
        
{
            
var oDiv = document.getElementById("div1");
            oDiv.addEventListener(
"click",fnclick1,true);
            oDiv.addEventListener(
"click",fnclick2,true);
            oDiv.addEventListener(
"click",fnclick1,false);
            oDiv.addEventListener(
"click",fnclick2,false);
        }

        
//DOM中,addEventListener(),removeEventListener()用于分配和移除事件处理函数,
        //第三个参数为true时,事件处理函数用于捕获阶段,为false时,用于冒泡阶段.
        //IE , DOM区别是很大的
        function getIeEvent()
        
{
            
var oEvent = window.event;
            alert(oEvent.type);
        }

        
//在IE中,event对象是window对象的一个属性。
        //DOM中,访问的方式是不一样的
        function getDomEvent()
        
{
            
var oEvent = arguments[0];
        }

        
//当然,更方便的方式是直接的命名参数
        function getDomEvent(oEvent)
        
{
        }

        
//oEvent.type 可以获取到事件的类型
        
        
//获取按键的代码(keydown/keyup事件)
        var iKeyCode = oEvent.keyCode;

        
//检测shift,alt,ctrl是否被按下,下面的方法都是返回布尔值
        var bShift = oEvent.shiftKey;
        
var bAlt = oEvent.altKey;
        
var bCtrl = oEvent.ctrlKey;

        
//获取客户端坐标
        var iClientX = oEvent.clientX;
        
var iClientY = oEvent.clienty;
        
//获取屏幕坐标
        var iScreenX = oEvent.screenX;
        VAR iScreenY 
= oEvent.screenY;

        
//获取事件源
        var oTarget = oEvent.srcElement; //  IE
        var oTarget = oEvent.target;   //  DOM

        
//获取字符代码
        var iCharCode = oEvent.keyCode;   //IE
        var iCharCode = oEvent.charCode;   //DOM

        
//阻止某个事件的默认行为
        oEvent.returnValue =false;//IE
        oEvent.preventDefault();  //DOM

        
//for example
        document.body.oncontextmenu = function(oEvent)
        
{
            
if(isIE)
            
{    
               oEvent 
= window.event;
               oEvent.returnValue 
=false;
            }

            
else
            
{
                oEvent.preventDefault();
            }

        }

        
//键盘事件:
        //keydown-----用户在键盘上按下某按键的时候发生.
        //keypress----用户按下一个按键,并产生一个字符时候发生(也就是不管shift,alt之类的键)
        //keyup------用户释放按着的按键发生
        </script>
    
</head>
    
<body onload="getIeEvent()">
        
<p>hello world!</p>
        
<div id="div1">实打实的</div>
    
</body>
</html>

 

ajax in practise :

The Basic Event Model, also informally known as the DOM Level 0 Event
Model, which is fairly easy, straightforward, and reasonably cross-platform.
■ The DOM Level 2 Event Model, which provides more flexibility but is
supported only on standards-compliant browsers such as Firefox, Mozilla,
and Safari.
■ The Internet Explorer Event Model, which is functionally similar to the
DOM Level 2 Model, but which is proprietary to Internet Explorer.

【上篇】
【下篇】

抱歉!评论已关闭.