// 事件对象:当一个事件发生的时候,跟这个事件有关的一些详细信息,保存在一个对象中,这个对象就是事件对象(event对象 和 事件函数的第一个参数)
box.click(function (ev) {
// console.log(ev); // jQuery包装过的事件对象
// console.log(ev.originalEvent); // 原生的事件对象
console.log(ev.pageX, ev.pageY); // 鼠标到文档的距离
console.log(ev.clientX, ev.clientY); // 鼠标到可视区的距离
console.log(ev.which); // 相当于 keyCode,但比 keyCode 强大,还可以记录鼠标的键值,返回 1\2\3 即左\中\右;
console.log(ev.target); // 事件源
console.log(ev.delegateTarget); // 事件绑定的对象
console.log(ev.type); // 事件类型
console.log(ev.ctrlKey); // 返回 true 或 false,相应的 ctrl 键是否按下
console.log(ev.shiftKey); // 返回 true 或 false,相应的 shift 键是否按下
console.log(ev.altKey); // 返回 true 或 false,相应的 alt 键是否按下
ev.preventDefault(); // 阻止默认事件
ev.stopPropagation(); // 阻止冒泡的操作
return false; // 阻止默认事件 + 阻止冒泡的操作
});
2、事件的绑定
格式:jQuery对象.on(‘事件名’, 函数);
// jQuery对象.事件名(函数);
// jQuery对象.on('事件名', 函数);
var box = $('#box');
// 1、普通事件绑定
box.on('click', function () {
console.log('点我了');
console.log(this); // 触发这个事件的元素,且是原生的
})
// 2、一次绑定多个事件
box.on('mouseover mouseout click', function () {
console.log('触发了');
})
// 3、写成对象的形式
box.on({
mouseover: function () {
console.log('滑上了');
},
mouseout: function () {
console.log('滑离了');
},
click: function () {
console.log('点击了');
}
})
// 4、绑定自定义事件
box.on('abc', function () {
console.log('我是自定义事件');
});
setTimeout(function () {
box.trigger('abc'); // 自定义事件,需要trigger触发
}, 3000);
格式:jQuery对象.off(‘事件名’); // 没有参数,取消该元素上所绑定的全部事件
var box = $('#box');
box.on({
mouseover: function () {
console.log('滑上了');
},
mouseout: function () {
console.log('滑离了');
},
click: function () {
console.log('点击了');
}
})
// box.off(); // 没有参数,解绑全部的事件
// box.off('click'); // 解绑click
box.off('mouseover mouseout'); // 解绑多个
var box = $('#box');
// 同一个元素的同一个事件,触发不同的函数
box.on('click.a', function () {
console.log(1);
})
box.on('click.b', function () {
console.log(2);
})
// 需求:解绑打印2的
box.off('click.b');
jQuery对象父级.on(‘事件’, ‘子级’, 函数);
// jQuery对象父级.on('事件', '子级', 函数);
// 函数中的this即点击的哪个子级元素,且是原生的
$('ul').on('click', '.abc', function (ev) {
// console.log('点我了');
// console.log(this);
$(this).css('background', 'red');
console.log(ev.target); // 事件源
console.log(ev.delegateTarget); // 事件绑定的对象
})
6、一次性事件
jQuery元素.one(‘事件名’, 回调函数);
// jQuery对象.one('事件名', 函数)
var box = $('#box');
box.one('click', function () {
console.log('点我了');
})
jQuery元素.hover(滑上执行的函数, 滑离执行的函数);
// 采用的是mouseenter mouseleave,而不同于mouseover mouseout
var box = $('#box');
box.hover(function () {
console.log('滑上了');
}, function () {
console.log('滑离了');
});
<div id="box">
<span></span>
</div>
<script>
var box = document.getElementById('box');
var n = 0;
// 冒泡 onmouseover onmouseout
box.onmouseover = function () {
n++;
console.log(n);
}
// 不冒泡 onmouseenter onmouseleave
box.onmouseenter = function () {
n++;
console.log(n);
}
</script>