【jQuery】之事件

時間 2019-12-08

標籤 jQuery 事件欄目 JQuery 简体版

原文原文鏈接

jQuerycss

事件jquery

1.頁面加載

以DOM提供的load事件和jQuery中的ready()方法來加載頁面瀏覽器

<script>
        window.onload = function () {
            var qyc = document.getElementById('qyc');
            console.log(qyc);
        }
//        window對象等於瀏覽器窗口
         /*load事件-當瀏覽器窗口加載完畢是被觸發
         * 事件處理函數中代碼邏輯，在瀏覽器加載中完畢後在執行*/
    </script>
</head>
<body>
<!-- HTML元素 -->
<button id="qyc">按鈕</button>
</body>

2.事件綁定

事件綁定和解綁

單事件綁定： type：事件類型的字符串 data：做爲event data屬性值給事件對象的格外數據對象 callback：綁定每一個元素的事件上面處理函數函數

<script src="js/jquery.js"></script>
</head>
<body>
<button id="qyc">按鈕</button>
<script>
    /*bind(type, data, callback)方法 - 綁定事件*/
    /*function click1(){
        console.log('this is button.');
    }
    function click2(){
        console.log('this is button too.');
    }
    $('#btn').bind('click', click1);
    $('#btn').bind('click', click2);*/
    /*
        unbind(type, data, callback)方法 - 解綁定事件

     */
    // $('#btn').unbind('click', click1);

    /*
        bind()與unbind()中data參數
        * data參數的值-利用event事件對象data屬性進行接收
        * 該參數的數據內容只能在事件的處理函數中被使用
      */
    // var obj = { a : '犬夜叉' };
    $('#btn').bind('click', { a : '犬夜叉' }, function(event){
        // var obj = { a : '犬夜叉' };
        console.log(event.data);
    });

</script>
</body>

多事件綁定和解綁

多事件綁定： type:事件類型的字符串一個或多個，有空格分隔多個事件 data：做爲event data屬性值給事件對象的格外數據對象 callback：綁定每一個元素的事件上面處理函數this

<script src="js/jquery.js"></script>
    <style>
        #qh {
            width: 100px;
            height: 20px;
            border: 1px solid black;
        }
        ul {
            list-style: none;
            padding: 0;

            display: none;
        }
        li {
            width: 100px;
            height: 20px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div id="qh">遊戲列表</div>
<ul>
    <li>端遊</li>
    <li>手遊</li>
    <li>頁遊</li>
</ul>
<script>
    /*$('#title').bind('mouseover', function(){
        $('ul').css('display','block');
    });
    $('#qh').bind('mouseover mouseout', function(){
        if ($('ul').is(':hidden')) {
            $('ul').css('display','block');
        } else {
            $('ul').css('display','none');
        }
    });
$('#title').bind('mouseout', function(){
        $('ul').css('display','none');
    });*/
    /* jQuery支持鏈式操做
   $('#title').bind('mouseover', function(){
       $('ul').css('display','block');
   }).bind('mouseout', function(){
       $('ul').css('display','none');
   });
   */


    $('#qh').bind('mouseover mouseout', function(){
        if ($('ul').is(':hidden')) {
            $('ul').css('display','block');
        } else {
            $('ul').css('display','none');
        }
    });
    // bind()方法-多事件綁定，事件名稱之間使用空格分隔
    /*
        unbind()方法
        1.沒有指定任何事件時-將指定元素的全部事件所有解綁定
        2.一個事件名稱時-將該元素的指定當個事件解綁定
        3.多個事件名稱時-將該元素的指定多個事件解綁定
     */
    $('#title').unbind('mouseover mouseout');
</script>
</body>

事件綁定方法對比

<script src="js/jquery.js"></script>
</head>
<body>
<script>
    /*
        jQuery中提供多組事件綁定與解綁定的方法
        * bind()與unbind()-jQuery 3.0版本後刪除方法
        * on()與off()方法-jQuery 1.7版本後新增方法
          * 其實bind()與unbind()的底層方法就是on()和off()
        * live()與die()-jQuery 1.7版本後刪除方法
          * 做用-實現事件委託
        * delegate()與undelegate() - jQuery 1.6版本後新增方法，jQuery 
       3.0版本後刪除方法
          * 做用-實現事件委託
        * one()-爲事件綁定一次性的函數
     */

</script>

3.事件切換

hover()方法：over：鼠標移動到元素上觸發函數 out：鼠標移開元素觸發函數code

<script src="js/jquery.js"></script>
    <style>
        #qh {
            width: 100px;
            height: 20px;
            border: 1px solid black;
        }
        ul {
            list-style: none;
            padding: 0;

            display: none;
        }
        li {
            width: 100px;
            height: 20px;
            border: 1px solid black;
        }

    </style>
</head>
<body>
<div id="qh">遊戲類型</div>
<ul>
    <li>端遊</li>
    <li>手遊</li>
    <li>頁遊</li>
</ul>
<script>
    /*
        鼠標懸停事件
        * mouseover-表示鼠標懸停在指定元素之上
        * mouseout-表示鼠標從指定元素上移開
     */
    $('#qh').bind('mouseover', function(){
        $('ul').css('display','block');
    });

    $('#qh').bind('mouseout', function(){
        $('ul').css('display','none');
    });

    // jQuery提供hover(over, out)方法
    $('#qh').hover(function(){
        $('ul').css('display','block');
    },function(){
        $('ul').css('display','none');
    });

</script>
</body>

4.事件模擬

以trigger()方法模擬觸發元素綁定的事件對象

<script src="js/jquery.js"></script>
</head>
<body>
<button id="qyc">按鈕</button>
<script>
    $('#qyc').bind('click',function() {
//    綁定事件-由用戶行爲進行觸發，調用處理函數
        console.log('you my button');
    });
    $('#qyc').trigger('click');
//    模擬用戶觸發事件
</script>
</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。