jQuery事件

m0_63400611

已于 2022-05-18 16:11:02 修改

阅读量567

点赞数

分类专栏： js 文章标签： jquery javascript 前端

于 2022-03-10 23:08:38 首次发布

本文链接：https://blog.csdn.net/m0_63400611/article/details/123413801

版权

js 专栏收录该内容

55 篇文章 2 订阅

订阅专栏

jQuery事件注册

单个事件注册

语法:

element.事件(function() {})

$('div').click(function() {事件处理程序});

写法基本和原生一致

jQuery事件处理

事件处理 on()绑定事件

on()方法在匹配元素上绑定一个或多个事件的事件处理函数

语法:

element.on(events, [selector), fn)

events:一个或多个用空格分隔的事件类型,如'click'或'keydown'
selector:元素的子元素选择器
fn:回调函数即绑定在元素身上的侦听函数

on()方法优势:

可以绑定多个事件,多个事件处理程序

$('div').on({
            mouseenter: function() {
                $(this).css('background', 'skyblue');
            }, 
            click: function() {
                $(this).css('background', 'purple');
            },
            mouseleave: function() {
                $(this).css('background', 'blue');
            }
        })

如果事件处理程序相同

$('div').on('mouseover mouseout', function() {
            $(this).toggleClass("current");
        });

可以事件委派操作,把原来加给子元素身上的事件帮i挡在父元素身上,即把事件委派给父元素

//on事件委派 $('元素').on('操作', '子元素', 调用方法 {})
$('ul').on('click', 'li', function() {
    alert('1');
})

在此之前,bind(),live(),delegate()等方法处理事件绑定或者事件委派,最新版用on()替代他们

动态创建的元素,click没有办法绑定事件,on()可以给动态生成的元素绑定事件

//给未来动态创建的元素绑定事件
$('ol').on('click', 'li', function() {
    alert('1');
})
var li = $('<li>动态创建的li</li>');
$('ol').append(li);

事件处理off()解绑事件

off()方法可以移除通过on()方法添加的事件处理程序

$('p').off();//解除p元素所有的事件处理程序
$('p').off('click');//接触p元素的点击事件委托 后面的off是侦听删除名
$('p').off('click', 'li');//解绑事件委托

如果有的事件只想触发一次,可以使用one()来绑定事件

代码演示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            background-color: pink;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div></div>
    <ul>
        <li>li的内容</li>
        <li>li的内容</li>
        <li>li的内容</li>
        <li>li的内容</li>
        <li>li的内容</li>
    </ul>
    <p>p元素</p>
    <script src="../js/jQuery.js"></script>
    <script>
        $(function() {
            //通过on绑定事件
            $('div').on({
                click: function() {
                    console.log('点击');
                },
                mouseover: function() {
                    console.log('鼠标经过');
                }
            });
            //off()方法解绑on()绑定的事件
            //括号内为空解绑所有事件
            // $('div').off();
            $('div').off('click');//解除div的点击事件

            //给ul使用on()绑定事件
            $('ul').on('click', 'li', function() {
                alert('1');
            })
            //解除ul点击事件委托
            $('ul').off('click', 'li');

            //one()事件 只能触发 一个事件
            $('p').one('click', function() {
                alert('111');
            })
        })
    </script>
</body>
</html>

自动触发事件trigger()

可以自动触发一些事件,例如轮播图点击右侧按钮,不必鼠标点击触发

代码演示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <input type="text">
    <script src="../js/jQuery.js"></script>
    <script>
        $(function() {
            $('div').on('click', function() {
                alert(1);
            })

            //自动触发事件
            //1.元素.事件 简写形式
            // $('div').click();
            //2.元素.trigger("事件")
            // $('div').trigger('click');
            //3.元素.triggerHandler("事件") 不会触发元素的默认行为 例如input的焦点
            $('div').triggerHandler('click');
            $('input').on('focus', function() {
                $(this).val('获取了焦点');
            });
            $('input').triggerHandler('focus');//不会有光标闪烁 其他会
        })
    </script>
</body>
</html>

jQuery事件对象

事件被触发,就会有事件对象的产生

element.on(events, [selector], function(evenr) {}]);

阻止默认行为:event.preventDefault()或者return false

组织冒泡:event.stopPropagation()

示例

$(document).on('click', function() {
   console.log('点击了document');
})
$('div').on('click', function() {
    console.log('点击了div');
    event.stopPropagation();//阻止冒泡事件
})