jquery事件触发

一 事件绑定的两种方式

$('xx').click(function(){
    })
$('xx').on('click',function(){
})

二 常用事件

1.click() 点击事件

$('.d1').click(function () {
        $(this).css({'background-color':'black'});
    });

2.focus() 聚焦事件

$('#username').focus(function () {
        $('.d1').css({'background-color':'green'});
    });

3.blur() 失去焦点事件

$('#username').blur(function () {
        $('.d1').css({'background-color':'pink'});
    });

4.change() 区域内容发生改变

 $('select').change(function () {
        $('.d1').toggleClass('cc');
    });

5.hover() 是对mouseenter()事件和mouseout()事件的封装

//鼠标悬浮发生的事件,有两步是对mouseenter和mouseout的封装 里边有两个匿名函数
    // $('.d1').hover(function () {
    //     $(this).css({'background-color':'blue'});
    // },
    // function(){
    //     $(this).css({'background-color':'yellow'});
    //
    // })

6.mouseover() 鼠标悬浮等同于hover事件

//mouseover 和 mouseenter事件的区别是 mouseover事件 如果标签有子标签,那么移入到
子标签时会连续触发, mouseenter事件不管有没有子标签只触发一次,表示鼠标进入这个对象
//鼠标进入
// $('.d2').mouseenter(function () {
    //     console.log('亚太应绿了')
    // });
​
    //鼠标悬浮
    $('.d2').mouseover(function () {
        console.log('绿了');

7. window之keydown()事件

// function函数的 e/event参数 表示的是事件 keydown/keyup keycode表示的是属性
按键值
$(window).keydown(function (e) {
        // console.log(e.keyCode);
        if (e.keyCode === 37){
            $('.d1').css({'background-color':'orange'});
        } else if (e.keyCode === 39){
            $('.d1').css({'background-color':'green'});
        }else {
            $('.d1').css({'background-color':'black'});
​
        }
    });

8.window之keyup()事件

 $(window).keyup(function (e) {
        console.log(e.keyCode);
    })

9.input事件 必须用on的绑定事件

针对百度搜索引擎
//input事件监听输入内容 必须用on触发事件 propertychange 用来兼容ie浏览器的
 $('#username').on('input propertychange',function(){
        console.log($(this).val());
    })

三 事件冒泡

//事件冒泡是指多个事件会一直往父级标签触发
 $('#d1').click(function () {
        alert('父级标签')
    });
    // $('#d2').click(function () {
    //     alert('子级标签');
    //     //消除事件冒泡方式一
    //     return false;
    //
    // });
    $('#d2').click(function (e) {
        alert('自己标签');
        e.stopPropagation();
    })

四 事件委托 必须用on的绑定方式

//事件委托是通过事件冒泡的原理,利用父标签去捕获子标签的事件,将未来添加进来的某些子标签
自动绑定上事件
//将点击事件委托给父级了,但是$(this)还是当前的点击对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委托</title>
</head>
<body>
<div class="c1">
    <input type="button" value="解压小按钮">
    <button class="c2">点击就送</button>
</div>
<script src="jquery-3.5.1.js"></script>
<script>
    $(':button').click(
       function () {
           alert('周雅婷跟我笑,哈哈哈哈哈');
           var a = $(this).clone(true);
           $('div').append(a);
                      }
    );
    $('.c1').on('click','.c2',function () {
        alert('臭屁在');
        var a = document.createElement('button');
        $(a).text('点击就送');
        console.log($(this)) //还是我们点击的这个对象
        $(a).addClass('c2');
        $('div').append(a);
    })
</script>
</body>
</html>

五 页面载入

方式一 DOM对象window操作

script 统一放在最下面
window.onload =  function(){}
// window.onload = function () {
    //     $('.c1').click(function(){
    //         $(this).css({'background-color':'blue'});
    //     })
    // }

方式二 jquery对象操作

1.$(document).ready(function(){})
2. $(function(){})
$(function () {
        $('.c1').click(function () {
            $(this).css({'background-color':'black'});
        })
    })

区别

1.window.onload()函数有覆盖现象,必须等待图片资源加载完成后才能够调用
2.jquery的这个入口函数没有函数覆盖现象,文档加载完就可以使用,建议使用次函数
​

 

posted @ 2021-04-04 10:13  苦行僧冬*婷  阅读(475)  评论(0)    收藏  举报