jQuery事件

十、事件

1.事件

• jQuery里面的事件不需要写on。
• 下面括号中data是事件传递的数据，fn是事件的匿名函数回调。
• 可以链式写事件（即连点）

blur([[data],fn]) 失焦事件
change([[data],fn]) 该事件仅适用于文本域（text field），以及 textarea 和 select 元素。
click([[data],fn])
dblclick([[data],fn])
focus([[data],fn]) 获焦事件
focusin([data],fn) 当元素获得焦点时，触发 focusin 事件。
focusout([data],fn) 当元素失去焦点时触发 focusout 事件。
keydown([[data],fn])
keypress([[data],fn])
keyup([[data],fn])
mousedown([[data],fn])
mouseenter([[data],fn])
mouseleave([[data],fn])
mousemove([[data],fn])
mouseout([[data],fn])
mouseover([[data],fn])
mouseup([[data],fn])
resize([[data],fn]) 浏览器窗口变化事件
scroll([[data],fn])
select([[data],fn])
submit([[data],fn]) 提交表单时，会发生 submit 事件。该事件只适用于表单元素。

<button id="btn">按钮</button>
<input type="text" class="ipt" value="123"/>

    $('#btn').click(10,function(e) {
        console.log(e.data);
    }).mouseenter(function() {
        console.log('进入');
    }).mouseout(function () {
        console.log('离开');
    }).mousemove(function () {
        console.log('移动');
    });

    $('.ipt').focus(function() {
       $(this).css('color', 'red');
    }).blur(function () {
        $(this).css('color', 'blue');
    });

    $('.ipt').focusin(function () {
       console.log(1);
    }).focus(function () {
        console.log(2);
    }).focusout(function () {
        console.log(3);
    }).blur(function () {
        console.log(4);
    }); //输出结果是1234

   /*
    * 鼠标滚轮事件
    * 火狐事件名称为DOMMouseScroll
    * */
    $(document).on('mousewheel', function (e) {
       console.log(e);
    });//上滑负，下滑正

    $(document).on('DOMMouseScroll', function (e) {
        console.log(e);
    });
    /*document.addEventListener('mousewheel', function (e) {
        console.log(e);
    });*/

 

2.事件切换

hover([over,]out)鼠标悬停事件，鼠标移到指定元素中，则触发第一个函数，移出则触发第二个函数

   /*
    * 事件切换
    * */
    $('.box').hover(function(){
        console.log('进入');
    },function() {
        console.log('离开');
    });

3.事件处理

on(eve,[sel],[data],fn)1.7+ 在选择元素上绑定一个或多个事件的事件处理函数。
off(eve,[sel],[fn])1.7+ 移除
one(type,[data],fn) 一次性事件
trigger(type,[data]) 自动触发事件

   /*
    * 事件处理
    * */

    //事件绑定，传递数据
    $('.box').on('click',10, function(e) {
       console.log(e.data);
    });

    //on可以进行事件委托
    $('.menu').on('click','li', function () {
       console.log('点击');
    });

    //一次绑定多个事件
    $('.box').on('mouseenter mousemove', function(e) {
       if(e.type == 'mouseenter') {
           console.log("进入");
       }else {
           console.log("移动");
       }
    });

    //移除事件绑定
    //$('.box').off();
    //移除指定事件
    $('.box').off('click');

    //one 绑定一次性事件
    /*$('.red').one('click', function () {
       console.log("点击");
    });*/

    //trigger 指定触发事件
    /*$('.red').click(function () {
        console.log('点击');
    }).trigger('click');*/
    //trigger 传递数据
    /*$('.red').click(20, function (e, a, b, c) {
        console.log('点击', e.data, a, b, c);
    }).trigger('click', [1, 2, 3]);*/

    //自定义事件
    $('.red').on('myevent', function (e) {
        console.log(e);
    }).trigger('myevent');

十一、事件对象

eve.currentTarget 当前点击的目标元素
eve.data 事件传递的数据
eve.delegateTarget1.7+ 
eve.isDefaultPrevented() 返回值true/false 是否使用过preventDefault
eve.isPropagationStopped() 返回值true/false 是否使用过stopPropagation
eve.namespace
eve.pageX
eve.pageY
eve.preventDefault() 阻止事件的默认行为
eve.relatedTarget
eve.result
eve.stopPropagation() 阻止事件冒泡
eve.target 执行事件的目标元素
eve.timeStamp 
eve.type 
eve.which 

    $('.btn').click(function() {
       return false;
    });
    $('.btn').click(function (e) {
        console.log(e);
        //e.data 事件传递参数 数据在上面
        //e.currentTarget 等价js 中的e.target 当前触发的目标元素
        //console.log(e.delegateTarget);//等价 e.currentTarget
        //e.preventDefault();  //阻止事件默认行为
        //e.stopPropagation(); //阻止事件冒泡
        //e.preventDefault();
        //下面这个是检测是否调用e.preventDefault() 返回值true/false
        //console.log(e.isDefaultPrevented());
        //检测是否调用e.stopPropagation()  true false
        //e.isPropagationStopped();
        //console.log(e.result); //事件执行函数 显示之前的返回值
        //console.log(e.timeStamp); //触发事件的时间 单位为ms
        //e.type //触发的事件类型
        //用户知道按键的键值 鼠标事件全是1， 键盘事件是对应的键值
        //e.which
    });

     div.box {
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }

    <div class="box">
        <button class="box">按钮</button>
    </div>

    var count = 0;
    $('.box').click(function (e) {
        count++;
        console.log(count);

        //处理事件冒泡
        //return false;
        //e.stopPropagation();
        //e.originalEvent.cancelBubble = true;

        //处理事件默认行为
        e.preventDefault();
    })