jquery-事件绑定

最新推荐文章于 2021-11-12 08:41:09 发布

鲸鱼编程pyhui

最新推荐文章于 2021-11-12 08:41:09 发布

阅读量260

点赞数

本文链接：https://blog.csdn.net/ifubing/article/details/99670234

版权

》回顾已知的事件绑定

标签中的绑定

<a onclick="run()">点我</a>

js中的绑定

dom对象.onclick = 匿函

jquery中的绑定

点击事件，如何绑定，三种方式尝试一下

on绑定

可以让新生成的标签对象，获得事件的绑定

代码解读

在这里插入图片描述
为tbody委托一个点击事件

如果有点击发生

让tbody下面的具有 delete类的标签对象，执行函数中的功能

关注this是什么

this就是一群装备了delete的标签中被点击的那个标签

这个标签是dom标签对象

在这里插入图片描述

委托方式绑定事件的格式

父标签对象.on（事件名称，子标签对象，匿函）

父标签对象接到委托，当子标签对象发什某某事件时，执行匿名函数的内容
格式中的’子标签对象‘可以通过css选择器的方式来明确

注，父和子标签都可以通过选择器来明确定位
on方法中的参数一和参数二，都是str类型

阻止默认行为

return false

超链接的阻止

表单提交的阻止

》 a标签的阻拦

<!DOCTYPE html>
<!--作者：pyhui-->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
　　<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

</head>
<body>

<a href="http://www.baidu.com/" onclick="return func()">点我，我就跳转</a> <br>
<a href="http://www.baidu.com/" onclick="return false" >点我，我就跳转</a> <br>
<a href="http://www.baidu.com/" onclick="false" >我是无法阻挡的a标签，我会跳转</a>


<script>
    function func() {
        alert('1111');
        return false
    }
</script>
</body>
</html>

》表单提交的阻拦

<!DOCTYPE html>
<!--作者：pyhui-->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
　　<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

</head>
<body>


<form action="" >

    用户名: <input type="text" name="uname">
    <input type="submit" value="提交">


</form>

<script>
    // 表单的submit按钮，本质上是触发表单对象的submit事件
    // 阻止表单提交，只需要让事件内的函数返回false就可以实现
    $("form").submit(function () {
        // 验证提交的内容是否为空
        // 拿到控件
        var $txt = $(":text");
        // 拿数据
        var content = $txt.val();
        // 判断是否为空
        if(content.length === 0) {
            console.log('用户输入为0');
            return false
        }

    })
</script>
</body>
</html>

常用的事件

click
hover
blur
focus
change
keyup
kewdown

》事件的使用格式

对象.事件名（匿函）

》注，事件的匿函如果给一个形参，那么这个形参就是事件对象

事件对象具有它的属性和方法

试验一下键盘按下事件（给body标签添加一个keydown的事件绑定，试一试事件对象的KeyCode属性）

测试代码

<!DOCTYPE html>
<!--作者：pyhui-->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
　　<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
        $(function () {
            //给body标签添加kewdown事件
            var $bd = $("body");
            $bd.keydown(
                function (event) {
                    var code = event.keyCode;
                    document.title = code;
                }
            )

        })
    </script>
</head>
<body>

</body>
</html>

随堂演练代码

<!DOCTYPE html>
<!--作者：pyhui-->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
　　<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

</head>
<body>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<input type="button" value="新增li">

<!--效果一，点击button-->
<!--效果二，点击li，li标签文字变颜色-->

<script>
    // 拿到button对象，绑定一个点击事件
    var $btn = $("input")

    function add_li(){
        $li = $("<li>");
        $li.text("aaa");
        $("ul").append($li);
    }

    $btn.click(add_li)


    function turn_red(){
        $(this).css("color","red");
    }

    // 给li添加点击事件
    // 当li被点击时，颜色变红
    // $("li").click(turn_red)
    $("ul").on("click","li",turn_red);

</script>

</body>
</html>