Day51 前端基础--jQuery 事件

一，jQuery常用事件

　　1.(keyup/keydown)键盘事件

　　　　批量操作

　　2.hover(不是原生DOM事件，是jQuery封装的)

　　　　接收两个匿名函数

　　　　$('').hover(function() {鼠标移上去要做的事},function() {鼠标移下去要做的事} )

　　3.input事件:

　　　　只要input框的发生变化就会触发此事件

　　4.click点击事件

click(function(){...})  //一般用于监视点击事件
hover(function(){...})  //一般用于对用户光标起反应
blur(function(){...})   //一般用于捕获用户输入完成的输入内容
focus(function(){...})   //获得焦点时触发
change(function(){...})  //一般用于监视表单状态
keyup(function(){...})   //一般与keydown配合实现键盘事件的批量操作
keydown(function(){...})
input(function(){...}) //一般用于监视输入框的输入内容

二，jQuery绑定事件的方式

//1.jQ对象.事件(事件处理函数() {动作})
$(''").click(function() {})

//2.jQ对象.on(事件,事件处理函数() {动作})
$("").on('click',function() {})

　　注意：像click、keydown等DOM中定义的事件，我们都可以使用".on()"方法来绑定事件，但是"hover"这种jQuery中定义的事件就不能用".on()"方法来绑定了

　　补充：移除事件

//off()移除用on()绑定的事件
格式：
    jQ对象.off(事件,事件对象函数() {动作})
    jQ对象.off(事件,[选择器],事件对象函数() {动作})
$("").off('click',function() {...})

三，阻止后续事件执行

　　1.return false; //常见阻止表单提交

　　2.event.stopPropagation() //event代表事件本身

//实例：阻止默认事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默认事件</title>
</head>
<body>

<form action="">
    <button id="b1">点我</button>
</form>

<script src="jquery-3.3.1.min.js"></script>
<script>
    $("#b1").click(function (e) {
        alert(123);
        //return false;
        e.preventDefault();
    });
</script>
</body>
</html>

三、事件冒泡

　　DOM中事件的特点：

　　　　父标签的事件会被子标签触发

　　补充：阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止事件冒泡</title>
</head>
<body>
<div>
    <p>
        <span>点我</span>
    </p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $("span").click(function (e) {
        alert("span");
        e.stopPropagation();
    });

    $("p").click(function () {
        alert("p");
    });
    $("div").click(function () {
        alert("div");
    })
</script>
</body>
</html>

四、事件委托：

　　基于一个已经存在的标签给未来的标签绑定事件

　　$('').on('click','选择器',function() {})

　　注意：

　　　　若想使用事件委托的方式绑定非原生DOM（例如：hover）事件处理函数，可以参照如下代码分两步绑定事件

$('ul').on('mouseenter','li',function() {//绑定鼠标进入事件
    $(this).addClass('hover');
});
$('ul').on('mouseleave','li',function() {//绑定鼠标划出事件
    $(this).removeClass('hover');   
});

六、页面加载完毕

　　1.window.onload = function() {}

　　　　1.存在的问题

　　　　　　1.会等到页面上的文档、图片、视频等所有资源都加载完才会触发

　　　　　　2.多次调用的化存在覆盖声明的问题

　　2.jQuery帮我们封装的

　　　　1.$(document).ready(function() {...})

　　　　2.优势:

　　　　　　1.只要文档加载完就会触发

　　　　　　2.不存在覆盖声明的问题

　　　　3.简写

　　　　　　$(function() {绑定事件的操作...})

七、补充

　　1.动画(了解即可)

　　2.each遍历工具

　　　　1.$.each(便利的对象,function() {})

　　　　2.$('div').each(function() {})

　　3.data

　　　　任意jQuery对象都有data方法，可以保存任意值，用来代替全局变量

　　4.扩展

　　　　1.jQuery.extend()

　　　　2.jQuery.fn.extend()

Day51 前端基础--jQuery 事件

猜你喜欢