jQuery-Day03 事件

单个事件注册

• ele.事件名(function(){…})

	<div class="box"></div>
    <script>
        $(function(){
            //单个事件注册
            $(".box").click(function(){
                $(this).css("background","skyblue");
            })
            $(".box").mouseenter(function(){
                $(this).css("background","yellow");
            })
        })
    </script>

事件处理

ele.on(events,[selector],fn)

• events:一个或多个用空格分隔的事件类型
• selector:元素的子元素选择器(事件委托)
• fn:回调函数

	<div class="box"></div>
    <script>
        $(function(){
           //事件处理on
            $(".box").on({
                mouseenter:function(){
                    $(this).css("background","yellow");
                },
                click:function(){
                    $(this).css("background","skyblue");
                }
            })
        })
    </script>

ele.on()可以实现事件委托，并动态的为创建的新元素绑定事件

	<div class="box">
        <p>微博发布</p>
        <textarea name="" id="" class="txt" cols="100" rows="10"></textarea>
        <button class="btn">发布</button>
        <ul>
        	<!-- 评论区 -->
        </ul>
    </div>

    <script>
        $(function(){
        	//发布按钮点击增加评论事件
            $(".btn").on("click",function(){
            	//创建li
                var li = $("<li></li>");
                li.html($(".txt").val() + "<a href='javascript:;'>删除</a>");
                //插入li
                $("ul").prepend(li);
                //下滑显示
                li.slideDown();
                //清空表单的内容
                $(".txt").val("");
            })
            //给li中的删除按钮a绑定事件，即使是后创建的li也会动态绑定
            $("ul").on("click","a",function(){
                $(this).parent().slideUp(function(){
                    $(this).remove();
                });
            })
        })
    </script>

解除绑定事件 ele.off()

• off()方法可以移除通过on方法添加的事件处理程序

	<script>
        $(function(){
        	//清除全部
            $(".box").off();
            //解绑单个
            $(".box").off("click");
            //解绑事件委托
            $("ul").off("click","li");
        })
    </script>

• 只触发一次的事件 ele.one()

	<script>
        $(function(){
        	//清除全部
            $(".box").off();
            //解绑单个
            $(".box").off("click");
            //解绑事件委托
            $("ul").off("click","li");
        })
    </script>

自动触发事件 trigger()

1. ele.click();
2. ele.trigger(“click”);
3. ele.triggerHandler(“click”);
4. 第三种不同于第一二种的地方，是不会触发元素的默认行为

阻止默认行为

1. 阻止默认行为 e.preventDefault() 或 return false;
2. 阻止冒泡 e.stopPropagation();

	<div class="box"></div>	
	<script>
		$(function(){
			$(".box").on("click",function(e){
				console.log("box");
				e.stopPropagation();
				//return false;
			})
			$(document).on("click",function(){
				console.log("document");
			})

			// $(".box").click();
			// $(".box").trigger("click");
			// $(".box").triggerHandler("click")
		})
	</script>