4 jQuery 事件

本文主要是介绍4 jQuery 事件，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1 绑定事件

bind(type [, data ], fn )

第一个参数是事件类型，类型包括： blur focus
load resize scroll unload click dblclick
mousedown mouseup mouseover mouseout
mouseenter mouseleave change select submit
keyup keydown keypress keyup error
第二个参数为可选参数，作为 event.data 属性值传递给事件对象的额外数据对象
第三个参数是⽤用来绑定的处理理函数

绑定事件方法

<div class="box">刘大帅</div>
<script>
    //方式一
    $('.box').click(function () {
        $(this).css('color','red');
    })
    //方式二: bind版本
    $('.box').bind('click',function () {
        console.log($(this).html());
    })
    //方式三: on版本
    $('.box').on('click',function () {
        console.log($(this).html());
    })


</script>

取消绑定事件

$().on('click',function () {});
$().off('click');

2 单击事件

click

<div class="box" style="width: 200px;height: 200px;background: red">刘大帅</div>
<script>
    $(function () {
        $('.box').click(function () {
            $(this).hide(1000,function () {
                alert($(this).text());
            }); //1s后隐藏,并执行函数
        })
    })
</script>

3 双击事件

dblclick

<div class="box" style="width: 200px;height: 200px;background: red">刘大帅</div>
<script>
    $(function () {
		$('.box').dblclick(function () {
            console.log('双击了')
        })
    })
</script>

4 鼠标摁下和抬起事件

mousedown & mouseup

<div class="box" style="width: 200px;height: 200px;background: red">刘大帅</div>
<script>
    $(function () {
		$('.box').mousedown(function () {
            console.log('鼠标摁下了');
        })
        $('.box').mouseup(function () {
            console.log('鼠标抬起了');
        })
    })
</script>

5 鼠标移动事件

mousemove 一般用于复制粘贴

<div class="box" style="width: 200px;height: 200px;background: red">刘大帅</div>
<script>
    $(function () {
		$('.box').mousemove(function () {
            console.log('移动了');
        })
    })
</script>

6 鼠标穿过和离开事件

mouseover & mouseout

鼠标穿过被选元素 或者当前被选元素的子元素

<div class="box" style="width: 200px;height: 200px;background: red">
    <p style="background: green">刘大帅</p>
</div>
<div id="box" style="width: 100px;height: 40px;background-color: brown;position: relative">
    <div class="content" style="position: absolute;width: 200px;height: 200px;top: 40px;background-color: red"></div>
</div>
<script>
    $(function () {
		$('.box').mouseover(function () {
            console.log('鼠标穿过了');
        })
        $('.box').mouseout(function () {
            console.log('鼠标离开了');
        })
        /*$('#box').mouseover(function () {
            $('.content').show();
        })
        $('#box').mouseout(function () {
            $('.content').hide();
        })*/
    })
</script>

7 鼠标穿过和离开事件

mouseenter & mouseleave

鼠标只穿过被选元素时的事件（推荐使用）

<div id="box" style="width: 100px;height: 40px;background-color: brown;position: relative">
    <div class="content" style="position: absolute;width: 200px;height: 200px;top: 40px;background-color: red"></div>
</div>
<script>
    $(function () {
		$('#box').mouseenter(function () {
            console.log('1111');
            //使用动画的时候，先要停止动画 在开启动画
            // $('.content').show();
            $('.content').stop().slideDown();
        })
        $('#box').mouseleave(function () {
            // $('.content').hide();
            $('.content').stop().slideUp();
        })
    })
</script>

8 鼠标聚焦和失焦事件

focus & blur

<input type="text">
<script>
    $(function () {
        //文档加载时直接获取焦点
        $('input[type=text]').focus();

        //获取焦点
        $('input[type=text]').focus(function () {
            console.log('获取焦点了');
        });
        //失去焦点
        $('input[type=text]').blur(function () {
            console.log('失去焦点了');
        });
      
        //使用户无法使用input输入框
        $('input[type=text]').focus(function () {
            this.blur();
        })
    })
</script>

9 键盘摁下和抬起

keydown & keyup

<input type="text">
<script>
    $(function () {
        $(window).keydown(function (event) {
            console.log('键盘摁下了')
            console.log(event.keyCode);
            //空格 32 enter 13 esc 27
            //不同的按键可以做不同的事件
            switch (event.keyCode) {
                case 32:
                    //摁下空格了
                    console.log('空格键触发了');
                    break;
                case 13:
                    //摁下回车键
                    console.log('回车键触发了');
                    break;
                default:
                    console.log('撤销键触发了');
                    break;
            }
        })
</script>

10 文档加载事件

ready

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        //方法一
        $(document).ready(function () {
            $('.box').click(function () {
                $(this).css('color','red');
            })
        })
        //方法二
        $(function () {
            $('.box').click(function () {
                $(this).css('color', 'red');
            })
        })
    </script>
</head>
<body>
<div class="box">刘大帅</div>
</body>
</html>

11 监听窗口滚动事件

scroll

<style>
  *{
    margin: 0;
    padding: 0;
  }
  p{
    position: absolute;
    top: 200px;
  }
  body{
    padding: 60px;
  }
  .fixHeader{
    width: 100%;
    height: 60px;
    background-color: red;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
  }
</style>
<body style="height: 2000px">
<div class="fixHeader"></div>
<div class="box"><p>刘大帅</p></div>
<script>
    $(function () {
        $(window).scroll(function () {
            var offset = $('p').offset();
            var scrollTop = $(this).scrollTop();
            if (scrollTop>offset.top){
                // $('.fixHeader').stop().show(); 
              //关闭上一个动画在导航条出现（可设置时间ms）
                // $('.fixHeader').stop().fadeIn(); 
              //关闭上一个动画在导航条淡出现（可设置时间ms）
                $('.fixHeader').stop().slideDown(1000); 
              //关闭上一个动画在导航条拉出来（可设置时间ms）
            }else {
                // $('.fixHeader').stop().hide(); 
              //关闭上一个动画在导航条隐藏（可设置时间ms）
                // $('.fixHeader').stop().fadeOut(); 
              //关闭上一个动画在导航条淡隐藏（可设置时间ms）
                $('.fixHeader').stop().slideUp(1000); 
              //关闭上一个动画在导航条拉隐藏（可设置时间ms）
            }
        })
    })
</script>
</body>

12 表单事件

<form action="">
    <input type="text">
    <select name="" id="select">
        <option value="a">a</option>
        <option value="b">b</option>
    </select>
    <input type="submit">
</form>

<script>
    //change() 当元素的值发生改变时，使用该方法（仅适用于文本input 包括textarea select）
    //select()
    //submit()
    $(function () {
        $('input[type=text]').change(function () {
            // console.log('值发生变化了');
            var val = $(this).val();
            console.log(val);
            if (/^\d{4}$/.test(val)){
                console.log('输入正确');
                $(this).css('borderColor','green');
            }else {
                console.log('输入错误');
                $(this).css('borderColor','red');
            }
        })

        $('#select').change(function () {
            console.log($(this).val());
        })

        $('form').submit(function (event) {
            //阻止form表单的提交行为（form表单就不会提交了）
            event.preventDefault();
            // console.log(111111111);

            var val = $('input[type=text]').val();
            var oVal = $('#select').val();
            console.log(val,oVal);

            //与后端发生交互性的行为
            //封装了ajax 与后端发生交互的技术
        })

    })
</script>

13 冒泡事件

假设⽹网⻚页上有两个元素，其中⼀一个嵌套在另⼀一个元素⾥里里⾯面，并且都被绑定了了 click 事件。同时 元素上也绑定了了 click 事件，这样的话，点击最内层的元素，会触发三次 click 事件。这是因为 JavaScript 的事件冒泡机制。

在 jQuery 中，提供了了 stopPropagation() ⽅方法来停⽌止冒泡。

<div class="box" style="width: 200px;height: 200px;border: 1px solid red">
    <h3 style="background-color: #ff6700">冒泡</h3>
</div>
<script>
    $(function () {
        $('.box').click(function () {
            alert('父元素点击了');
            return false;
            //相当于event.stopPropagation();还能阻止默认的跳转行为
        })
        $('h3').click(function (event) {
            //阻止冒泡
            event.stopPropagation();
            alert('子元素点击了');
        })
        $(document).click(function () {
            alert('文档被点击了');
        })
    })
</script>

应用

<style>
  *{
    padding: 0;
    margin: 0;
  }
  .slideDownView{
    width: 100%;
    height: 400px;
    background-color: #ff6700;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
  }
  .slideDownView ul li{
    display: inline-block;
    width: 100px;
    height: 40px;
    background-color: blueviolet;
    line-height: 40px;
    text-align: center;
  }
  .slideDownView ul li a{
    display: block;
    width: 100px;
    height: 40px;
    color: #fff;
  }
</style>
<a href="#" class="changefu">换肤</a>
<div class="slideDownView">
    <ul>
        <li><a href="#">热门</a></li>
        <li><a href="#">美女</a></li>
        <li><a href="#">游戏</a></li>
    </ul>
</div>
<script>
    $(function () {
        $('.changefu').click(function (event) {
            //阻止a标签的默认行为
            event.preventDefault();
            event.stopPropagation();
            $('.slideDownView').slideDown(500);
            $('.slideDownView ul li a').click(function (event) {
                event.preventDefault();
                event.stopPropagation();
                $(this).css('color','red').parent().siblings('li').children().css('color','#fff');
            })
        })
        $('.slideDownView,ul').click(function () {
            return false;
        })
        $(document).click(function () {
            $('.slideDownView').stop().slideUp(500);
        })
    })
</script>

14 阻止默认事件

网页中有自己的默认行行为，例例如单击超链接会跳转，单击“提交”按钮后表单会提交，有时需要阻止默认行行为。jQuery 提供了了 preventDefault() 方法来阻止元素的默认行行为。

15 事件对象属性

event.type 获取到事件的类型
event.preventDefault() 阻⽌止默认的事件⾏行行为
stopPropagation() 阻⽌止事件冒泡
event.tagent() 获取到触发事件的元素
event.relatedTarget()mousover 和 mouseout 所发⽣生的元素
event.pageX event.pageY获取到光标相对于⻚页⾯面的 x坐标和 y 坐标
event.which()⿏鼠标单击事件中获取到的左、中、右键，在键盘事件中获取键盘的按键
event.metaKey() 为键盘事件获取 ctrl 键

16 移除事件

unbind([type],[data])

第⼀一个参数是事件类型，第⼆二个参数是要移除的函数。如果没有参数，则删除所有的绑定事件

17 one方法

对于只要触发⼀一次，随后要⽴立即解除绑定的情况， jQuery提供了了 one() ⽅法。 当处理理函数触发⼀一次后，⽴立即被删除。

18 合成事件

jQuery 中有两个合成事件， hover() toggle()

hover(fn1,fn2,...fnN) 方法用于模拟光标悬停事件，当光标移动到元素上时，会触发第⼀一个函数（mouseenter），当光标移出这个元素时会触发第二个函数（mouseleave）

toggle() 方法用于模拟⿏鼠标的连续点击事件，第一次单击元素，触发第一个函数，第二次单击同一个元素，会触发第二个函数，如果有更更多的函数，则依次触发，直到最后一个。

<button id="btn">隐藏</button>
<div class="box" style="width: 200px;height: 200px;background: red"></div>
<script>
    $(function () {
        /*$('.box').mouseenter(function () {
            $(this).stop().css('background','green');
        })
        $('.box').mouseleave(function () {
            $(this).stop().css('background','red');
        })*/
        //合成事件相当于mouseenter和mouseleave
        $('.box').hover(function () {
            $(this).css('background','green');
        },function () {
            $(this).css('background','red');
        })


        var isShow = true;
        $('#btn').click(function () {
            /*if (isShow){
                $('.box').stop().hide();
                $(this).text('显示');
                isShow = false;
            }else {
                $('.box').stop().show();
                $(this).text('隐藏');
                isShow = true;
            }*/
            $('.box').toggle();
        })
    })
</script>

19 事件委派

<ul>
    <li>123</li>
    <li>234</li>
    <li>345</li>
</ul>
<button class="add">添加</button>
<script>
    //事件委派
    $('ul').on('click','li',function () {
        console.log($(this).html());
    })
    //动态添加标签
    $('.add').click(function () {
        $('ul').append('<li>456</li>');
    })
</script>

这篇关于4 jQuery 事件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！