jQuery – 8.事件和事件參數

 

 

事件javascript


(*)JQuery中的事件綁定:$(「#btn」).bind(「click」,function(){}),每次都這麼調用太麻煩,因此jQuery能夠用$(「#btn」).click(function(){})來進行簡化。unbindhtml

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="Jqeury/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(function () {
            $("input[value='bind']").click(function() {
                $("#btn").bind(
                    {
                        "click": function() { alert("click"); },
                        "mouseover": function() { alert("mouseover"); },
                        "mouseout": function() { alert("mouseout"); }
                    }
                );
            });
           
            
            $("input[value='unbind']").click(function () {
                //移除事件
                //$("#btn").unbind("mouseout");
                //移除全部事件
                $("#btn").unbind();
            })
            
        })
    </script>
</head>

<body>
    <input id="btn" type="button" value="test">
    <input type="button" value="bind">
    <input type="button" value="unbind">
    <input  type="button" value="one" />
</body>
</html>


一次性事件:若是綁定的事件只想執行一次隨後當即unbind能夠使用one()方法進行事件綁定 java

            //一次性事件
            $("input[value='one']").click(function () {
                $("#btn").one("click", function() {
                    alert("click");
                });
            })

 


(*)合成事件 hover ,hover(enterfn (焦點),leavefn (離開焦點)), 當鼠標放在元素上時調用enterfn方法,當鼠標離開元素的時候調用leavefn方法。 (toggle() :jquery.1.9刪除了切換功能) mouseover、mouseenter的區別:div裏套div。見備註。和事件冒泡有關係。 事件冒泡:JQuery中也像JavaScript同樣是事件冒泡 若是想得到事件相關的信息,只要給響應的匿名函數增長一個參數:e,e就是事件對象。調用事件對象的stopPropagation()方法終止冒泡。e. stopPropagation(); $("tr").click(function(e) { alert("tr被點擊"); e.stopPropagation(); });//注意函數的參數是e 阻止默認行爲:有的元素有默認行爲,好比超連接點擊後會轉向新連接、提交按鈕默認會提交表單,若是想阻止默認行爲只要調用事件對象的preventDefault()方法和Dom中的window.event.returnValue=false效果同樣。 $("a").click(function(e) { alert("全部超連接暫時所有禁止點擊"); e.preventDefault(); });
相關文章
相關標籤/搜索