jQuery 事件

一、事件名称函数

.mouseover() 鼠标移入事件

<button id="btn">事件名称函数</button>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>

$('#btn').mouseover(function(){
	$(this).css({
		background:'#008c8c',
		color:'#fff'
	});
});

</script>

链式操作鼠标移入移出事件

$('#btn').mouseover(function(){

	$(this).css({
		border:'none',
		background:'#008c8c',
		color:'#fff'
	});

}).mouseout(function(){

	$(this).css({
		background:'#ff8c8c',
		color:'#fff'
	});

});

用事件名称函数是比较直接的方式，小的功能是没有问题的，如果事件有复杂的交互功能时候，建议用.on()添加事件，jQuery对.on()的封装是非常充足的功能

二、使用.on()添加事件

点击click事件，改变按钮的背景色

第一个参数：click事件名

第二个参数：事件处理函数

<button id="btn">通过on添加事件</button>

<script>

    $('#btn').on('click', function(){
    
    	$(this).css('background', '#008c8c');
    
    })

</script>

.on()方法最多可以接收四个参数

第一个：事件名，比如click事件…

第二个：给事件传递的一些数据，比如交互时候通过请求过来的ajax数据（这个参数是一个对象）

第三个：类似原生JS中的事件委托的功能

第四个：事件处理函数

第二个参数

第二个参数传的是一个数据，数据类型是对象（key键 =>value值），然后事件对象里面的data属性是我们传的数据obj（obj是第二个参数）

var obj = {
	name: '小强'
}

$('#btn').on('click', obj, function(event){
	
	$(this).text(event.data.name); // 事件对象event上的data属性是我们传进来了obj数据

})

两个.on()事件是可以并存的

$('#btn').on('click', function(){

	$(this).css('background', '#008c8c');

});


$('#btn').on('click', {name: '小强'}, function(event){

	$(this).text(event.data.name);

});

第四个参数，事件委托

注意，"事件处理函数"里面的this，不是指向绑定事件的btn按钮了，而是第四个参h2标签

<div id="box">
	<h2>h2</h2>
	<p>p</p>
</div>

<script>

    $('#box').on('click', 'h2', {color: 'red'}, function(event){
    
    	// this指向h2标签（这个很关键）
    	$(this).css('border', '1px solid ' + event.data.color);
    
    });

</script>

on可以绑定一个或多个事件处理函数

<button id="btn">on绑定多个事件</button>

<script>

$('#btn').on({

	mouseenter:function(){

		$(this).css('background', 'brown');

	},
	mouseleave:function(){

		$(this).css('background', 'cyan');

	},
	click:function(){

		$(this).css('border', 'none');

	},
	dblclick:function(){

		$(this).css('color', '#fff');

	}

});

</script>

还有.bind()绑定事件的方式，bind和on的方法是一样的，bind这个方法在1.7版本后被弃用了

三、使用.one()添加事件

one()方式添加的事件仅仅只能够发生一次，发生一次之后事件就被删除了，这个单词是一次的意思

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<title>one</title>
</head>
<body>

<div id="box">
    <button>通过one添加事件</button>
    <p>p标签</p>
</div>

<script>

$('#box').one('click', 'button', {color: 'red'}, function(event){

    $(this).css('background', event.data.color);

    alert('只弹出一次，因为one的作用只触发一次');

});

</script>

</body>
</html>

四、解除事件off()

手册上的例子

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
    button { margin:5px; }
    button#theone { color:red; background:yellow; }
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<title>off解除事件</title>
</head>
<body>
    
    <button id="theone">Does nothing...</button>
    
    <button id="bind">Add Click</button>
    
    <button id="unbind">Remove Click</button>
    
    <div style="display:none;">Click!</div>
    
    
    <script>
    
        function aClick() {
            $("div").show().fadeOut("slow");
        }
        
        $("#bind").click(function () {
            $("body").on("click", "#theone", aClick)
                .find("#theone").text("Can Click!");
        });
        
        $("#unbind").click(function () {
            $("body").off("click", "#theone", aClick)
                .find("#theone").text("Does nothing...");
        });
    
    </script>

</body>
</html>

下面这的意思，还不是特别透彻

<button id="btn">鼠标移入移出事件</button>
<button id="del-over">解除鼠标移入事件</button>
<button id="del-out">解除鼠标移出事件</button>
<button id="del-all">解除全部事件</button>

<script>

    $('#btn').on({
        mouseover:function(){

            $(this).css('background', 'brown');

        },
        mouseout:function(){

            $(this).css('background', 'cyan');

        }
    })
    
    $('#del-all').on('click', function(){

        $('#btn').off(); // 没有参数解除全部的事件

    })
    
    $('#del-over').on('click', function(){
 
        $('#btn').off('mouseout').removeAttr('style'); // 只解除鼠标移入事件

    })

</script>

五、手动触发绑定的事件triggler()

任何一个事件必须通过事件的特征触发，

比如click要通过点击触发，mouseover事件鼠标放上去才能触发…

手动触发绑定的事件，也就是说我们主动的去触发，

比如点击click事情，不需要发生一个操作鼠标点击的过程，这个click事件就能够触发了，就叫主动或者说手动的触发事件，

主动触发绑定事件通过trigger()方法、triggerHandler()两个方法触发

这里还涉及到一个上面提到的 "on方法可以自定义事件" 的知识点

下面click点击事件，不需要去点击触发了，调用trigger()方法主动的去触发事件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<title>手动触发绑定的事件trigger()</title>
</head>
<body>

<button id="btn">trigger触发事件</button>

<script>

$('#btn').on({
    click:function(){
        console.log('点击事件');
        $(this).css('background', 'brown');
    },
    mouseover:function(event, name, age){
        console.log('鼠标移入事件，名字：' + name + ' 年龄：' + age);
        $(this).css('border', 'none');
    },
    end:function(){
        console.log('这是一个自定义事件');
        $(this).css('color', '#fff');
    }
});


// 之前需要鼠标操作去触发事件，现在不需要鼠标操作了
setTimeout(function(){
    $('#btn').trigger('click');
}, 2000);

setTimeout(function(){

     // 这里接收上面传入的三个参数，
     // 1.第一个参数是事件对象不用管
     // 2.剩下的参数数组形式
    $('#btn').trigger('mouseover', ['小强', 18]);
}, 4000);

// 自定义事件只能通过triggle触发
setTimeout(function(){
    $('#btn').trigger('end');
}, 6000);

</script>
</body>
</html>

六、trigglerHandler()

triggerHandler()的方法和行为跟trigger()是一样的，但是有4个方面的区别

1、第一个区别，默认行为是不一样的

trigger() 会触发"事件的默认行为"

triggerHandler()不会触发"事件的默认行为"

给input框添加一个获取焦点的focus事件，分别用trigger和triggerHandler触发事件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<title>Document</title>
</head>
<body>

<button id="btn-first">trigger</button>
<button id="btn-second">triggerHandler</button>
<p>
    <input type="text" value="获取焦点"/>
</p>

<script>

$('input').on('focus', function(){
    console.log('获取到input焦点了');
    $(this).css({
        border:'none',
        outline: 'none',
        outlineOffset: 0,
        color:'#ccc',
        border: '1px solid #ff8c8c'
    });
});

$('#btn-first').on('click', function(){
    // 老师说，trigger控制台会输出两次，实测只触发一次
    $('input').trigger('focus');
});

$('#btn-second').on('click', function(){
    $('input').triggerHandler('focus');
});

</script>
</body>
</html>

trigger()触发后发生两件事，

1). 控制台输出'获取到input焦点了'，

2). 光标指向input标签

triggerHandler()触发后

只发生了控制台输入'获取到input焦点了'，除了不聚焦其它的和triggler一样

2、区别二，执行事件的元素的数量

trigger() 会执行所有选定元素集中，每个元素的事件

triggerHandler() 只执行所有选定元素集中，第一个元素的事件

trigger执行每个li身上的事件

<ul id="wrapper">
    <li>red</li>
    <li>green</li>
    <li>blue</li>
    <li>brown</li>
</ul>

<script>

$('#wrapper li').click(function(){
    console.log($(this).text() + ':' + $(this).index());
});

setTimeout(function(){
    $('#wrapper li').trigger('click');
}, 2000);

</script>

triggerHandler()只执行第一个li

$('#wrapper li').click(function(){
    console.log($(this).text() + ':' + $(this).index());
});

setTimeout(function(){
    $('#wrapper li').triggerHandler('click');
}, 2000);

3、第三个区别，是否冒泡

trigger() 会冒泡

triggerHandler() 不会冒泡

给span以及h2标签上面添加事件，trigger()触发span标签，事件会冒泡到h2标签上

<div id="bubble">
    <h2 style="width:60px;padding:20px;border:1px solid cyan;">
        <span style="border:1px solid brown;">小强</span>
    </h2>
</div>

<script>

$('#bubble h2').click(function(){
    console.log('h2标签被点击了');
});

$('#bubble span').click(function(){
    console.log('span标签被点击了');
});

setTimeout(function(){
    $('#bubble span').trigger('click');
}, 3000);

</script>

triggerHandler()触发span标签事件不会冒泡

$('#bubble h2').click(function(){
    console.log('h2标签被点击了');
});

$('#bubble span').click(function(){
    console.log('span标签被点击了');
});

setTimeout(function(){
    $('#bubble span').triggerHandler('click');
}, 3000);

4、第四个区别，链式操作

trigger() 可以使用链式操作

triggerHandler() 不可以使用链式操作

trigger()方调用一次后，后面可以继续调用trigger方法

<button id="btn">button</button>

<script>

$('#btn').on({
    mouseover:function(){
        $(this).css('width', '200px');
    },
    mouseout:function(){
        $(this).css('height', '200px');
    }
})

setTimeout(function(){
    $('#btn').trigger('mouseover').trigger('mouseout');
}, 3000);

</script>

triggerHandler()直接报错，仅仅只能操作一次

$('#btn').on({
    mouseover:function(){
        $(this).css('width', '200px');
    },
    mouseout:function(){
        $(this).css('height', '200px');
    }
})

setTimeout(function(){
    $('#btn').triggerHandler('mouseover').triggerHandler('mouseout');
}, 3000);

报错信息Uncaught TypeError: Cannot read properties of undefined (reading 'triggerHandler')

意思是triggerHandler方法是undefined

为什么triggerHandler不能使用链式操作呢？

因为trigger返回的是调用事件的btn对象，triggerHandler返回的是最后一次方法的返回值

如果想用trigglerHandler链式操作非常简单，链式操作的关键是，方法的返回值还是调用的对象

$('#btn').on({
    mouseover:function(){
        $(this).css('width', '200px');
        return $(this); // 让这个方法返回this（如果没有返回默认返回undefined）
    },
    mouseout:function(){
        $(this).css('height', '200px');
    }
})

setTimeout(function(){
    $('#btn').triggerHandler('mouseover').triggerHandler('mouseout');
}, 3000);

七、jQuery的事件对象

对比jQuery的事件对象跟原生JS的事件对象

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<title>事件对象</title>
</head>
<body>

<button id="event-js">JS原生事件对象</button>
<button id="event-jquery">jQuery事件对象</button>

<script>

$('#event-js')[0].onclick = function(e){
    console.log(e);
}

$('#event-jquery').click(function(event){
    console.log(event);
});

</script>
</body>
</html>

jQuery事件对象

$('#event-jquery').click(function(event){

    console.log(event.currentTarget); // <button id="event-jquery">jQuery事件对象</button>
    console.log(event.data); // on绑定事件，用参数传的数据
    console.log(event.pageX, event.pageY);
    console.log(event.pageX, event.pageY);

});

八、jQuery注册事件列表

鼠标事件

事件	功能
.click()	原生JS的click事件
.contextmenu()	鼠标右键
.dblclick()	原生JS的dblclick鼠标双击事件
.hover()	将二个事件函数绑定到匹配元素上
.mousedown()	原生JS的mousedown鼠标按下事件
.mouseenter()	鼠标移入
.mouseleave()	鼠标离开
.mousemove()	为原生JS中的mousemove鼠标移动事件
.mouseout()	为原生JS中的mouseout鼠标移出事件（注：支持事件冒泡）
.mouseover()	为原生JS中的mouseover鼠标移入事件（注：支持事件冒泡）
.mouseup()	为原生JS中的mouseup鼠标抬起事件
.toggle()	绑定两个或多个处理程序绑定到匹配的元素，用来执行在交替的点击

键盘事件

事件	功能
.keydown()	为keydown事件绑定一个处理函数
.keypress()	为keypress事件绑定一个处理函数
.keyup()	为keyup事件绑定一个处理函数

表单事件

事件	功能
.submit()	为JavaScript的submit事件
.change()	为JavaScript的change事件
.focus()	为JavaScript的focus事件
.focusin()	将一个事件函数绑定到focusin事件
.focusout()	将一个事件函数绑定到focusout 事件
.select()	为JavaScript的select事件绑定一个处理函数

事件对象

event.currentTarget 在事件冒泡过程中的当前DOM元素

event.delegateTarget 绑定了当前正在调用jQuery 事件处理器的元素。

event.isDefaultPrevented() 根据事件对象中是否调用过 event.preventDefault() 方法,来返回一个布尔值。

event.isImmediatePropagationStopped() 根据事件对象中是否调用过 event.stopImmediatePropagation() 方法,来返回一个布尔值。

event.isPropagationStopped() 根据事件对象中是否调用过 event.stopPropagation() 方法,来返回一个布尔值。

event.metaKey 表示事件触发时哪个Meta键被按下。

event.namespace 当事件被触发时此属性包含指定的命名空间。

event.pageX 鼠标相对于文档的左边缘的位置（左边）。

event.pageY 鼠标相对于文档的顶部边缘的位置（坐标）。

event.preventDefault() 如果调用这个方法，默认事件行为将不再触发。

event.relatedTarget 在事件中涉及的其它任何DOM元素。

event.result 事件被触发的一个事件处理程序的最后返回值，除非值是 undefined。

event.stopImmediatePropagation() 阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上。

event.stopPropagation() 防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。

event.target 触发事件的DOM元素。

event.timeStamp 这个属性返回事件触发时距离1970年1月1日的毫秒数。

event.type 描述事件的性质。

event.which 针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键。