jQuery基礎事件處理

時間 2019-11-08

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jquery事件處理</title>
    <script src="jquery.min.js"></script>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: pink;
        }
        .current{
            background: green;
        }
    </style>
</head>
<body>
    <div>
        
    </div>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <script>
    
        $(function(){
            // <!--1  事件處理:on  註冊多個事件-->
            // $('div').on({
            //     mouseenter: function(){
            //         $(this).css('background',"blue");
            //     },
            //     mouseleave: function(){
            //         $(this).css('background',"red");
            //     },
            //     click: function(){
            //         $(this).css('background',"purple");                    
            //     },
            // });
            // 2  若是事件處理的是相同操做，能夠以下，表示鼠標進入和鼠標離開都會觸發函數
            $("div").on("mouseenter mouseleave",function(){
                $(this).toggleClass("current");//切換增長或者刪除類名的操做
            });
            // 3  事件委派：將本來綁定在子元素上的事件綁定到父元素上  $("ul").on('click','li',function(){})  事件綁定在父元素ul上，但觸發事件的對象是ul下的子元素li
            // on  【能夠給將來建立的元素綁定事件】 好比我先綁定ul元素，由li觸發函數，後建立新的li元素，點擊新的li元素仍然能夠觸發函數。即說明給將來建立的元素也綁定了事件
            $("ul").on('click','li',function(){
                alert('略略略略略');
            });
            $("ul").append($("<li>我是新建立的</li>"));



            // 解綁事件：off() 接觸on綁定事件
            $('ul').off("click",'li');//解綁委託事件
            $('div').off();//接觸div的全部on綁定事件

            // one() 只能觸發一次的事件
            $('div').one('click',function(){});

            // 自動觸發事件  trigger()  好比輪播圖自動播放，音樂自動播放，視頻自動播放等
            //1  element.事件()   2 element.trigger("事件")   3 element.triggerHandeler("事件")-----不會觸發元素的默認行爲，好比光標閃爍行爲不會被觸發

            // jquery事件對象：element.on(events,[selector],function(event) {})   
            // 阻止默認行爲：event.preventDefault()  或者return false
            // 阻止冒泡：event.stopPropagation()
        })
    </script>
    
</body>
</html>