jQuery 事件

jQuery 事件

• click 单击事件(常用)
• dblclick 双击事件
• mouseover 鼠标移入事件(鼠标穿过被选元素或被选元素的子元素会触发)
• mouseout 鼠标移出
• mouseenter (常用)进入事件(鼠标只穿过被选元素会触发事件)
• mouseleave 鼠标出去
• mousedown 鼠标按下
• mouseup 鼠标弹起
• focus() 获取焦点
• blur() 失去焦点
• change() 表单元素发生改变时触发事件
  select() 文本元素发生改变时触发事件
  submit() 表单元素发生改变时触发事件

事件流

<a href="javascript:void(0);" id="btn">按钮</a>
<script>
    window.onload = function () {
        var oBtn = document.getElementById('btn');

        //1
        document.addEventListener('click', function () {
            console.log('document处于事件捕获阶段');
        }, true);

        //2
        document.documentElement.addEventListener('click', function () {
            console.log('html处于事件捕获阶段');
        }, true);

        //3
        document.body.addEventListener('click', function () {
            console.log('body处于事件捕获阶段');
        }, true);

        //4
        oBtn.addEventListener('click', function () {
            console.log('btn处于事件捕获阶段');
        }, true);

        //4
        oBtn.addEventListener('click', function () {
            console.log('btn处于事件冒泡阶段');
        }, false);
        //5  false 表示冒泡
         document.body.addEventListener('click', function () {
            console.log('body处于事件冒泡阶段');
        }, false);
        // //6
        document.documentElement.addEventListener('click', function () {
            console.log('html处于事件冒泡阶段');
        }, false);

        //7
        document.addEventListener('click', function () {
            console.log('document处于事件冒泡阶段');
        }, false);
    };

</script>

jquery 中的事件冒泡

事件监听

DOM的2级事件

• 事件捕获
• 处于目标阶段
• 事件冒泡阶段

oDiv.onclick = function(){};
等价于
//false 表示没有捕获阶段  处于目标 冒泡
oDiv.addEventLister('click',function(){},false);

form阻止默认事件

submit()
e.preventDeault()

<a href='javascript:void(0);'>
    
return false;//即阻止了默认事件,又阻止了冒泡
相当于
 e.stopPropagation();  // 阻止冒泡
 e.preventDefault();  // 阻止默认事件

$(function () {
    //1.将form充当div标签
    //2.提交表单的时候 后台返回相应的数据
    //3.将form表单的默认action行为 阻止
    $('form').submit(function (e) {
        //阻止默认事件
        e.preventDefault()
        console.log(1111);

        //   发送ajax
    })
})

<script>
    $(function () {

    //jquery中没有捕获阶段  冒泡阶段
    //每一个事件的回调函数 都会有一个事件对象(js)
    $('#btn').click(function (e) {
        console.log(e);
        // 阻止冒泡
        e.stopPropagation();
        $('.box p').css({
            'font-size':20
        })
    });

    $('.box').click(function (e) { 
        e.stopPropagation();
        alert(1);
        $(this).css({
            backgroundColor:'green'
        })
    });

    $('body').click(function () {
        $(this).css({
            backgroundColor:'yellow'
        })
    })
})
</script>


$(function () {
    function changeFun() {
        $('.changefu').click(function (e) {
            e.stopPropagation();
            $('.fuBox').stop().slideDown(400);
        })

        $('.fuBox .container span,body').click(function (e) {
            $('.fuBox').stop().slideUp(400);
        })

        $('.fuBox .container ul li').click(function (e) {
            e.stopPropagation()
            alert(1);
        })

        $('.fuBox').click(function (e) {
            // e.stopPropagation();
            //即阻止了默认事件 又阻止冒泡
            return false;
        })
        $('a').click(function (e) {
            // e.stopPropagation();
            // e.preventDefault();
            alert(1);
            return false;
        })
    }
    changeFun();
})

事件对象

• 每个事件都会默认有个event对象

e.target  // 事件目标对象

e.keycode  // 键码
//阻止冒泡
e.stopPropogation();
// 阻止默认事件
e.preventDefault()  针对于a  form


$(function () {
    function enter(){
        alert(1)
    }
    $('input[type=text]').keydown(function (e) {
        console.log(e.keyCode);
        console.log(e.target);// jsdom对象
        console.log(e.currentTarget);// jsdom对象
        console.log(this);// jsdom对象
        // switch (e.keyCode){
        //     case 13:
        //         //回车键
        //         enter()
        //         break;
        // }
    })
})

$(function () {
    //jquery中没有捕获阶段  冒泡阶段
    //每一个事件的回调函数 都会有一个事件对象(js)
    $('#btn').click(function (e) {
        console.log(this);
        console.log(e.target); //
        e.stopPropagation();
        // console.log(e.currentTarget);
    })

    $('.box').click(function (e) {
        console.log(this);
        console.log(e.target); //传递事件的对象
        e.stopPropagation()
        // console.log(e.currentTarget);
    })

    $('body').click(function (e) {
        console.log(this);
        console.log(e.target);
        //  console.log(e.currentTarget);
    })
})

数据驱动(双向的数据绑定)

//初始化操作
$('p').html($('input[type=text]').val());

$('input[type=text]')[0].oninput = function (e) {
    // console.log(e);
    var val = e.target.value;
    console.log(val);
    $('p').html(val);
}

$(function () {
    var data = {
        status:'ok',
        lists:[
            {
                title:'完美世界222',
                author:'辰东',
                status:'连载中',
                addr:'起点中文网'
            },
             {
                title:'蛮荒记',
                author:'我吃西红柿',
                status:'已完结',
                addr:'起点中文网'
            },
             {
                title:'辟邪剑谱',
                author:'吴老板',
                status:'连载中ing',
                addr:'起点中文网'
            }
        ]
    };

    if (data.status == 'ok'){
        data.lists.forEach(function (item,index) {
          $(`  <li>
            <p class="title">${item.title}</p>
            <p class="author">${item.author}</p>
            <p class="stats">${item.status}</p>
            <p class="addr">${item.addr}</p>
        </li>`).appendTo('ul');
        })
    }
})

但双击问题

var i = 20;
var isHede = true;
$("button").dblclick(function (e) {
    e.stopPropagation();
    isHede = false;
    i += 100;
    $(this).css({
        "left": i,
        backgroundColor: "red"
    });
    $(this).html("单击啊死鬼")
    console.log("双击");

});
$("button").click(function (e) {
    e.stopPropagation();
    isHede = true;
    console.log(11111)
    setTimeout(function () {
        if (isHede) {
            $("button").html("单击哦");
            $("button").css({
                backgroundColor: "#2f9de2"
            });
            console.log("单击了");
        }
    }, 400);
///////////////////////////////////////////////////////////////////////////////////////////////    
// 解决但双击问题
    
    // 双击时候 出现两次单击（干掉）
    var time = null;
    //双击  ---》（ 1次单击+（小于200ms）1次单击）
    $('button').click(function () {
        // 取消上次延时未执行的方法
        clearTimeout(time);
        //执行延时
        time = setTimeout(function () {
            //do function在此处写单击事件要执行的代码
            console.log('单机')
        }, 300);
    });

    $('button').dblclick(function(){
        clearTimeout(time)

        console.log('双击了')
    })

鼠标的 进入跟移出

/*冒泡导致了问题
//鼠标穿过备选元素 或者是被选的子元素
$('ul li').mouseover(function () {
    console.log('进来了')
    $('ul li .list').show();
})
 $('ul li').mouseout(function () {
    console.log('出去了')
    $('ul li .list').hide();
})
*/
$('ul li').mouseenter(function () {
    console.log('进来了')
    $('ul li .list').show();
})
$('ul li ').mouseleave(function () {
    console.log('出去了')
    $('ul li .list').hide();
})

事件

//如果有回调函数参数,表示输入框获取焦点的额时候会触发
//如果没有回调函数,当调用focus() 立马会获取焦点
$('input[type=text]').focus(function () {
    console.log(1111);
});

setTimeout(function () {
    $('input[type=text]').blur(function () {
        console.log(2222)
    });
}, 3000)

合成事件

$('.box').hover(function () {
    // 进入时执行
    $(this).css('backgroundColor', 'green')
}, function () {
    // 离开时执行
    $(this).css('backgroundColor', 'red')
})

表单事件

<body>
男<input type="radio" checked name="sex" value="1">
女<input type="radio" name="sex" value="0">

<select name="" id="">
    <option value="a">alex</option>
    <option value="b">wusir</option>
    <option value="c">xiaomage</option>
</select>

<input type="text" id="select">
<script src="./libs/jquery-3.3.1.js"></script>
<script>
    $(function () {      
        $('input[type=radio]').change(function (e) {
            console.log('被选中了');
            console.log(e.target);
            console.log($(this).val());
            // this.value
            // $(this).val()
        });
       
        $('select').change(function () {
            console.log(this);

           console.log( $(this).find('option:selected').text());
           console.log( $(this).find('option:selected').val());
        })

        $('#select').select(function () {
            console.log('被选中了');
        })


    })
</script>
</body>

事件代理

$('.box').on('click','li',function () {
    console.log($(this));
})

//未来追加的元素  是没有事件 我们通过事件委托  当你出现点击页面中的DOM没有任何反应
//1.DOM是否underfine  2.考虑事件代理
$('#append').click(function () {
    var val = $('input[type=text]').val();
    $('ul').append(`<li>${val}</li>`);
})