jQuery5

1.jQuery事件的默认触发

		// Html部分
		<div class="father">
	        <div class="son"></div>
	    </div>
	    <a href="http://www.baidu.com">注册</a>
	    <form action="http://www.taobao.com">
	        <input type="text">
	        <input type="submit">
	    </form>

		// CSS部分
		*{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
        }
        
		// JS部分
		$(function(){
            $(".son").click(function(event){
                alert("son")
            })
            $(".father").click(function(){
                alert("father");
            })
            如果使用trigger，会触发事件冒泡
            $(".son").trigger("click")          // 自动触发儿子点击事件
            如果使用triggerHandler，不会触发事件冒泡
            $(".son").triggerHandler("click")          // 自动触发儿子点击事件
            $(".father").trigger("click")   // 阻止了默认事件，弹窗自动弹出
            $(".father").triggerHandler("click")  //阻止了默认事件，弹窗自动弹出

            // 点击提交事件，弹出弹框
            $("input[type='submit']").click(function(){
                alert("submit")
            })
            如果用trigger自动触发事件，会触发默认行为
            $("input[type='submit']").trigger("click");
            如果用triggerHandler自动触发事件，不会触发默认行为
            $("input[type='submit']").triggerHandler("click"); 
        })

2.jQuery自定义事件

		// Html部分
		<div class="father">
	        <div class="son"></div>
	    </div>
	    <a href="http://www.baidu.com">注册</a>
	    <form action="http://www.taobao.com">
	        <input type="text">
	        <input type="submit">
	    </form>
	    
		// CSS部分
		*{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
        }
        
		// JS部分
		$(function(){
            // 自定义事件需要满足的两个条件
            // 1.不能通过eventName来绑定事件 只能通过on()来绑定
            // 2.事件必须通过trigger来触发
            $(".son").on("myClick",function(){    // myClick是自定义事件
                alert("son")
            });
            $(".son").trigger("myClick")          // 触发myClick
        })

3.jQuery事件命名空间

		// Html部分
		<div class="father">
	        <div class="son"></div>
	    </div>
	    <a href="http://www.baidu.com">注册</a>
	    <form action="http://www.taobao.com">
	        <input type="text">
	        <input type="submit">
	    </form>

		// CSS部分
		*{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
        }
        
		// JS部分
		$(function(){
            $(".son").on("click.张三",function(){    // 可以直接在事件后面加命名空间
                alert("click1")
            })
            $(".son").on("click.李四",function(){    // 提示这是李四写的
                alert("click2")
            })
            $(".son").trigger("click.张三")          // 只触发张三的click
        })

4.jQuery事件的委托

		// Html部分
		<ul>
	        <li>我是第1个li</li>
	        <li>我是第2个li</li>
	        <li>我是第3个li</li>
	    </ul>
	    <button>新增一个li</button>
	    
		// JS部分
		// 1.什么是事件委托：请别人帮忙做事。然后得到反馈的结果。
		$(function(){
            $("button").click(function(){
                $("ul").append("<li>我是新增的li</li>")
            })
        })
        // 在jQuery中，如果通过核心函数找到的元素不止一个，那么在添加事件的时候，jQuery会遍历所有找到的元素，给所有找到的元素添加事件。
        $(function(){
            // $("ul>li").click(function(){
            //     console.log($(this).html())
            // })
            // 由于会出现新增的li，这时给li添加点击事件，只有最开始的三个能行，要想后面出现的li也添加点击事件，需要委托给ul。
            // 这里是通过冒泡事件实现的，li属于被选元素的子元素。
            $("ul").delegate("li","click",function(){
                console.log($(this).html())
            })
        })

5.jQuery移入移出事件

		// Html部分  快捷方式div.father>div.son
		<div class="father">
	        <div class="son"></div>
	    </div>
	    
		// CSS部分
		*{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
        }
        
        // JS部分
		// mouseover和mouseout事件，子元素被移入移出也会触发父元素的事件
        // mousenter和mouseleave事件，子元素移入移出不会触发父元素的事件
		$(function(){
            // $(".father").mouseover(function(){
            //     console.log("father移入了")
            // })
            // 移入移出同时监听
            // $(".father").hover(function(){
            //     console.log("father移入了")
            // },function(){
            //     console.log("father移出了")
            // })
            // 只写一个函数，移入，移除同时监听
            $(".father").hover(function(){    
                console.log("father移入移出了")
            })
        })