jQuery基础教程之事件监听操作
jQuery基础教程之事件监听操作
老雷PHP全栈开发
发布于 2020-07-02 15:15:16
发布于 2020-07-02 15:15:16
jQuery基础教程之事件监听操作
一、事件监听方法
1.执行事件
$("p").click();2.监听事件
$("p").click(function(){
// 动作触发后执行的代码!!
});3.on 绑定事件
$("p").on("click", function(){
alert( "haha" );
});
//可以对后追加的数据生效
$(document).on("click","p",function(){
alert("haha")
})4.off解绑事件
$("p").off()二、事件类型
鼠标事件
click 点击
dblclick 双击
mouseenter 鼠标进入
mouseleave 鼠标离开
touch 触摸事件
touchstart 触摸开始
touchmove 移动
touchend 触摸结束
键盘事件
keydown 键盘按下
keyup 键盘放开
表单事件
submit 表单提交
change 内容改变
focusin 当元素获得焦点时
focusout 当元素失去焦点时
文档/窗口事件
load 窗口载入
resize 窗口更改大小
scroll 滚动
三、回调函数
$("p").on("click", function(e){
$(this).html("我被点击");
console.log(e)
var that=$(this);
setTimeout(function(){
that.html('我回复了');
},300)
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>事件</title>
<style>
.list{
height: 1000px;
}
.item{
width:100px;
height: 100px;
background-color: #0F8E82;
margin: 10px;
}
</style>
</head>
<body>
<div class="list" id="list">
<div class="item">item</div>
<form id="form">
<textarea id="text"></textarea>
<button type="submit">保存</button>
</form>
<a href="../01_base/">离开</a>
</div>
<script src="../jquery.min.js"></script>
<script>
$(".list").on("click",".item",function(e){
$(this).html("我被点击");
var that=$(this);
$.get("index.html",function(){
that.html('我回复了');
})
console.log(e.clientX)
/**
* clientX: 84
clientY: 76
offsetX: 33
offsetY: 60
*/
})
/*
$(".list").off("click",".item")
$("#list").append('<div class="item">item2</div><div class="item">item3</div>')
$(".item").click(function(){
alert($(this).html())
})
$(".item").on("click",function(){
alert($(this).html())
})
//解绑
$(".item").off("click")
*/
/*
$(document).on("click dblclick dblclick mouseenter mouseleave hover",".item",function(event){
console.log(event.type)
//console.log(event)
})
$(document).on("touchstart touchmove touchend",".item",function(event){
console.log(event.type)
})
$(document).on("hover","a",function(event){
console.log(event.type)
})
$(document).on("keypress keydown keyup change","#text",function(event){
console.log(event.type)
})
$(document).on("focusin focusout","#text",function(event){
console.log(event.type)
})
$(document).on("submit",function(event){
console.log(event.type)
return false;
})
$(window).on("load resize scroll",function(event){
console.log(event.type)
return false;
})
*/
</script>
</body>
</html>
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-12-04，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读