事件详解
- display:inline-block
- 事件冒泡
- 阻止事件冒泡
- 常用事件
- 事件常用属性
- 事件监听方法
- 示例页面：
- on() 绑定事件
- 绑定单个事件
- 绑定多个事件->同一回调函数
- 绑定多个事件->多个回调函数
- 一次事件 one(type,fun)
- result 属性示例
- off() 解绑事件
- 事件委托
- 自动触发事件
- trigger 触发事件默认行为，造成冒泡
- triggerHandler 触发事件默认行为，不造成冒泡
- 自定义事件
- 命名空间
jQuery笔记目录
display:inline-block
display:inline：强制变成行内元素，不换行。 display:block：强制变成块元素，可以设置狂傲 displsy:inline-block：行内块状元素的特点是，既能够设置宽高，又不独自占据一行。
事件冒泡
如果层级之间绑定了同一个事件。当里面子控件触发时，父控件会同时触发。
阻止事件冒泡
event.stopPropagation();常用事件
- blur() 当失去焦点时触发。包括鼠标点击离开和TAB键离开。
- change() 当元素获取焦点后，值改变失去焦点事触发。
- click() 当鼠标单击时触发。
- dblclick() 当鼠标双击时触发。
- error() 当javascript出错或img的src属性无效时触发。
- focus() 当元素获取焦点时触发。注意：某些对象不支持。
- focusin() 当元素或其子元素获取焦点时触发，与focus()区别在于能够检测其内部子元素获取焦点的情况。
- focusout() 当元素或者其子元素失去焦点时触发，与focusout()区别在于能够检测内部子元素失去焦点的情况。
- keydown() 当键盘按下时触发。
- keyup() 当按键松开时触发。
- mousedown() 当鼠标在元素上点击后触发。
- mouseenter() 当鼠标在元素上穿过时触发。mouseenter与mouseover的区别是，鼠标从mouseover的子元素上穿过时也会触发而mouseenter不会。
- mouseleave() 当鼠标从元素上移出时触发。
- mousemove() 当鼠标在元素上移动时触发。.clientX和.clientY分别代表鼠标的X坐标与Y坐标。
- mouseout() 当鼠标从元素上移开时触发。
- mouseover() 当鼠标移入元素时触发。
- mouseup() 当鼠标左键按下释放时触发。
- resize() 当浏览器窗口大小改变时触发。$(window).resize();
- scroll() 当滚动条发生变化时触发。
- select() 当input里的内容被选中时触发。
- submit() 提交选中的表单。
- unload() 当页面卸载时触发。
事件常用属性
事件监听方法
bind()，live()，delegate() 方法已经不再使用。
示例页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<button>事件</button>
<div></div>
</body>
</html>界面效果：
on() 绑定事件
绑定单个事件
$tag.on(event, data, function)
$('button').click({name:'撩课'},function (event) {
// alert(0)
/*事件的类型*/
console.log(event.type); // click
/*事件所在的标签*/
console.log(event.target); //
/*事件传递的数据*/
console.log(event.data['name']); // 撩课
});运行效果：点击按钮，Console 中打印如下：
绑定多个事件->同一回调函数
$(selector).on("click dbclick mouseout", data, function);
$('div').on('click mouseenter', {'name':'撩课'}, function (event) {
/*事件的类型*/
console.log(event.type);
/*事件所在的标签*/
console.log(event.target);
/*事件传递的数据*/
console.log(event.data['name']); // 撩课
});运行效果：鼠标移入 div ，或者点击 div 都将触发同一事件。
绑定多个事件->多个回调函数
$(selector).on({
event1:function,
event2:function,
...
})$('div').on({
'click':function () {
console.log('-----click事件被触发了-----');
/*事件的类型*/
console.log(event.type);
/*事件所在的标签*/
console.log(event.target);
},
'mouseenter':function () {
console.log('-----mouseenter事件被触发了-----')
/*事件的类型*/
console.log(event.type);
/*事件所在的标签*/
console.log(event.target);
};
});运行效果：鼠标移入 div 会触发 mouseenter 的事件；鼠标点击 div 会触发 click 的事件。
一次事件 one(type,fun)
只会触发一次的事情。
$('button').one('click', function () {
alert('这个事件只会触发一次。')
})运行效果：如果不刷新页面，无论点击多少下按钮，只会触发一次这个事件。
result 属性示例
注：对一个元素设置多个事件处理函数，不会被覆盖，而是会依次执行。
$('button').click(function (event) {
return "button_function";
});
$('button').click(function (event) {
alert(event.result); // result获取上一个相同事件的返回值。
});运行效果：点击按钮，跳出弹框。
如果将两个事件处理函数位置调换：
$('button').click(function (event) {
alert(event.result); // 上一个相同事件未定义。所以将弹出 undefined
});
$('button').click(function (event) {
return "button_function";
});运行效果：
off() 解绑事件
事件委托
如下示例界面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 100px;
height: 200px;
background: red;
}
span{
width: 50px;
height: 50px;
background-color: blue;
display: inline-block;/*既可以设置宽高，又不独占一行*/
}
</style>
</head>
<body>
<div id="box">
<span class="king">小王</span>
<span class="black">小黑</span>
<p>哈哈哈</p>
</div>
</body>
</html>界面效果：
$(function () {
/*$('span').click(function () { // 给 span 添加事件
alert('点击了span');
})*/
/* $('div').on('click', 'p', function (event){
alert(event.target.className)
})*/
$('div').on('click', 'span', function (event) { // 事件委托，给父控件添加事件，判断指定的子标签即可
alert(event.target.className)
})
});运行效果：点击哪个 span 则执行对应的事件。
自动触发事件
trigger 触发事件默认行为，造成冒泡
$(':submit').trigger('click');
注意：
- 会触发事件的默认行为.
- 触发事件时, 会造成事件冒泡
triggerHandler 触发事件默认行为，不造成冒泡
$(':submit').triggerHandler('click');
注意：
- 不会触发事件的默认行为.
- 触发事件时, 不会造成事件冒泡
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://www.itlike.com">
<input type="submit">
</form>
<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
var $submit = $(':submit'); // type="submit"
$submit.on('click', function () {
alert('提交')
})
setTimeout(function () { // 设置延时 1 秒后触发
// $submit.trigger('click'); // 默认的会触发，会造成事件的冒泡现象
$submit.triggerHandler('click'); // 默认的会触发，不会造成事件的冒泡现象
},1000)
});
</script>
</body>
</html>运行效果：打开页面一秒后，跳出弹框“提交”，但是没有跳转页面。说明没有造成冒泡现象。
自定义事件
事件的名称可以我们自己指定，但必须得要自己手动去触发，使用trigger()的方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
var $box = $('.box');
// 1.自定义事件
$box.on('abc', function () { // 自定义"abc"事件
alert('abc')
});
$box.trigger('abc'); // 必须使用 trigger 手动触发
});
</script>
</body>
</html>运行效果：进入页面，直接跳出一个弹窗。
命名空间
在事件名称的后面可以加上"点"的符号，我们称为事件的命名空间。相当于给事件加了一个标识 作用；类似于css中的类。命名空间一般用于解绑事件，可以明确的指明解绑哪个事件。
// 2、命名空间 方便事件的解绑
$box.on('click.one',function (event) {
console.log(event.type);
console.log(1);
});
$box.on('click.two',function () {
console.log(event.type);
console.log(2);
});
$box.off('.one') // 命名空间一般用于解绑事件，可以明确的指明解绑哪个事件
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
