jQ事件
一 概念
1、on绑定
```js
$('.box').on('click', {num: 10}, function(ev) {
console.log(ev.data.num)
})
// 数据由ev.data存储
```
2、非on事件
```js
$('.box').click({num: 10}, function(ev) {
console.log(ev.data.num)
})
// 数据由ev.data存储
```
3、解绑
```
$('.box').off()二 代码示范
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>事件</title>
<style type="text/css">
.div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="div"></div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
var a = 10;
var $div = $('.div');
// on事件: on(事件名, {key:value}参数, 回调函数)
$div.on('click', {num: a}, function (ev) {
// jq事件对象
console.log(ev);
// 参数的获取
console.log(ev.data.num)
// 鼠标点击点
console.log(ev.clientX, ev.clientY);
})
// 再绑定一个点击事件
$div.click({num: a}, function (ev) {
console.log(ev.data.num * 2)
})
// 非on事件: 事件名({key:value}参数, 回调函数)
$(document).keydown(function (ev) {
// jq事件对象
console.log(ev);
// 点击键
console.log(ev.keyCode);
})
// 事件的解绑
$div.off() // 解绑所有
})
</script>
<script type="text/javascript">
$(function () {
// 冒泡
$('div').on('click', function (ev) {
console.log(ev);
// 组织冒泡
ev.stopPropagation();
console.log('div click');
})
$('body').on('click', function () {
console.log('body click');
})
$('div').on('contextmenu', function (ev) {
// 取消默认事件
ev.preventDefault();
// return false;
})
})
</script>
</html>
浙公网安备 33010602011771号