jQuery事件机制

• jQuery事件发展历程（了解即可）（有委托事件，先执行委托事件，在执行自己的事件）
  简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定

• 简单注册事件：缺点是只能注册一个

• delegate:(事件冒泡）{给父元素注册点击事件}
  第一个参数：selector:事件最终由谁来执行。
  第二个参数：事件的类型
  第三个参数：函数，要做什么

<script>
  $(function () {
    //bind方式
	//    $("p").bind({
	//      click:function () {
	//        alert("啦啦")
  },
	//      mouseenter:function () {
	//        alert("呼呼")
	//      }
	//    });
   
    $("#btn").click(function () {
      $("<p>我是新增加的p元素</p>").appendTo("div");
    });
    //简单事件，只给自己注册的事件
	//    $("div").click(function () {
	//      alert("啦啦");
	//    });
    
    //delegate:代理，委托
    //1. 给父元素注册委托事件，最终还是有子元素来执行。
    //要给div注册一个委托事件,但是最终不是由执行，而是有p执行
    //第一个参数：selector:事件最终由谁来执行。
    //第二个参数：事件的类型
    //第三个参数：函数，要做什么
    
    //1. 动态创建的也能有事件 :缺点：只能注册委托事件
    $("#box").delegate("p", "click", function () {
      //alert("呵呵");
      console.log(this);
    });
 
    //注册简单事件，缺点：一次只能注册一个事件
//    $("p").click(function () {
//      alert("呵呵");
//    });
  });
</script>

• on注册事件
  on注册简单事件：有自己触发，不支持动态绑定。

$(selector).on("click",function(){});

on注册委托事件：给父元素绑定事件，然后让其子元素触发才能实现，支持动态绑定。

$(selector).on("click",span,function(){});

on注册事件的语法：
第一个参数：events,绑定事件的名称由空格分隔多个事件（标准事件或者自定义事件）；
第二个我参数：selector,执行事件的后代元素（可选），如果没有后代元素，那么事件将由自己执行；
第三个参数：deta,传递给处理函数的数据，事件触发的时候通过event,deta来用（不常用）；
第四个参数：handler,事件处理函数。

<script>
  $(function () {
    
    
    // 这个是p自己注册的事件（简单事件）
    /*$("p").on("click", function () {
      alert("哈哈");
    });*/
    
    
    $("div").on("click", "p", function () {
      alert("哈哈")
    });
    
    
    $("#btn").on("click", function () {
      $("<p>我是新建的p元素</p>").appendTo("div");
    });
    
    
  });
</script>

• 事件解绑：off方法
  off方法解绑所有元素的事件

$(selector).off()  //不传任何参数

off方法解绑匹配元素的事件

$(selector).off("click")   //解绑click事件

• 触发事件

$(selector).click();   //触发  click事件
$(selector).trigger("click")    //trigger:触发

jQery事件对象

jQuery事件对象其实就是js事件对象的一个分装，处理了兼容性。

//screenX和screenY     对应屏幕最左上角的值
//clientX和clientY    距离页面左上角的位置 （忽略滚动条）
//pageX和pageY     距离页面最顶部的左上角的位置 （会计算滚动条的距离）
//event.keyCode   按下的键盘代码
//event.date   存储绑定事件时候传递的参数  一般不用
//event.stopPropagation()     阻止事件冒泡的行为
//event.preventDefault()   阻止浏览器默认行为    链接跳转行为
//return false:既能阻止事件冒泡，又能阻止浏览器的默认行为。

<script>
  $(function () {
    
    $("#link").on("click", function (e) {
      
      //阻止 默认
      //e.preventDefault();
      //e.stopPropagation();
      //alert("呵呵");
      //return false;//既能阻止事件冒泡，也能阻止浏览器的默认行为。
      //console.log(e.cancelBubble);
      //alert("呵呵");
    });
    
    $("body").on("click", function () {
      alert("哈哈");
    })
    
  });
</script>

delay方法

$("div").fadeIn(1000).delay(2000).fadeOut(1000);  //先出现，停留两秒之后，在消失