jQuery基础事件处理 

<!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>

 

待补充

posted @ 2019-10-25 09:15  悦耳pn  阅读(306)  评论(0)  编辑  收藏  举报