jQuery 事件

最新推荐文章于 2023-03-28 10:53:00 发布

　　初夏 ﻬ

最新推荐文章于 2023-03-28 10:53:00 发布

阅读量118

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_44329870/article/details/114676737

版权

jQuery 事件

1.事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。
2.jQuery 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

注意：
1.把所有 jQuery 代码置于事件处理函数中;
2.把所有事件处理函数置于文档就绪事件处理器中;
3.把 jQuery 代码置于单独的 .js 文件中;
4.如果存在名称冲突，则重命名 jQuery 库。

jQuery常用事件方法示例代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn">按钮</button>
<input type="text" class="ipt" value="123"/>

<div class="box" style="width: 100px; height: 100px; border: 1px solid red"></div>

<ul class="menu">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

<p>段落</p>

<div class="red" style="width: 100px; height: 100px;background-color: red"></div>

<script src="js/jquery-1.9.1.js"></script>
<script>
    /*1.加载完成事件，等价于window.onload*/
    //第一种写法
    $(document).ready(function () {
        console.log('加载完成');
    });
    //第二种简单写法
    $(function () {
        console.log('加载完成');
    });

    /*2.鼠标进入、点击、移动、离开事件*/
    $('#btn').click(10, function (e) {
        console.log('点击', e.data);//事件传递的数据在事件的执行参数，即传递的数据10在e.data里面，输出结果为点击 10
    }).mouseleave(function () {
        console.log('离开');
    }).mouseenter(function () {
        console.log('进入');
    }).mousemove(function () {
        console.log('移动');
    });

    /*3.获焦和失焦事件*/
    $('.ipt').focus(function () {
        $(this).css({
            color: 'red'
        });
    });
    //获焦和失焦的顺序，输出结果为focusin先于focus、focusout先于blur
    $('.ipt').focusin(function () {
        console.log(1);
    }).focus(function () {
        console.log(2);
    }).focusout(function () {
        console.log(3);
    }).blur(function () {
        console.log(4);
    });

    /*4.滚轮事件
     *originalEvent:最终传入事件处理程序的event其实已经被jQuery做过标准化处理(每个event都是jQuery.event的实例)，
     *              其原有的事件对象被保存在event对象的originalEvent属性中,
     *              所以event.originalEvent指向原始的事件对象。
     * */
    $(document).bind('mousewheel', function (e) {//先用bind绑定事件
        console.log(e.originalEvent.deltaY);//deltaY这个值的正负，判断了滚轮的上下滑动方向
    });
    //原生js写法
    document.addEventListener('mousewheel', function (e) {
        console.log(e.deltaY);
    });

    /*5.事件切换*/
    $('.box').hover(function () {
        console.log('进入');
    }, function () {
        console.log('离开');
    });

    /*6.使用on绑定事件
     *参数可以为：type、selecter、data、fn，即分别为：类型、选择器、传递的数据、函数
     * */
    $('.box').on('click', 10, function (e) {
        console.log(e.data);//事件传递的数据在事件的执行参数e中
    });
    //使用on进行事件绑定也可以委托
    $('.menu').on('click', 'li', handle);
    function handle(e) {
        console.log(e.target);//输出点击的目标元素
    }
    //委托事件的绑定
    function method() {
        console.log('段落');
        $('body').off('click', 'p', method);
    }
    //委托事件的移除
    $('body').on('click', 'p', method);
    //一次绑定多个事件
    $('.menu').on('mouseenter mouseleave', function (e) {
        if (e.type == 'mouseenter') {//判断事件类型
            console.log('进入');
        }
        else {
            console.log('离开');
        }
    });

    /*7.移除事件绑定*/
    $('.menu').off();//不写参数，表示移除绑定的全部事件
    $('.menu').off('click');//写参数，表示移除绑定的指定事件

    /*8.使用bind绑定事件
     * 参数类型：type、data、fn
     * */
    $('.red').bind('click mouseleave', redhan);
    function redhan() {
        console.log('点击');
    }

    /*9.使用onbind移除绑定的事件*/
    $('.red').unbind();//无参数代表全部移除
    $('.red').unbind('click', redhan);//有参数代表移除指定事件

    /*10.用one绑定一次性事件*/
    $('.red').one('click', function () {//只执行一次
        console.log('点击');//只输出一次点击
    });

    /*11.trigger：指定触发事件
     *参数类型：type、data
     * */
    $('.red').click(20, function (e, a, b, c) {
        console.log('点击', e.data, a, b, c);//上面的20传给e.data;下面数组里面的各个值分别传给a,b,c
    }).trigger('click', [1, 2, 3]);

    /*12.添加自定义事件*/
    $('.red').on('myevent', function (e) {
        console.log(e);
    }).trigger('myevent');//指定触发自定义事件
</script>
</body>
</html>

　　初夏 ﻬ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 事件

jQuery 事件1.事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。2.jQuery 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。注意：1.把所有 jQuery 代码置于事件处理函数中;2.把所有事件处理函数置于文档就绪事件处理器中;3.把 jQuery 代码置于单独的 .js 文件中;4.如果存在名称冲突，则重命名 jQuery 库。jQuery常用事件方法示例代码：<!DOCTYPE html><html><he
复制链接

扫一扫