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>1li>
        <li>2li>
        <li>3li>
    ul>

    <script>
    
        $(function(){
            // 
            // $('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($("
  • 我是新创建的
  • ")); // 解绑事件: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>

     

    待补充

    你可能感兴趣的:(jQuery基础事件处理)