事件

最新推荐文章于 2024-06-17 07:15:00 发布

大白兔i

最新推荐文章于 2024-06-17 07:15:00 发布

阅读量164

点赞数 1

分类专栏：事件和动画文章标签： jquery

本文链接：https://blog.csdn.net/weixin_44956916/article/details/109688789

版权

事件和动画专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、事件委托
on（）

<button id='add'>添加</button>
    <br>
    <ul>
        <li>香蕉</li>
        <li>苹果</li>
        <li>大鸭梨</li>
    </ul>
    <script src='../课堂案例/jquery/jquery-1.10.1.js'></script>
    <script>
        $(function(){
            $('#add').click(function(){
                $('ul').append('<li>烦死了</li>');
            })
            $('ul').on('click','li',function(){
                $(this).toggleClass('active');
            })
        })
    </script>

在这里插入图片描述

二、jQuery 特有的事件
1.focusin（）监听给表单控件的父元素，表单控件获取焦点
2.focusout（）监听给表单控件的父元素，表单控件失去焦点
监听给表单控件的父元素，this是指向触发的元素，也就是父元素

<div id="box">
        <input type="text">
    </div>
    <script src='../课堂案例/jquery/jquery-1.10.1.js'></script>
    <script>
        $(function(){
            $('#box').focusin(function(){
                $('#box').css('background-color','pink');
            }).focusout(function(){
                $('#box').css('background-color', ' aqua');
            })
        })
    </script>

在这里插入图片描述
3.hover（），鼠标进入和离开元素都会触发，nouseenter和mouseleave的结合版

<div class="box">
        傻逼打我
    </div>
    <script src='../课堂案例/jquery/jquery-1.10.1.js'></script>
    <script>
        $(function(){
            $('.box').hover(function(){
                $('.box').toggleClass('active');
            })
        })
    </script>

在这里插入图片描述

三、事件对象
jQuery事件的回调函数中也可以获取到event对象，与原生的event对象类似，属性和方法都是一样的。
1）属性
鼠标事件
1.clientX/clientY 鼠标在视口上的位置
2.pageX/pageY鼠标在页面上的位置
3.offsetX/offsetY 鼠标在目标元素上的位置
4.screenX/screenY 鼠标在屏幕上的位置
5.button 鼠标按下的是哪一个，0是左，1是滑轮，2是右键
6.target 目标元素
鼠标事件
1.keyCode 按下的按键的ascii的值
2.which 和keyCode一样
3.key 获取按键的值（字符串）

2）方法
preventDeafault( ) 阻止浏览器的默认行为
stopPropagation( ) 阻止冒泡

jQuery中的return false可以阻止浏览器的默认行为，也可以阻止冒泡

<body>
    <div class="box">
        我是她爹
        <div class="child">我是儿子</div>
    </div>
    <script src='../课堂案例/jquery/jquery-1.10.1.js'></script>
    <script>
        $(function(){
            //会冒泡点击儿子
            $('.box').contextmenu(function(){
                alert('啊，我也被打了');
            })
            $('.child').contextmenu(function(){
                alert('啊，我被打了');
                return false;
            });
            //阻止默认行为return false;
        })
    </script>
</body>

在这里插入图片描述
return false之前（还有一个右键菜单）

注意
1.jQuery事件的回调函数中，return false既可以阻止浏览器的默认行为，也可以阻止冒泡。
2.原生js事件回调函数中return false只能阻止默认行为。

大白兔i

关注

1
点赞
踩
0

收藏

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

一、事件委托on<button id='add'>添加</button> <br> <ul> <li>香蕉</li> <li>苹果</li> <li>大鸭梨</li> </ul> <script src='../课堂案例/jquery/jquery-1.10.1.js'></s
复制链接

扫一扫