入门jQuery

1.事件冒泡和默认行为

1.1 事件冒泡：事件从里向外，从下级向上级传递的过程，儿子传给父亲，父亲传给爷爷。

<script src="/js/jquery-1.10.1.min.js"></script>
<script>
    $(function (){
        $('.father').click(function (){
            alert('father');
        });
        $('.son').click(function (){
            alert('son');
        });    
    });
</script>
<div class="father" style="width: 200px;height: 200px;background: red">
    <div class="son" style="width: 100px;height: 100px;background: blue"></div>
</div>

点击儿子元素的块盒在弹出son之后又弹出父元素father

在企业开发中，有时我们需要子元素执行某种功能，但不需要父元素执行，这个时候我们就需要用到阻止事件冒泡的产生。

阻止事件冒泡的有两种方式

<script>
    $(function (){
        $('.son').click(function (event){
            alert('son');
        });    
        $('.father').click(function (event){
            alert('father');
            //return false;
            event.preventDefault(); //在function在传递参数并调用preventDefault()
        });
    });
</script>

1.2 默认行为：用户某些动作后，标签自动发生的行为。

$('a').click(function (){
    alert('弹出注册框');
});
<a href="http://www.baidu.com">注册</a>

阻止默认行为的两种方式

$('a').click(function (event){
    alert('弹出注册框');
    //阻止默认行为的两种方式
    // return false;
    event.preventDefault();
});
<a href="http://www.baidu.com">注册</a>

2.事件自动触发

<script src="/js/jquery-1.10.1.min.js"></script>
<script>
    $(function (){
        $('.father').click(function (){
            alert('father');
        });
        $('.son').click(function (){
            alert('son');
        });  
        /*
        两种事件触发的方式和区别:
        1.trigger: 如果使用trigger自动触发事件，会触发事件冒泡
        2.triggerHandler：如果使用triggerHandler自动触发事件，不会触发事件冒泡
        */
        $('.father').trigger('click');
        // $('.father').triggerHandler('click');


        $("input[type='submit']").click(function (){
            alert('submit');
        });

        /*
        1.trigger：如果使用trigger自动触发事件，会触发默认行为
        2.triggerHandler：如果使用triggerHandler自动触发事件，不会触发默认行为
        */
        // $("input[type='submit']").trigger('click');
        // $("input[type='submit']").triggerHandler('click');

        $('span').click(function (){
            alert('a')
        });
        // $('span').trigger('click');

    });
    });
</script>
<div class="father" style="width: 200px;height: 200px;background: red">
    <div class="son" style="width: 100px;height: 100px;background: blue"></div>
</div>
<a href="http://www.baidu.com"><span>注册</span></a>

3.自定义事件

想要自定义事件，必须满足两个条件

1.事件必须是通过on绑定的

2.事件必须通过trigger来触发

$('.son').on('myclick',function (){
    alert('son');
});
$('.son').trigger('myclick');

4.事件命名空间

1.利用trigger触发子元素带命名空间的事件，那么父元素带相同命名空间的事件也会被触发，而父元素没有命名空间的事件不会被触发

2.利用trigger触发子元素不带命名空间的事件，那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发

$('.son').on('click.zs',function (){
    alert('click1');
});
$('.father').on('click.ls',function (){
    alert('father click1')
});
$('.son').on('click.ls',function (){
    alert('son click2');
});
$('.son').trigger('click.ls');

5.事件委托

请别人帮忙做事情，然后将做完的结果反馈给我们

$('button').click(function (){
    $('ul').append('<li>我是新增的li</li>');
});
/*
在jQuery中，如果通过核心函数找到的元素不止一个，那么在添加事件的时候，jQuery会遍历所有找到的元素，给所有找到的元素添加事件
*/
$('ul>li').click(function (){
    console.log($(this).html());
});

// $('ul').delegate('li','click',function (){
//     console.log($(this).html());
// });
<ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
</ul>
<button>新增一个li</button>

https://blog.csdn.net/qq_53123067/article/details/124535267?spm=1001.2014.3001.5502

未完待续….

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/140148.html