jQuery_事件对象-【官方】百战程序员_IT在线教育培训机构

选择器
1. 基础选择器类选择器元素选择器 ID选择器子元素选择器后代元素选择器
2. 属性选择器完美匹配包含前缀开头结尾空格
3. jQuery扩展选择器 eq even odd first last gt lt
DOM操作
1. Class操作 addClass() removeClass() toggleClass() hasClass()
2. 文本操作 html() text() val()
3. 属性操作 attr() removeAttr()
4. DOM 插入并包裹现有内容 .wrap() .unwrap() .wrapAll() .wrapInner()
5. DOM 插入现有元素内 .append() .prepend()
6. DOM 插入现有元素外 .after() .before()
7. DOM 移除 .empty() .remove()
8. DOM 替换 .replaceAll() .replaceWith()
CSS操作
1. 尺寸 .css() .height()，.width() .innerHeight()，.innerWidth() .outerHeight()，.outerWidth()
2. 位置 .offset() .position() .scrollLeft() .scrollTop()
事件处理
1. 绑定事件处理器 .on() .one() .off()
2. 鼠标事件 .click() .hover() .mouseenter() .mouseleave() .mousemove() .mouseover() .mouseout()
3. 表单事件 .focus() .blur() .change() .submit()
4. 键盘事件 .keydown() .keypress() .keyup()
5. 浏览器事件 .resize() .scroll()
6. 事件对象 event.type event.target event.currentTarget event.preventDefault() event.stopPropagation()
遍历
动画

event.type

获取事件类型


xxxxxxxxxx
$("#btn").click("click",function(e){
    console.log(e.type);
})

event.target

获取当前元素对象


xxxxxxxxxx
$("#btn").click("click",function(e){
    console.log(e.target);
})

event.currentTarget

获取当前元素对象

温馨提示
target：指向触发事件元素
currentTarget：指向添加事件的元素


xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<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>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="container">
        <button id="btn">按钮</button>
    </div>
    <script>
        $("#container").click("click",function(e){
            console.log("container",e.currentTarget);
            console.log("container",e.target);
        })
        $("#btn").click("click",function(e){
            console.log("btn",e.currentTarget);
            console.log("btn",e.target);
        })
    </script>
</body>
</html>

event.preventDefault()

如果调用这个方法，默认事件行为将不再触发。


xxxxxxxxxx
<a href="https://itbaizhan.com">itbaizhan</a>
<script>
    $("a").click("click",function(e){
        e.preventDefault();
    })
</script>

event.stopPropagation()

防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数


xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<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>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <button>按钮</button>
    </div>
    <script>
        $("div").click("click",function(e){
            console.log("div");
        })
        $("button").click("click",function(e){
            e.stopPropagation();
            console.log("button");
        })
    </script>
</body>
</html>

实时效果反馈

1. 下列关于事件对象，哪个是阻止事件冒泡的方法：

A target()

B currentTarget()

C preventDefault()

D stopPropagation()

答案

1=>D

jQuery_事件之浏览器事件 jQuery_遍历

北京市昌平区回龙观镇南店村综合商业楼2楼226室