事件对象event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件对象event</title>
</head>
<body>
<button>按钮</button>
<input type="text" name="user" value="123">
<p class="content"></p>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
// 实时监听input输入框 有输入触发fun 用于一些实时校验用户的输入数据,实时反馈输入校验结果
// e 事件本身 e.target就是事件对应的js对象 类似于 this
$('input').get(0).oninput = function (e) {
console.log(e);
console.log(e.target);
console.log(e.target.value);
$('.content').text(e.target.value);
};
// e.target === this e.currentTarget当前事件的目标对象 e.target事件的触发对象
$('button').click(function (e) {
console.log(e.currentTarget);
console.log(e.target);
console.log(e.target.innerText);
console.log($(e.target).text());
console.log($(this).text());
console.log(e == this); // false e是jquery对象 this是js对象
console.log(e.target == this); // true
console.log(e.target === this); // true
e.stopPropagation(); // 阻止冒泡
});
$('body').click(function(e){
console.log(e.currentTarget); // 事件的目标js对象 点的哪个元素就是哪个 如button input
console.log(e.target); // 事件触发js对象 即 body
console.log(this); // 事件触发js对象 即 body
console.log(this===e.currentTarget);
console.log(this===e.target);
e.stopPropagation(); // 阻止冒泡
});
$('html').click(function(e){
// console.log(e.currentTarget);
console.log(e.target);
console.log(this===e.currentTarget);
console.log(this===e.target);
});
})
</script>
</body>
</html>
jquery单双击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单双击事件jquery</title>
</head>
<body>
<button>按钮</button>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
timer = null;
$('button').click(function (e) {
// 这个清除上一次单击的事件,因为每次单击创建的timer不一样;
// 下面双击事件清除的timer是最后一次单击创建的timer,第一次创建的timer那里并不能清除。
clearTimeout(timer);
timer = setTimeout(function (e) {
console.log('单击咯');
},300);
console.log('click',timer);
e.stopPropagation();
});
$('button').dblclick(function (e) {
console.log('dblclick',timer);
clearTimeout(timer);
console.log('双击咯');
e.stopPropagation();
});
})
</script>
</body>
</html>
jquery鼠标移入事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery鼠标移入</title>
<style type="text/css">
.father{
width: 200px;
height: 200px;
background-color:red;
}
.child{
width: 50px;
height: 50px;
background-color: green;
}
</style>
</head>
<body>
<div class="father" id="f1">
<p class="child" id="c1">steven</p>
</div>
<div class="father" id="f2">
<p class="child" id="c2">steven</p>
</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
// mouseover mouseout 鼠标移入移出 这里会有穿透现象,同样作用在其子元素上面
// 如下 当鼠标从子元素移动到父元素内的时候也会触发事件
$('#f1').mouseover(function (e) {
console.log('警告,不明物体侵入!!!');
});
$('#f1').mouseout(function (e) {
console.log('警告解除,不明物体滚了!!!');
});
// mouseenter mouseleave 鼠标移入移出 这里不会有穿透现象,不作用在其子元素上面
// 如下 当鼠标从子元素移动到父元素内的时候不会触发事件
$('#f2').mouseenter(function (e) {
console.log('警告,不明物体侵入!!!');
});
$('#f2').mouseleave(function (e) {
console.log('警告解除,不明物体滚了!!!');
});
})
</script>
</body>
</html>