jQuery知识点总结（五）

最新推荐文章于 2020-08-07 20:17:43 发布

嘤嘤鸭

最新推荐文章于 2020-08-07 20:17:43 发布

阅读量134

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_43427995/article/details/105511494

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

jQuery知识点总结（五）

事件冒泡和默认行为

什么是事件冒泡？
当给子级一个事件的时候，子级的事件会传递给父级，父级也会执行这个事件

如何阻止事件冒泡
在子级的事件函数内加上return false；
如果子级有event参数传入可以在子级的事件函数内加上event.stopPropagation( );

什么是默认行为
默认行为就是没有添加但是本身就拥有的行为，比如a标签、submit按钮点击会跳转页面

如何阻止默认行为
在事件函数内加上return false；
如果有event参数传入可以在事件函数内加上event.preventDefault( );

事件自动触发

trigge( )和triggerHandler( )都会自动触发事件。

trigger

不会阻止默认行为以及事件冒泡
注意！如果已经在事件函数内阻止了事件冒泡或者默认行为，trigger同样也会阻止

triggerHandler

会阻止默认行为以及事件冒泡

重点！！"< a >" 标签使用trigger或者是triggerHandler都不会触发默认事件
触发默认事件的解决办法：给"< a >“标签里面添加一个”< span >"标签，$(“span”).trigger(“click”)。

自定义事件

自定义事件要用对象.on(“事件”，函数)来定义
用trigger或者triggerHandler来调用

<script>
    $(function()
    {
        //给按钮添加一个自定义事件
        $("button").on("MyClick",function()
        {
            alert("我是自定义事件")
        })
        //调用自定义事件
        $("button").trigger("MyClick");
    })
</script>
<body>
    <button>点击</button>
</body>

事件命名空间

添加事件的命名空间 click.自定义的命名空间
触发条件
1. 事件是用on绑定的
2. 事件通过trigger触发

以下程序给子级绑定了click,click.1事件，也给父级绑定了click,click.1事件,此时点击son会触发所有点击事件，点击father会触发father的点击事件

<script>
  $(function()
  {
    $(".son").on("click.1",function()
    {
        alert("son click.1");

    })
    $(".son").on("click",function()
    {
        alert("son click");
    })
    $(".father").on("click",function()
    {
        alert("fath click");
    })
    $(".father").on("click.1",function()
    {
        alert("father click.1");
    })
</script>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

$(".son").trigger(“click”);
此时也会触发所有点击事件（先触发click.1事件，因为这个事件先添加的）

$(".father").trigger(“click.1”);
只会触发father的click.1的点击事件，不会触发father的click事件

$(".son").trigger(“click.1”);
触发son的点击事件以及father同名（click.1）的点击事件,不会触发father的click事件

事件委托

当我们在页面加载完毕之后添加DOM元素，该DOM元素不会执行入口函数中的函数，此时我们需要事件委托，将监听事件交给加载好的DOM元素。

以下程序点击按钮会新增一个li，点击li会在控制台打印li的内容

<script>
    $(function()
    {
        //点击按钮新增li
        $("button").on("click",function()
        {
            $("ul").append("<li>我是新增的li</li>");
        })

        //jQuery中如果找到的元素不止一个，那么jQuery会遍历所有找到的元素并给他们添加事件
        $("ul>li").on("click",function()
        {
            console.log($(this).html());
        })
  
        //事件委托
        $("ul").delegate("li","click",function()
        {
            console.log($(this).html());        //this指的就是点击的li，不是ul（li将事件传递给ul的）
        })
    })
</script>
<body>
    <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
    </ul>
    <button>新增li</button>
</body>

注意！当我们新增li之后，点击新增的li控制台不会打印新增的li

原因： jQuery入口函数是在所有DOM元素加载完成之后执行的，这里新增的li是在DOM元素
加载完毕之后（入口函数执行之后）新增的，所以新增的li没有click事件

解决：将监听click事件的任务交给父元素，当点击新增的li时，click事件会传递给父元素
父元素响应click事件，最终新增的li会执行click事件

！！！！现在用on来替代delegate

$(“ul”).delegate(“li”,“click”,function(){})
$(“ul”).on(“click”,“li”,function(){})

事件委托练习

点击登录弹出登录框，点击关闭关闭登录框

<style>
    .loginback{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background: rgb(0,0,0,0.5);
    }
    body{
        width: 99%;
        height: 100%;
    }
    .login{
        width: 500px;
        height: 300px;
        border: 5px solid black;
        position: relative;
        margin: 100px auto;
    }
    span{
        width: 50px;
        height: 50px;
        position: absolute;
        right: 0;
        top: 0;
        background-color: blue;
    }
</style>
<script src="../jquery-1.12.4.min.js"></script>
<script>
    $(function()
    {
        //点击弹出登录框
        $("a").on("click",function()
        {
                var $login=$(
            '<div class="loginback">'+
            '  <div class="login">'+
            '      <span>关闭</span>'+
            '  </div>'+
            '</div>')
            $("body").append($login);       

            //点击关闭关闭登录框(span的click委托给body监听)
            $("body").delegate(".login>span","click",function()
            {
                $login.remove();
            })
            return false;
        })
    })
</script>
<body>

    <a href="http://www.baidu.com">登录</a>
    <div></div>
</body>

嘤嘤鸭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery知识点总结（五）

jQuery知识点总结（五）事件冒泡和默认行为什么是事件冒泡？当给子级一个事件的时候，子级的事件会传递给父级，父级也会执行这个事件如何阻止事件冒泡在子级的事件函数内加上return false；如果子级有event参数传入可以在子级的事件函数内加上event.stopPropagation( );什么是默认行为默认行为就是没有添加但是本身就拥有的行为，比如a标签、s...
复制链接

扫一扫