shanruopeng
shanruopeng

【javascript】事件类型

事件类型

  • Web 浏览器中可能发生的事件有很多类型

    • UI事件：当用户与界面上的元素交互时触发。
    • 焦点事件：当元素获得或失去焦点时触发。
    • 滚轮事件：当使用鼠标滚轮时触发。
    • 文本事件：当在文档中输入文本时触发。
    • 键盘事件：但用户通过键盘在页面上执行操作时触发。
    • 合成事件：当为输入法编辑器输入字符时触发。
    • 变动事件：当底层DOM结构发生变化时触发。
//事件处理程序
var EventUtil = {
    addHandler: function(element, type, handler){
        if (element.addEventListener){
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent){
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    getEvent: function(event){
        return event ? event : window.event;
    },
    removeHandler: function(element, type, handler){
        if (element.removeEventListener){
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent){
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    }
};

1、UI事件

  • UI 事件指的是那些不一定与用户操作有关的事件。

(1)load事件

  • load在当页面完全加载后在window上面触发，当所有框架都加载完毕时在框架集上面触发，当图像加载完毕时在元素上面触发，或者当嵌入的内容加载完毕时在元素上面触发。 
    //第一种定义onload 事件处理程序的方式
EventUtil.addHandler(window, "load", function(event){
    alert("Loaded!");
});

    


    
        Load Event Example

    (2)unload事件

    • unload，当页面完全卸载后在window上面触发，当所有框架都卸载后在框架集上面触发，或者当嵌入的内容卸载完毕后在元素上面触发。
    • 只要用户从一个页面切换到另一个页面，就会发生unload事件。而利用这个事件最多的情况是清除引用，以避免内存泄漏。
      • EventUtil.addHandler(window, "unload", function(event){
    alert("Unloaded");
});

      

    
        Unload Event Example

      (3)resize事件

      • resize|当窗口或框架的大小变化时在window 或框架上面触发。
      • 浏览器窗口最小化或最大化时也会触发resize 事件。
      EventUtil.addHandler(window, "resize", function(event){
    alert("Resized");
});

      (4)scroll事件

      • scroll，当用户滚动带滚动条的元素中的内容时，在该元素上面触发。元素中包含所加载页面的滚动条。
      EventUtil.addHandler(window, "scroll", function(event){
    if (document.compatMode == "CSS1Compat"){
        alert(document.documentElement.scrollTop);
    } else {
        alert(document.body.scrollTop);
    }
});

      (5)abort

      • abort，在用户停止下载过程时，如果嵌入的内容没有加载完，则在元素上面触发。

        (6)error

        • error，当发生JavaScript错误时在window上面触发，当无法加载图像时在元素上面触发，当无法加载嵌入内容时在元素上面触发，或者当有一或多个框架无法加载时在框架集上面触发

          (7)select

          • select，当用户选择文本框（或）中的一或多个字符时触发。

          2、焦点事件

          • 焦点事件会在页面元素获得或失去焦点时触发，有以下6 个焦点事件。

            • blur：在元素失去焦点时触发。这个事件不会冒泡；所有浏览器都支持它。
            • focus：在元素获得焦点时触发。这个事件不会冒泡；所有浏览器都支持它。
            • focusin：在元素获得焦点时触发。这个事件与HTML 事件focus 等价，但它冒泡。
            • focusout：在元素失去焦点时触发。这个事件是HTML 事件blur 的通用版本。

          • 当焦点从页面中的一个元素移动到另一个元素，会依次触发下列事件：
            (1) focusout 在失去焦点的元素上触发；
            (2) focusin 在获得焦点的元素上触发；
            (3) blur 在失去焦点的元素上触发；
            (4) DOMFocusOut 在失去焦点的元素上触发；
            (5) focus 在获得焦点的元素上触发；
            (6) DOMFocusIn 在获得焦点的元素上触发。
            其中，blur、DOMFocusOut和focusout的事件目标是失去焦点的元素；而focus、DOMFocusIn和focusin 的事件目标是获得焦点的元素。

          • 要确定浏览器是否支持这些事件，可以使用如下代码：

          var isSupported = document.implementation.hasFeature("FocusEvent", "3.0");

          3、鼠标与滚轮事件

          • click：在用户单击主鼠标按钮（一般是左边的按钮）或者按下回车键时触发。
          • dblclick：在用户双击主鼠标按钮（一般是左边的按钮）时触发。
          • mousedown：在用户按下了任意鼠标按钮时触发。不能通过键盘触发这个事件。
          • mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。
          • mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。
          • mousemove：当鼠标指针在元素内部移动时重复地触发。不能通过键盘触发这个事件。
          • mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。
          • mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发。不能通过键盘触发这个事件。
          • mouseup：在用户释放鼠标按钮时触发。不能通过键盘触发这个事件。

          • 要检测浏览器是否支持上面的所有事件，可以使用以下代码：
          var isSupported = document.implementation.hasFeature("MouseEvent", "3.0")
          • 鼠标事件中还有一类滚轮事件。而说是一类事件，其实就是一个mousewheel 事件。这个事件跟踪鼠标滚轮。

          (1)客户区坐标位置

          var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
    event = EventUtil.getEvent(event);
    alert("Client coordinates: " + event.clientX + "," + event.clientY);
});

          (2)页面坐标位置

          var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
    event = EventUtil.getEvent(event);
    alert("Page coordinates: " + event.pageX + "," + event.pageY);
});
          • IE8 及更早版本不支持事件对象上的页面坐标，不过使用客户区坐标和滚动信息可以计算出来。
          var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
    event = EventUtil.getEvent(event);
    var pageX = event.pageX,
    pageY = event.pageY;
    if (pageX === undefined){
        pageX = event.clientX + (document.body.scrollLeft ||
        document.documentElement.scrollLeft);
    }
    if (pageY === undefined){
        pageY = event.clientY + (document.body.scrollTop ||
        document.documentElement.scrollTop);
    }
    alert("Page coordinates: " + pageX + "," + pageY);
});

          (3)屏幕坐标位置

          • 通过screenX 和screenY属性可以确定鼠标事件发生时鼠标指针相对于整个屏幕的坐标信息。
          var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
    event = EventUtil.getEvent(event);
    alert("Screen coordinates: " + event.screenX + "," + event.screenY);
});

          (4)修改键

          • 在按下鼠标时键盘上的某些键的状态也可以影响到所要采取的操作。
          var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
    event = EventUtil.getEvent(event);
    var keys = new Array();
    if (event.shiftKey){
        keys.push("shift");
    }
    if (event.ctrlKey){
        keys.push("ctrl");
    }
    if (event.altKey){
        keys.push("alt");
    }
    if (event.metaKey){
        keys.push("meta");
    }
    alert("Keys: " + keys.join(","));
});

          (5)相关元素

          • 在发生mouseover 和mouserout 事件时，还会涉及更多的元素。
          • 对mouseover 事件而言，事件的主目标是获得光标的元素，而相关元素就是那个失去光标的元素。
          • 对mouseout 事件而言，事件的主目标是失去光标的元素，而相关元素则是获得光标的元素。
          • DOM通过event 对象的relatedTarget 属性提供了相关元素的信息。
          • IE8及之前版本不支持relatedTarget属性，但提供了保存着同样信息的不同属性。在mouseover 事件触发时，IE 的fromElement属性中保存了相关元素；在mouseout事件触发时，IE 的toElement 属性中保存着相关元素。
          

    
    Related Elements Example
    
    
        
          test
          
    


          var EventUtil = {
//省略了其他代码
    getRelatedTarget: function(event){
        if (event.relatedTarget){
            return event.relatedTarget;
        } else if (event.toElement){
            return event.toElement;
        } else if (event.fromElement){
            return event.fromElement;
        } else {
            return null;
        }
    },
//省略了其他代码
};

var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "mouseout", function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    var relatedTarget = EventUtil.getRelatedTarget(event);
    alert("Moused out of " + target.tagName + " to " + relatedTarget.tagName);
});

          (6)鼠标按钮

          • DOM的button 属性可能有如下3 个值：
            • 0 表示主鼠标按钮。
            • 1 表示中间的鼠标按钮（鼠标滚轮按钮）。
            • 2 表示次鼠标按钮。
            • 在常规的设置中，主鼠标按钮就是鼠标左键，而次鼠标按钮就是鼠标右键。

          • IE8 及之前版本也提供了button 属性，但这个属性的值与DOM的button属性有很大差异。
            • 0：表示没有按下按钮。
            • 1：表示按下了主鼠标按钮。
            • 2：表示按下了次鼠标按钮。
            • 3：表示同时按下了主、次鼠标按钮。
            • 4：表示按下了中间的鼠标按钮。
            • 5：表示同时按下了主鼠标按钮和中间的鼠标按钮。
            • 6：表示同时按下了次鼠标按钮和中间的鼠标按钮。
            • 7：表示同时按下了三个鼠标按钮。
          var EventUtil = {
    //省略了其他代码
    getButton: function(event){
        if (document.implementation.hasFeature("MouseEvents", "2.0")){
            return event.button;
        } else {
            switch(event.button){
            case 0:
            case 1:
            case 3:
            case 5:
            case 7:
                return 0;
            case 2:
            case 6:
                return 2;
            case 4:
                return 1;
            }
        }
    },
    //省略了其他代码
};
var div = document.getElementById("myDiv");
    EventUtil.addHandler(div, "mousedown", function(event){
    event = EventUtil.getEvent(event);
    alert(EventUtil.getButton(event));
});

          (7)鼠标滚轮事件

          • 与mousewheel 事件对应的event对象除包含鼠标事件的所有标准信息外，还包含一个特殊的wheelDelta 属性。
          • 当用户向前滚动鼠标滚轮时，wheelDelta是120的倍数；当用户向后滚动鼠标滚轮时，wheelDelta 是-120 的倍数。
          EventUtil.addHandler(document, "mousewheel", function(event){
    event = EventUtil.getEvent(event);
    alert(event.wheelDelta);
});

          (8)触摸设备

          • 不支持dblclick事件，双击浏览器窗口放大画面。
          • 轻击可单击元素会触发mousemove 事件。
          • mousemove 事件也会触发mouseover 和mouseout 事件。
          • 两个手指放在屏幕上且页面随手指移动而滚动时会触发mousewheel 和scroll 事件。

          4、键盘与文本事件

          • keydown: 当用户按下键盘上的任意键时触发，若按住不放，会重复触发。
          • keypress:当用户按下键盘上的字符键时触发，若按住不放，会重复触发。按下ESC键也会触发这个事件。
          • keyup：当用户释放键盘上的键时触发。

          (1)键码

          var textbox = document.getElementById("myText");
EventUtil.addHandler(textbox, "keyup", function(event){
    event = EventUtil.getEvent(event);
    alert(event.keyCode);
});

          (2)字符编码

          • IE9、Firefox、Chrome 和Safari 的event 对象都支持一个charCode 属性，这个属性只有在发生keypress事件时才包含值，而且这个值是按下的那个键所代表字符的ASCII 编码。此时的keyCode通常等于0 或者也可能等于所按键的键码。
          //跨浏览器取得字符编码
var EventUtil = {
    //省略的代码
    getCharCode: function(event){
        if (typeof event.charCode == "number"){
            return event.charCode;
        } else {
            return event.keyCode;
        }
    },
    //省略的代码
};
var textbox = document.getElementById("myText");
EventUtil.addHandler(textbox, "keypress", function(event){
    event = EventUtil.getEvent(event);
    alert(EventUtil.getCharCode(event));
});

          (3)DOM3级变化

          • DOM3级事件中的键盘事件，不再包含charCode 属性，而是包含两个新属性：key和char。
          • 在按下某个字符键时，key的值就是相应的文本字符（如“k”或“M”）；在按下非字符键时， key 的值是相应键的名（如“Shift”或“Down”）。
          • char 属性在按下字符键时的行为与key 相同，但在按下非字符键时值为null。
          • IE9 支持key 属性，但不支持char 属性。Safari 5 和Chrome 支持名为keyIdentifier 的属性，在按下非字符键（例如Shift）的情况下与key的值相同。
          • 对于字符键，keyIdentifier 返回一个格式类似“U+0000”的字符串，表示Unicode 值。
          var textbox = document.getElementById("myText");
EventUtil.addHandler(textbox, "keypress", function(event){
    event = EventUtil.getEvent(event);
    var identifier = event.key || event.keyIdentifier;
    if (identifier){
        alert(identifi er);
    }
});
          • 由于存在跨浏览器问题，因此不推荐使用key、keyIdentifier 或char。

          (4)textInput事件

          • 当用户在可编辑区域中输入字符时，就会触发textInput事件。
          • 这个用于替代keypress 的textInput 事件的行为稍有不同。
            • 任何可以获得焦点的元素都可以触发keypress事件，但只有可编辑区域才能触发textInput事件。
            • textInput 事件只会在用户按下能够输入实际字符的键时才会被触发，而keypress事件则在按下那些能够影响文本显示的键时也会触发。
          • 由于textInput 事件主要考虑的是字符，因此它的event对象中还包含一个data属性，这个属性的值就是用户输入的字符（而非字符编码）。
          var textbox = document.getElementById("myText");
EventUtil.addHandler(textbox, "textInput", function(event){
    event = EventUtil.getEvent(event);
    alert(event.data);
});

          5、复合事件

          • 复合事件，用于处理IME 的输入序列。
          • IME（Input Method Editor，输入法编辑器）可以让用户输入在物理键盘上找不到的字符。
          • 复合事件就是针对检测和处理这种输入而设计的。有以下三种复合事件。
            • compositionstart：在IME 的文本复合系统打开时触发，表示要开始输入了。
            • compositionupdate：在向输入字段中插入新字符时触发。
            • compositionend：在IME 的文本复合系统关闭时触发，表示返回正常键盘输入状态。
          • 在触发复合事件时，目标是接收文本的输入字段。但它比文本事件的事件对象多一个属性data，其中包含以下几个值中的一个。
            • 如果在compositionstart事件发生时访问，包含正在编辑的文本；
            • 如果在compositionupdate 事件发生时访问，包含正插入的新字符；
            • 如果在compositionend 事件发生时访问，包含此次输入会话中插入的所有字符。
          var textbox = document.getElementById("myText");
EventUtil.addHandler(textbox, "compositionstart", function(event){
    event = EventUtil.getEvent(event);
    alert(event.data);
});
EventUtil.addHandler(textbox, "compositionupdate", function(event){
    event = EventUtil.getEvent(event);
    alert(event.data);
});
EventUtil.addHandler(textbox, "compositionend", function(event){
    event = EventUtil.getEvent(event);
    alert(event.data);
});
          • 要确定浏览器是否支持复合事件，可以使用以下代码
          var isSupported = document.implementation.hasFeature("CompositionEvent", "3.0");

          6、变动事件

          • DOMSubtreeModified：在DOM 结构中发生任何变化时触发。这个事件在其他任何事件触发
            后都会触发。
          • DOMNodeInserted：在一个节点作为子节点被插入到另一个节点中时触发。
          • DOMNodeRemoved：在节点从其父节点中被移除时触发。
          • DOMNodeInsertedIntoDocument：在一个节点被直接插入文档或通过子树间接插入文档之后触发。这个事件在DOMNodeInserted 之后触发。
          • DOMNodeRemovedFromDocument：在一个节点被直接从文档中移除或通过子树间接从文档中移除之前触发。这个事件在DOMNodeRemoved 之后触发。
          • DOMAttrModified：在特性被修改之后触发。
          • DOMCharacterDataModified：在文本节点的值发生变化时触发。
          

    
        Node Removal Events Example
    
    
        
            
            
          • Item 1
            • 
            
          • Item 2
            • 
            
          • Item 3
            •

          (1)删除节点

          //假设要移除
            元素，验证以上事件发生的顺序。
EventUtil.addHandler(window, "load", function(event){
    var list = document.getElementById("myList");
    EventUtil.addHandler(document, "DOMSubtreeModified", function(event){
        alert(event.type);
        alert(event.target);
    });
    EventUtil.addHandler(document, "DOMNodeRemoved", function(event){
        alert(event.type);
        alert(event.target);
        alert(event.relatedNode);
    });
    EventUtil.addHandler(list.firstChild, "DOMNodeRemovedFromDocument", 
    function(event){
        alert(event.type);
        alert(event.target);
    });
    list.parentNode.removeChild(list);
});

          (2)插入节点

          //假设要为
            添加一个
          • 元素，验证以上事件发生的顺序。
EventUtil.addHandler(window, "load", function(event){
    var list = document.getElementById("myList");
    var item = document.createElement("li");
    item.appendChild(document.createTextNode("Item 4"));
    EventUtil.addHandler(document, "DOMSubtreeModified", function(event){
        alert(event.type);
        alert(event.target);
    });
    EventUtil.addHandler(document, "DOMNodeInserted", function(event){
        alert(event.type);
        alert(event.target);
        alert(event.relatedNode);
    });
    EventUtil.addHandler(item, "DOMNodeInsertedIntoDocument", function(event){
        alert(event.type);
        alert(event.target);
    });
    list.appendChild(item);
});

          7、HTML5事件

          (1)contextmenu事件

          • 由于contextmenu 事件是冒泡的，因此可以为document指定一个事件处理程序，用以处理页面中发生的所有此类事件。
          • 这个事件的目标是发生用户操作的元素。在所有浏览器中都可以取消这个事件。
          • 通常使用contextmenu事件来显示自定义的上下文菜单，而使用onclick事件处理程序来隐藏该菜单。
          

    
        ContextMenu Event Example
    
    
        
          Right click or Ctrl+click me to get a custom context menu.Click anywhere else to get the default context menu.
          
        
    


          EventUtil.addHandler(window, "load", function(event){
    var div = document.getElementById("myDiv");
    EventUtil.addHandler(div, "contextmenu", function(event){
        event = EventUtil.getEvent(event);
        EventUtil.preventDefault(event);
        var menu = document.getElementById("myMenu");
        menu.style.left = event.clientX + "px";
        menu.style.top = event.clientY + "px";
        menu.style.visibility = "visible";
    });
    EventUtil.addHandler(document, "click", function(event){
        document.getElementById("myMenu").style.visibility = "hidden";
    });
});

          (2)beforeunload事件

          • 这个事件会在浏览器卸载页面之前触发，可以通过它来取消卸载并继续使用原有页面。
          • 这个事件的意图是将控制权交给用户。显示的消息会告知用户页面行将被卸载（正因为如此才会显示这个消息），询问用户是否真的要关闭页面，还是希望继续留下来。
          EventUtil.addHandler(window, "beforeunload", function(event){
    event = EventUtil.getEvent(event);
    var message = "I'm really going to miss you if you go.";
    event.returnValue = message;
    return message;
});

          (3)DOMCdontentLoaded事件

          • DOMContentLoaded 事件在形成完整的DOM 树之后就会触发，不理会图像、JavaScript 文件、CSS 文件或其他资源是否已经下载完毕。
          • 要处理DOMContentLoaded事件，可以为document或window添加相应的事件处理程序（尽管这个事件会冒泡到window，但它的目标实际上是document）
          EventUtil.addHandler(document, "DOMContentLoaded", function(event){
    alert("Content loaded");
});

          (4)hashchange事件

          • HTML5 新增了hashchange事件，以便在URL的参数列表（及URL中“#”号后面的所有字符串）发生变化时通知开发人员。
          • 必须要把hashchange 事件处理程序添加给window对象，然后URL参数列表只要变化就会调用它。
          • 此时的event 对象应该额外包含两个属性：oldURL和newURL。这两个属性分别保存着参数列表变化前后的完整URL。
          EventUtil.addHandler(window, "hashchange", function(event){
    alert("Old URL: " + event.oldURL + "\nNew URL: " + event.newURL);
});
          • 只有Firefox 6+、Chrome和Opera支持oldURL和newURL属性。为此，最好是使用location对象来确定当前的参数列表。
          EventUtil.addHandler(window, "hashchange", function(event){
    alert("Current hash: " + location.hash);
});
          • 使用以下代码可以检测浏览器是否支持hashchange 事件。
          var isSupported = ("onhashchange" in window) && (document.documentMode ===
undefined || document.documentMode > 7);

          8、设备事件

          (1)orientationchange事件

          • 苹果公司为移动Safari中添加了orientationchange事件，以便开发人员能够确定用户何时将设备由横向查看模式切换为纵向查看模式。
          • 移动Safari 的window.orientation属性中可能包含3个值：0表示肖像模式，90表示向左旋转的横向模式（“主屏幕”按钮在右侧），-90表示向右旋转的横向模式（“主屏幕”按钮在左侧）。
          EventUtil.addHandler(window, "load", function(event){
    var div = document.getElementById("myDiv");
    div.innerHTML = "Current orientation is " + window.orientation;
    EventUtil.addHandler(window, "orientationchange", function(event){
        div.innerHTML = "Current orientation is " + window.orientation;
    });
});
          • 所有iOS 设备都支持orientationchange 事件和window.orientation 属性。

          (2)MozOrientation 事件

          • Firefox 3.6 为检测设备的方向引入了一个名为MozOrientation的新事件。当设备的加速计检测到设备方向改变时，就会触发这个事件。
          EventUtil.addHandler(window, "MozOrientation", function(event){
    //响应事件
});
          • 此时的event 对象包含三个属性：x、y和z。这几个属性的值都介于1到-1之间，表示不同坐标轴上的方向。
          • 如果设备向右倾斜，x值会减小；反之，向左倾斜，x值会增大。z轴检测垂直加速度度，1 表示静止不动，在设备移动时值会减小。
          • 只有带加速计的设备才支持MozOrientation 事件.

          Warning: This experimental API was removed in Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), when support for the standard DeviceOrientationEvent was implemented. You should use that API instead.

          (3)deviceorientation 事件

          • 触发deviceorientation事件时，事件对象中包含着每个轴相对于设备静止状态下发生变化的信息。事件对象包含以下5 个属性。
            • alpha：在围绕z 轴旋转时（即左右旋转时），y 轴的度数差；是一个介于0 到360 之间的浮点数。
            • beta：在围绕x 轴旋转时（即前后旋转时），z 轴的度数差；是一个介于-180 到180 之间的浮点数。
            • gamma：在围绕y 轴旋转时（即扭转设备时），z 轴的度数差；是一个介于-90 到90 之间的浮点数。
            • absolute：布尔值，表示设备是否返回一个绝对值。
            • compassCalibrated：布尔值，表示设备的指南针是否校准过。
          EventUtil.addHandler(window, "deviceorientation", function(event){
    var output = document.getElementById("output");
    output.innerHTML = "Alpha=" + event.alpha + ", Beta=" + event.beta +
    ", Gamma=" + event.gamma + "
          ";
});
          • 通过这些信息，可以响应设备的方向，重新排列或修改屏幕上的元素。要响应设备方向的改变而旋转元素。
          EventUtil.addHandler(window, "deviceorientation", function(event){
var arrow = document.getElementById("arrow");
    arrow.style.webkitTransform = "rotate(" + Math.round(event.alpha) + "deg)";
});

          (4)devicemotion 事件

          • DeviceOrientation Event 规范还定义了一个devicemotion 事件，通过devicemotion 能够检测到设备是不是正在往下掉，或者是不是被走着的人拿在手里。
          • 触发devicemotion 事件时，事件对象包含以下属性。
            • acceleration：一个包含x、y和z属性的对象，在不考虑重力的情况下，告诉你在每个方向上的加速度。
            • accelerationIncludingGravity：一个包含x、y和z属性的对象，在考虑z轴自然重力加速度的情况下，告诉你在每个方向上的加速度。
            • interval：以毫秒表示的时间值，必须在另一个devicemotion事件触发前传入。这个值在每个事件中应该是一个常量。
            • rotationRate：一个包含表示方向的alpha、beta 和gamma 属性的对象。
          EventUtil.addHandler(window, "devicemotion", function(event){
    var output = document.getElementById("output");
    if (event.rotationRate !== null){
        output.innerHTML += "Alpha=" + event.rotationRate.alpha + ", Beta=" +
        event.rotationRate.beta + ", Gamma=" +
        event.rotationRate.gamma;
    }
});

          9、触摸与手势事件

          (1)触摸事件

          • 触摸事件会在用户手指放在屏幕上面时、在屏幕上滑动时或从屏幕上移开时触发。
          名称 详细
          touchstart 当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。
          touchmove 当手指在屏幕上滑动时连续地触发。在这个事件发生期间，调用preventDefault()可以阻止滚动。
          touchend 当手指从屏幕上移开时触发。
          touchcancel 当系统停止跟踪触摸时触发。
          • 每个触摸事件的event对象都提供了在鼠标事件中常见的属性：bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey 和metaKey。

          • 除了常见的DOM属性外，触摸事件还包含下列三个用于跟踪触摸的属性。
            名称|详细
            -|-
            touches|表示当前跟踪的触摸操作的Touch 对象的数组。
            targetTouchs|特定于事件目标的Touch 对象的数组。
            changeTouches|表示自上次触摸以来发生了什么改变的Touch 对象的数组。

          • 每个Touch 对象包含下列属性。
            名称|详细
            -|-
            clientX|触摸目标在视口中的x 坐标。
            clientY|触摸目标在视口中的y 坐标。
            identifier|标识触摸的唯一ID。
            pageX|触摸目标在页面中的x 坐标。
            pageY|触摸目标在页面中的y 坐标。
            screenX|触摸目标在屏幕中的x 坐标。
            screenY|触摸目标在屏幕中的y 坐标。
            target|触摸的DOM 节点目标。

          • 使用这些属性可以跟踪用户对屏幕的触摸操作。

          function handleTouchEvent(event){
//只跟踪一次触摸
    if (event.touches.length == 1){
    var output = document.getElementById("output");
    switch(event.type){
        case "touchstart":
            output.innerHTML = "Touch started (" + event.touches[0].clientX +
            "," + event.touches[0].clientY + ")";
            break;
        case "touchend":
            output.innerHTML += "
          Touch ended (" +
            event.changedTouches[0].clientX + "," +
            event.changedTouches[0].clientY + ")";
            break;
        case "touchmove":
            event.preventDefault(); //阻止滚动
            output.innerHTML += "
          Touch moved (" +
            event.changedTouches[0].clientX + "," +
            event.changedTouches[0].clientY + ")";
            break;
        }
    }
}
EventUtil.addHandler(document, "touchstart", handleTouchEvent);
EventUtil.addHandler(document, "touchend", handleTouchEvent);
EventUtil.addHandler(document, "touchmove", handleTouchEvent);

          (2)手势事件

          • 当两个手指触摸屏幕时就会产生手势，手势通常会改变显示项的大小，或者旋转显示项。有三个手势事件。
          名称 详细
          gesturestart 当一个手指已经按在屏幕上而另一个手指又触摸屏幕时触发。
          gesturechange 当触摸屏幕的任何一个手指的位置发生变化时触发。
          gestureend 当任何一个手指从屏幕上面移开时触发。
          • 每个手势事件的event对象都包含着标准的鼠标事件属性：bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey和metaKey。
          • 还包含两个额外的属性：rotation 和scale。
          名称 详细
          rotation 表示手指变化引起的旋转角度，负值表示逆时针旋转，正值表示顺时针旋转（该值从0 开始）。
          scale 表示两个手指间距离的变化情况（例如向内收缩会缩短距离）；这个值从1 开始，并随距离拉大而增长，随距离缩短而减小。 
          function handleGestureEvent(event){
    var output = document.getElementById("output");
    switch(event.type){
    case "gesturestart":
        output.innerHTML = "Gesture started (rotation=" + event.rotation +
        ",scale=" + event.scale + ")";
        break;
    case "gestureend":
        output.innerHTML += "
          Gesture ended (rotation=" + event.rotation +
        ",scale=" + event.scale + ")";
        break;
    case "gesturechange":
        output.innerHTML += "
          Gesture changed (rotation=" + event.rotation +
        ",scale=" + event.scale + ")";
        break;
    }
}
document.addEventListener("gesturestart", handleGestureEvent, false);
document.addEventListener("gestureend", handleGestureEvent, false);
document.addEventListener("gesturechange", handleGestureEvent, false);
          【javascript】事件类型_第1张图片
          好好学习

          你可能感兴趣的:(【javascript】事件类型)

          • 斤斤计较的婚姻到底有多难？ 白心之岂必有为
            很多人私聊我会问到在哪个人群当中斤斤计较的人最多？我都会回答他，一般婚姻出现问题的斤斤计较的人士会非常多，以我多年经验，在婚姻落的一塌糊涂的人当中，斤斤计较的人数占比在20～30%以上，也就是说10个婚姻出现问题的斤斤计较的人有2-3个有多不减。在婚姻出问题当中，有大量的心理不平衡的、尖酸刻薄的怨妇。在婚姻中仅斤斤计较有两种类型：第一种是物质上的，另一种是精神上的。在物质与精神上抠门已经严重的影响
          • 机器学习与深度学习间关系与区别 ℒℴѵℯ心·动ꦿ໊ོ꫞ 人工智能学习深度学习python
            一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
          • android系统selinux中添加新属性property 辉色投像
            1.定位/android/system/sepolicy/private/property_contexts声明属性开头：persist.charge声明属性类型：u:object_r:system_prop:s0图12.定位到android/system/sepolicy/public/domain.te删除neverallow{domain-init}default_prop:property
          • C语言如何定义宏函数？ 小九格物 c语言
            在C语言中，宏函数是通过预处理器定义的，它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为，但它们不是真正的函数，因为它们在编译时不会进行类型检查，也不会分配存储空间。宏函数的定义通常使用#define指令，后面跟着宏的名称和参数列表，以及宏展开后的代码。宏函数的定义方式：1.基本宏函数：这是最简单的宏函数形式，它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参
          • 学点心理知识，呵护孩子健康 静候花开_7090
            昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
          • c++ 的iostream 和 c++的stdio的区别和联系 黄卷青灯77 c++算法开发语言iostreamstdio
            在C++中，iostream和C语言的stdio.h都是用于处理输入输出的库，但它们在设计、用法和功能上有许多不同。以下是两者的区别和联系：区别1.编程风格iostream（C++风格）：C++标准库中的输入输出流类库，支持面向对象的输入输出操作。典型用法是cin（输入）和cout（输出），使用>操作符来处理数据。更加类型安全，支持用户自定义类型的输入输出。#includeintmain(){in
          • Long类型前后端数据不一致 igotyback 前端
            响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
          • 扫地机类清洁产品之直流无刷电机控制 悟空胆好小 清洁服务机器人单片机人工智能
            扫地机类清洁产品之直流无刷电机控制1.1前言扫地机产品有很多的电机控制，滚刷电机1个，边刷电机1-2个，清水泵电机，风机一个，部分中高端产品支持抹布功能，也就是存在抹布盘电机，还有追觅科沃斯石头等边刷抬升电机，滚刷抬升电机等的，这些电机有直流有刷电机，直接无刷电机，步进电机，电磁阀，挪动泵等不同类型。电机的原理，驱动控制方式也不行。接下来一段时间的几个文章会作个专题分析分享。直流有刷电机会自动持续
          • Linux下QT开发的动态库界面弹出操作（SDL2） 13jjyao QT类qt开发语言sdl2linux
            需求：操作系统为linux，开发框架为qt，做成需带界面的qt动态库，调用方为java等非qt程序难点：调用方为java等非qt程序，也就是说调用方肯定不带QApplication::exec()，缺少了这个，QTimer等事件和QT创建的窗口将不能弹出(包括opencv也是不能弹出)；这与qt调用本身qt库是有本质的区别的思路：1.调用方缺QApplication::exec()，那么我们在接口
          • 消息中间件有哪些常见类型 xmh-sxh-1314 java
            消息中间件根据其设计理念和用途，可以大致分为以下几种常见类型：点对点消息队列（Point-to-PointMessagingQueues）：在这种模型中，消息被发送到特定的队列中，消费者从队列中取出并处理消息。队列中的消息只能被一个消费者消费，消费后即被删除。常见的实现包括IBM的MQSeries、RabbitMQ的部分使用场景等。适用于任务分发、负载均衡等场景。发布/订阅消息模型（Pub/Sub
          • 《大清方方案》| 第二话 谁佐清欢
            和珅究竟说了些什么？竟能令堂堂九五之尊龙颜失色！此处暂且按下不表；单说这位乾隆皇帝，果真不愧是康熙从小带过的，一旦决定了要做的事，便杀伐决断毫不含糊。他当即亲自拟旨，着令和珅为钦差大臣，全权负责处理方方事件，并钦赐尚方宝剑，遇急则三品以下官员可先斩后奏。和珅身负皇上重托，岂敢有半点怠慢，当夜即率领相关人等，马不停蹄杀奔江汉。这一路上，和珅的几位幕僚一直在商讨方方事件的处置方案。有位年轻幕僚建议快刀
          • 【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数 广龙宇 一起学Rust#Rust设计模式rust设计模式开发语言
            提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分
          • Pyecharts数据可视化大屏：打造沉浸式数据分析体验 我的运维人生 信息可视化数据分析数据挖掘运维开发技术共享
            Pyecharts数据可视化大屏：打造沉浸式数据分析体验在当今这个数据驱动的时代，如何将海量数据以直观、生动的方式展现出来，成为了数据分析师和企业决策者关注的焦点。Pyecharts，作为一款基于Python的开源数据可视化库，凭借其丰富的图表类型、灵活的配置选项以及高度的定制化能力，成为了构建数据可视化大屏的理想选择。本文将深入探讨如何利用Pyecharts打造数据可视化大屏，并通过实际代码案例
          • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
            ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
          • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
            加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
          • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
            ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
          • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
            Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
          • python八股文面试题分享及解析(1) Shawn________ python
            #1.'''a=1b=2不用中间变量交换a和b'''#1.a=1b=2a,b=b,aprint(a)print(b)结果：21#2.ll=[]foriinrange(3):ll.append({'num':i})print(11)结果:#[{'num':0},{'num':1},{'num':2}]#3.kk=[]a={'num':0}foriinrange(3):#0,12#可变类型，不仅仅改变
          • node.js学习 小猿L node.jsnode.js学习vim
            node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
          • 番茄西红柿叶子病害分类数据集12882张11类别 futureflsl 数据集分类数据挖掘人工智能
            数据集类型：图像分类用，不可用于目标检测无标注文件数据集格式：仅仅包含jpg图片，每个类别文件夹下面存放着对应图片图片数量(jpg文件个数)：12882分类类别数：11类别名称:["Bacterial_Spot_Bacteria","Early_Blight_Fungus","Healthy","Late_Blight_Water_Mold","Leaf_Mold_Fungus","Powdery
          • Redis系列：Geo 类型赋能亿级地图位置计算 Ly768768 redisbootstrap数据库
            1前言我们在篇深刻理解高性能Redis的本质的时候就介绍过Redis的几种基本数据结构，它是基于不同业务场景而设计的：动态字符串(REDIS_STRING)：整数(REDIS_ENCODING_INT)、字符串(REDIS_ENCODING_RAW)双端列表(REDIS_ENCODING_LINKEDLIST)压缩列表(REDIS_ENCODING_ZIPLIST)跳跃表(REDIS_ENCODI
          • Rust基础知识 GRKF15 rust开发语言后端
            1.Rust语言简介1.1基础语法变量声明：let关键字用于声明变量，可以指定或不指定类型，如leta=10;和letmutc=30i32;。函数定义：使用fn关键字定义函数，并指定参数类型及返回类型，如fnadd(i:i32,j:i32)->i32{i+j}。控制流：包括if、else等，控制语句后需要使用;来结束语句。1.2数据类型整数类型：i8、i16、i32、i64、i128，以及无符号的
          • C++菜鸟教程 - 从入门到精通 第二节 DreamByte c++
            一.上节课的补充(数据类型)1.前言继上节课,我们主要讲解了输入,输出和运算符,我们现在来补充一下数据类型的知识上节课遗漏了这个知识点,非常的抱歉顺便说一下,博主要上高中了,更新会慢,2-4周更新一次对了,正好赶上中秋节,小编跟大家说一句:中秋节快乐!2.int类型上节课,我们其实只用了int类型int类型,是整数类型,它们存贮的是整数,不能存小数(浮点数)定义变量的方式很简单inta;//定义一
          • 一个历史事件和查理一世走上断头台有很大关系，这个事件是什么？ 王老师聊围棋
            今天我要讲的历史事件，查理一世被处死的始末。其实查理一世给被处死的时候，与一个事件有很大的联系。这个事件是“普莱德清洗”。提到这个事件，我们不得不提到一个人，这个人就是克伦威尔。可以说，查理一世能够走上断头台，克伦威尔有很大的功劳。为什么这么说呢。那我们就成英国内战的终结说起吧。我们都知道英国的内战是有保王党挑起来。在保王党军队一路凯歌进攻的同时。就在1645年6月14日，在纳西比荒原上进行最后的
          • 4招写出高价值文章 zhiliner
            文章写得泛泛是因为思考得不够深，思考得越深文章会越有价值。拿到一个主题一定要去深入挖掘事件背后的东西，比如人物困境以及趋势性的东西。写作过程中有几个深度思考的方法一、解剖，让旧素材焕发新意作为一个写作者，我们能够做的最大贡献，就是给出自己看世界的角度。解剖其实就是把这个话题相关的信息都列出来，详细的列出来，看清楚它的内部。我们看到一个老话题或者一段旧素材的时候，不要只看这个素材或者话题本身，一定要
          • ES聚合分析原理与代码实例讲解 光剑书架上的书 大厂Offer收割机面试题简历程序员读书硅基计算碳基计算认知计算生物计算深度学习神经网络大数据AIGCAGILLMJavaPython架构设计Agent程序员实现财富自由
            ES聚合分析原理与代码实例讲解1.背景介绍1.1问题的由来在大规模数据分析场景中，特别是在使用Elasticsearch（ES）进行数据存储和检索时，聚合分析成为了一个至关重要的功能。聚合分析允许用户对数据集进行细分和分组，以便深入探索数据的结构和模式。这在诸如实时监控、日志分析、业务洞察等领域具有广泛的应用。1.2研究现状目前，ES聚合分析已经成为现代大数据平台的核心组件之一。它支持多种类型的聚
          • 关于Mysql 中 Row size too large (＞ 8126) 错误的解决和理解 秋刀prince mysqlmysql数据库
            提示：啰嗦一嘴，数据库的任何操作和验证前，一定要记得先备份！！！不会有错；文章目录问题发现一、问题导致的可能原因1、页大小2、行格式2.1compact格式2.2Redundant格式2.3Dynamic格式2.4Compressed格式3、BLOB和TEXT列二、解决办法1、修改页大小（不推荐）2、修改行格式3、修改数据类型为BLOB和TEXT列4、其他优化方式（可以参考使用）4.1合理设置数据
          • 母亲节如何做小红书营销 美橙传媒
            小红书的一举一动引起了外界的高度关注。通过爆款笔记和流行话题，我们可以看到“干货”类型的内容在小红书中偏向实用的生活经验共享和生活指南非常受欢迎。根据运营社的分析，这种现象是由小红书用户心智和内容社区背后机制共同决定的。首先，小红书将使用“强搜索”逻辑为用户提供特定的“搜索场景”。在“我必须这样生活”中，大量使用了满足小红书站用户喜好和需求的内容。内容社区自制的高质量内容也吸引了寻找营销新途径的品
          • 白骑士的Java教学基础篇 2.5 控制流语句 白骑士所长 Java教学java开发语言
            欢迎继续学习Java编程的基础篇！在前面的章节中，我们了解了Java的变量、数据类型和运算符。接下来，我们将探讨Java中的控制流语句。控制流语句用于控制程序的执行顺序，使我们能够根据特定条件执行不同的代码块，或重复执行某段代码。这是编写复杂程序的基础。通过学习这一节内容，你将掌握如何使用条件语句和循环语句来编写更加灵活和高效的代码。条件语句条件语句用于根据条件的真假来执行不同的代码块。if语句‘
          • 4.C_数据结构_队列 荣世蓥 数据结构数据结构
            概述什么是队列：队列是限定在两端进行插入操作和删除操作的线性表。具有先入先出(FIFO)的特点相关名词：队尾：写入数据的一段队头：读取数据的一段空队：队列中没有数据，队头指针=队尾指针满队：队列中存满了数据，队尾指针+1=队头指针循环队列1、基本内容循环队列是以数组形式构成的队列数据结构。循环队列的结构体如下：typedefintdata_t;//队列数据类型#defineN64//队列容量typ
          • 项目中 枚举与注解的结合使用 飞翔的马甲 javaenumannotation
            前言：版本兼容，一直是迭代开发头疼的事，最近新版本加上了支持新题型，如果新创建一份问卷包含了新题型，那旧版本客户端就不支持，如果新创建的问卷不包含新题型，那么新旧客户端都支持。这里面我们通过给问卷类型枚举增加自定义注解的方式完成。顺便巩固下枚举与注解。 一、枚举 1.在创建枚举类的时候，该类已继承java.lang.Enum类，所以自定义枚举类无法继承别的类，但可以实现接口。
          • 【Scala十七】Scala核心十一：下划线_的用法 bit1129 scala
            下划线_在Scala中广泛应用，_的基本含义是作为占位符使用。_在使用时是出问题非常多的地方，本文将不断完善_的使用场景以及所表达的含义   1. 在高阶函数中使用 scala> val list = List(-3,8,7,9) list: List[Int] = List(-3, 8, 7, 9) scala> list.filter(_ > 7) r
          • web缓存基础：术语、http报头和缓存策略 dalan_123 Web
            对于很多人来说，去访问某一个站点，若是该站点能够提供智能化的内容缓存来提高用户体验，那么最终该站点的访问者将络绎不绝。缓存或者对之前的请求临时存储，是http协议实现中最核心的内容分发策略之一。分发路径中的组件均可以缓存内容来加速后续的请求，这是受控于对该内容所声明的缓存策略。接下来将讨web内容缓存策略的基本概念，具体包括如如何选择缓存策略以保证互联网范围内的缓存能够正确处理的您的内容，并谈论下
          • crontab 问题 周凡杨 linuxcrontabunix
              一： 0481-079   Reached   a   symbol   that   is   not   expected.   背景： */5   *   *   *   *  /usr/IBMIHS/rsync.sh 
          • 让tomcat支持2级域名共享session g21121 session
            tomcat默认情况下是不支持2级域名共享session的，所有有些情况下登陆后从主域名跳转到子域名会发生链接session不相同的情况，但是只需修改几处配置就可以了。 打开tomcat下conf下context.xml文件 找到Context标签,修改为如下内容 如果你的域名是www.test.com <Context sessionCookiePath="/path&q
          • web报表工具FineReport常用函数的用法总结（数学和三角函数） 老A不折腾 Webfinereport总结
              ABS ABS(number):返回指定数字的绝对值。绝对值是指没有正负符号的数值。 Number:需要求出绝对值的任意实数。 示例: ABS(-1.5)等于1.5。 ABS(0)等于0。 ABS(2.5)等于2.5。   ACOS ACOS(number):返回指定数值的反余弦值。反余弦值为一个角度，返回角度以弧度形式表示。 Number:需要返回角
          • linux 启动java进程 sh文件 墙头上一根草 linuxshelljar
            #!/bin/bash #初始化服务器的进程PId变量 user_pid=0; robot_pid=0; loadlort_pid=0; gateway_pid=0; ######### #检查相关服务器是否启动成功 #说明： #使用JDK自带的JPS命令及grep命令组合，准确查找pid #jps 加 l 参数，表示显示java的完整包路径 #使用awk，分割出pid
          • 我的spring学习笔记5-如何使用ApplicationContext替换BeanFactory aijuans Spring 3 系列
            如何使用ApplicationContext替换BeanFactory？ package onlyfun.caterpillar.device; import org.springframework.beans.factory.BeanFactory; import org.springframework.beans.factory.xml.XmlBeanFactory; import
          • Linux 内存使用方法详细解析 annan211 linux内存Linux内存解析
            来源 http://blog.jobbole.com/45748/ 我是一名程序员，那么我在这里以一个程序员的角度来讲解Linux内存的使用。 一提到内存管理，我们头脑中闪出的两个概念，就是虚拟内存，与物理内存。这两个概念主要来自于linux内核的支持。 Linux在内存管理上份为两级，一级是线性区，类似于00c73000-00c88000，对应于虚拟内存，它实际上不占用
          • 数据库的单表查询常用命令及使用方法(-) 百合不是茶 oracle函数单表查询
                创建数据库;       --建表 create table bloguser(username varchar2(20),userage number(10),usersex char(2));       创建bloguser表,里面有三个字段     &nbs
          • 多线程基础知识 bijian1013 java多线程threadjava多线程
            一．进程和线程 进程就是一个在内存中独立运行的程序，有自己的地址空间。如正在运行的写字板程序就是一个进程。 “多任务”：指操作系统能同时运行多个进程（程序）。如WINDOWS系统可以同时运行写字板程序、画图程序、WORD、Eclipse等。 线程：是进程内部单一的一个顺序控制流。 线程和进程 a.       每个进程都有独立的
          • fastjson简单使用实例 bijian1013 fastjson
            一.简介         阿里巴巴fastjson是一个Java语言编写的高性能功能完善的JSON库。它采用一种“假定有序快速匹配”的算法，把JSON Parse的性能提升到极致，是目前Java语言中最快的JSON库；包括“序列化”和“反序列化”两部分，它具备如下特征：     
          • 【RPC框架Burlap】Spring集成Burlap bit1129 spring
            Burlap和Hessian同属于codehaus的RPC调用框架，但是Burlap已经几年不更新，所以Spring在4.0里已经将Burlap的支持置为Deprecated,所以在选择RPC框架时，不应该考虑Burlap了。 这篇文章还是记录下Burlap的用法吧，主要是复制粘贴了Hessian与Spring集成一文，【RPC框架Hessian四】Hessian与Spring集成  
          • 【Mahout一】基于Mahout 命令参数含义 bit1129 Mahout
            1. mahout seqdirectory   $ mahout seqdirectory --input (-i) input Path to job input directory(原始文本文件). --output (-o) output The directory pathna
          • linux使用flock文件锁解决脚本重复执行问题 ronin47 linux lock　重复执行
            linux的crontab命令，可以定时执行操作，最小周期是每分钟执行一次。关于crontab实现每秒执行可参考我之前的文章《linux crontab 实现每秒执行》现在有个问题，如果设定了任务每分钟执行一次，但有可能一分钟内任务并没有执行完成，这时系统会再执行任务。导致两个相同的任务在执行。 例如： <? //  test .php
          • java-74-数组中有一个数字出现的次数超过了数组长度的一半，找出这个数字 bylijinnan java
            public class OcuppyMoreThanHalf { /** * Q74 数组中有一个数字出现的次数超过了数组长度的一半，找出这个数字 * two solutions: * 1.O(n) * see <beauty of coding>--每次删除两个不同的数字，不改变数组的特性 * 2.O(nlogn) * 排序。中间
          • linux 系统相关命令 candiio linux
            系统参数 cat /proc/cpuinfo  cpu相关参数 cat /proc/meminfo 内存相关参数 cat /proc/loadavg 负载情况 性能参数 1）top M：按内存使用排序 P：按CPU占用排序 1：显示各CPU的使用情况 k：kill进程 o：更多排序规则 回车：刷新数据 2）ulimit ulimit -a：显示本用户的系统限制参
          • [经营与资产]保持独立性和稳定性对于软件开发的重要意义 comsci 软件开发
                 一个软件的架构从诞生到成熟，中间要经过很多次的修正和改造       如果在这个过程中，外界的其它行业的资本不断的介入这种软件架构的升级过程中           那么软件开发者原有的设计思想和开发路线
          • 在CentOS5.5上编译OpenJDK6 Cwind linuxOpenJDK
            几番周折终于在自己的CentOS5.5上编译成功了OpenJDK6，将编译过程和遇到的问题作一简要记录，备查。 0. OpenJDK介绍 OpenJDK是Sun（现Oracle）公司发布的基于GPL许可的Java平台的实现。其优点： 1、它的核心代码与同时期Sun（-> Oracle）的产品版基本上是一样的，血统纯正，不用担心性能问题，也基本上没什么兼容性问题；（代码上最主要的差异是
          • java乱码问题 dashuaifu java乱码问题js中文乱码
            swfupload上传文件参数值为中文传递到后台接收中文乱码     在js中用setPostParams（{"tag" : encodeURI( document.getElementByIdx_x("filetag").value，"utf-8")}）; 然后在servlet中String t
          • cygwin很多命令显示command not found的解决办法 dcj3sjt126com cygwin
            cygwin很多命令显示command not found的解决办法   修改cygwin.BAT文件如下 @echo off D: set CYGWIN=tty notitle glob set PATH=%PATH%;d:\cygwin\bin;d:\cygwin\sbin;d:\cygwin\usr\bin;d:\cygwin\usr\sbin;d:\cygwin\us
          • [介绍]从 Yii 1.1 升级 dcj3sjt126com PHPyii2
            2.0 版框架是完全重写的，在 1.1 和 2.0 两个版本之间存在相当多差异。因此从 1.1 版升级并不像小版本间的跨越那么简单，通过本指南你将会了解两个版本间主要的不同之处。 如果你之前没有用过 Yii 1.1，可以跳过本章，直接从"入门篇"开始读起。 请注意，Yii 2.0 引入了很多本章并没有涉及到的新功能。强烈建议你通读整部权威指南来了解所有新特性。这样有可能会发
          • Linux SSH免登录配置总结 eksliang ssh-keygenLinux SSH免登录认证Linux SSH互信
            转载请出自出处：http://eksliang.iteye.com/blog/2187265 一、原理      我们使用ssh-keygen在ServerA上生成私钥跟公钥，将生成的公钥拷贝到远程机器ServerB上后,就可以使用ssh命令无需密码登录到另外一台机器ServerB上。      生成公钥与私钥有两种加密方式，第一种是
          • 手势滑动销毁Activity gundumw100 android
            老是效仿ios，做android的真悲催！ 有需求：需要手势滑动销毁一个Activity 怎么办尼？自己写？ 不用~，网上先问一下百度。 结果： http://blog.csdn.net/xiaanming/article/details/20934541 首先将你需要的Activity继承SwipeBackActivity，它会在你的布局根目录新增一层SwipeBackLay
          • JavaScript变换表格边框颜色 ini JavaScripthtmlWebhtml5css
            效果查看：http://hovertree.com/texiao/js/2.htm代码如下，保存到HTML文件也可以查看效果： <html> <head> <meta charset="utf-8"> <title>表格边框变换颜色代码-何问起</title> </head> <body&
          • Kafka Rest : Confluent kane_xie kafkaRESTconfluent
            最近拿到一个kafka rest的需求，但kafka暂时还没有提供rest api（应该是有在开发中，毕竟rest这么火），上网搜了一下，找到一个Confluent Platform，本文简单介绍一下安装。 这里插一句，给大家推荐一个九尾搜索，原名叫谷粉SOSO，不想fanqiang谷歌的可以用这个。以前在外企用谷歌用习惯了，出来之后用度娘搜技术问题，那匹配度简直感人。 环境声明：Ubu
          • Calender不是单例 men4661273 单例Calender
                     在我们使用Calender的时候，使用过Calendar.getInstance()来获取一个日期类的对象，这种方式跟单例的获取方式一样，那么它到底是不是单例呢，如果是单例的话，一个对象修改内容之后，另外一个线程中的数据不久乱套了吗？从试验以及源码中可以得出，Calendar不是单例。 测试： Calendar c1 =
          • 线程内存和主内存之间联系 qifeifei java thread
            1， java多线程共享主内存中变量的时候，一共会经过几个阶段，    lock:将主内存中的变量锁定，为一个线程所独占。   unclock:将lock加的锁定解除，此时其它的线程可以有机会访问此变量。   read:将主内存中的变量值读到工作内存当中。   load:将read读取的值保存到工作内存中的变量副本中。  
          • schedule和scheduleAtFixedRate tangqi609567707 javatimerschedule
            原文地址：http://blog.csdn.net/weidan1121/article/details/527307 import java.util.Timer;import java.util.TimerTask;import java.util.Date; /** * @author vincent */public class TimerTest {  
          • erlang 部署 wudixiaotie erlang
            1.如果在启动节点的时候报这个错 ： {"init terminating in do_boot",{'cannot load',elf_format,get_files}} 则需要在reltool.config中加入 {app, hipe, [{incl_cond, exclude}]},     2.当generate时，遇到： ERROR