欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery基础事件处理

程序员文章站 2022-08-17 14:27:49
待补充 ......
<!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>

 

待补充