jQuery的事件

1.事件流:

　　(1)　　事件捕获

　　(2)　　处于目标阶段

　　(3)　　事件冒泡

<script>
        window.onload = function(){

            var oBtn = document.getElementById('btn');

            //1.
            document.addEventListener('click',function(){
                console.log('document处于事件捕获阶段');
            }, true);

            //2.
            document.documentElement.addEventListener('click',function(){
                console.log('html处于事件捕获阶段');
            }, true);
            //3
             document.body.addEventListener('click',function(){
                console.log('body处于事件捕获阶段');
            }, true);
             //4.
            oBtn.addEventListener('click',function(){
                console.log('btn处于事件捕获阶段');
            }, true);
            //
            oBtn.addEventListener('click',function(){
                console.log('btn处于事件冒泡阶段');
            }, false);
            //5
             document.body.addEventListener('click',function(){
                console.log('body处于事件冒泡阶段');
            }, false);
             //6
              document.documentElement.addEventListener('click',function(){
                console.log('html处于事件冒泡阶段');
            }, false);
           //7.
            document.addEventListener('click',function(){
                console.log('document处于事件冒泡阶段');
            }, false);

    };

    </script>

2.事件对象

　　每一个事件的回调函数都会默认有一个事件对象

　　event.target　　触发目标的对象

　　event.type　　事件类型

　　event.keyCode　　键码

3.事件冒泡　　

　　event.stopPropagation();

　　阻止默认的事件

　　event.preventDefault();

　　return false;　　既阻止事件冒泡又阻止默认行为

4.事件代理

　　自己完成不了的事情,交给别人去做

　　原理:使用冒泡的机制

　　现有的p以及未来添加的p都能做事件操作

　　$("div").on("click","p",fn)

5.鼠标事件

　　click　　鼠标单击触发事件

　　dbclick　　双击触发

　　mousedown()/up()　　鼠标按下/弹起触发事件

　　mousemove()　　鼠标移动事件

　　mouseover()/out()　　鼠标移入/移出触发事件(鼠标指针穿过/离开被选元素或者当前元素的子元素会触发事件)

　　mouseenter()/leave()　　鼠标进入/离开触发事件(鼠标指针只在穿过/离开被选元素触发事件)

　　focus()/blur()　　鼠标聚焦/失去焦点触发事件

　　keydown()/up()　　键盘按键按下/弹起触发

6.表单事件

　　change()　　表单元素发生改变时触发事件

　　select()　　文本元素发生改变时触发事件

　　submit()　　表单元素发生改变时触发事件

 

7.单双击问题

var timer = null;
$("button").click(function(event){
   console.log(timer);
   clearTimeout(timer);
   //定时器 300ms 一次性定时器
    timer = setTimeout(function(){
        console.log("单击了");
    },300);

$("button").dbclick(function(event)){
    console.log(timer);
    clearTimeout(timer);
    console.log("双击了");
});