jQuery的事件

事件

1 事件对象

添加事件：$().事件方法(事件处理函数)

$(window).click(function(ev){
    //1.事件对象，jQuery通过事件处理函数的参数获取，已经做好了兼容
    //console.log(ev); //jQuery.Event
    //console.log(ev.originalEvent); //原生事件对象

    //2.事件对象属性
    console.log(ev.clientX+"-----"+ev.clientY); //鼠标位置，相对于可视区
    console.log(ev.keyCode); //按键编码
    console.log(ev.shiftKey,ev.ctrlKey,ev.altKey); //有没有按，按了-true  没按-false
});

$("a").click(function(ev){
    ev.stopPropagation(); //阻止事件冒泡
    ev.preventDefault(); //阻止默认行为
    console.log("被点击了");
})

2 事件绑定

2.1 原生js的事件绑定

• 绑定
  • 标准浏览器：标签.addEventLister(事件类型，事件处理函数，是否捕获)
  • IE浏览器：标签.attachEvent(事件类型，事件处理函数)
• 取消
  • 标准浏览器：标签.removeEventLister(事件类型，事件处理函数，是否捕获)
  • IE浏览器：标签.detachEvent(事件类型，事件处理函数)

4.2.2 jquery的事件绑定

• 绑定事件：on

  • 普通事件添加：$().on(事件类型，事件处理函数)

    //1.不会覆盖，可以叠加
    $("div").on("click",week1);
    $("div").on("click",week2);
    
    //2.可以多个不同事件添加同一个事件处理函数
    $("div").on("click mouseover",week1);
    
    //3.同时添加多个事件
    $("div").on({
        "click":week1,
        "mouseover":week2
    });
    
    //4.可以自定义事件
    $("div").on("classover",function(){
        console.log("睡觉看奥特曼，梦里啥都有");
    });
    
    //触发自定义事件
    setTimeout(function(){
        $("div").trigger("classover");
    },2000);
    
    
    //5.命名空间，如果项目足够大，或者引入了大量的第三个库，可能会出来命名冲突
    var index = {}; 
    index.name = "首页";
    
    var detail = {};
    detail.name = "详情页";
    
    
    $("div").on("click.txf",week1);
    $("div").on("click.ujiuye",week2);
    

  • 事件绑定添加：$().on(type,子元素选择器,事件处理函数)

    //将事件添加给父元素，当子元素事件触发的时候，会通过事件冒泡传递到父元素
    //特点：提高性能，事件可以发生在未来
    //$().on(type,子元素选择器,事件处理函数)
    $("ul").on("click","li",function(){
        console.log(this); //this指向触发事件的子元素
        $(this).css("background","green").siblings().css("background","");
    });
    
    $("ul").append("<li>下课</li>")
    

• 取消事件：off 所有形式添加的事件都可以通过off方法取消

  //取消：$().off(事件类型,事件处理函数)
  //$("div").off(); //默认清除这个标签上的所有事件
  //$("div").off("click"); //清除标签上所有的点击事件
  $("div").off("click",week1); //清除这一个
  

• 一次性事件

   //一次性事件语法：$().one(事件类型，事件处理函数)
  var arr = ["1600压岁钱","对象","1060显卡","苹果全套"];
  $("button").one("click",function(){
      console.log(arr[Math.floor(Math.random()*arr.length)]);
  });
  

• 组合事件

   $("div").hover(function(){
       //移入执行代码
       $("div").css("width",200)
   },function(){
       //移出执行代码
       $("div").css("width",100)
   })