jquery事件

最新推荐文章于 2024-03-20 08:53:45 发布

Submerge~

最新推荐文章于 2024-03-20 08:53:45 发布

阅读量159

点赞数

文章标签： jquery dom

本文链接：https://blog.youkuaiyun.com/MixedSignals/article/details/106715519

版权

页面对不同访问者的响应叫做事件，事件处理程序指的是当HTML中发生某些事件时所调用的方法

实例：
在元素上移动鼠标
选取单选按钮
点击元素

常见DOM事件：
在这里插入图片描述
▲click()，该方法是当按钮点击事件被触发时会调用一个函数，该函数在用户点击HTML元素时执行

<head>
<meta charset="utf-8"> 
<title></title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
//点击谁，谁就消失
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>

<p>如果你点我，我就会消失。</p>
<p>点我消失!</p>
<p>点我也消失!</p>
</body>

▲dblclick()，该方法是当双击元素时触发dblclick事件，与click()类似

▲mouseenter()，该方法是当鼠标指针划过元素时，会发生mouseenter事件

<head>
<meta charset="utf-8"> 
<title></title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
//鼠标放到p标签上时会看到弹窗
<script>
$(document).ready(function(){
  $("#p1").mouseenter(function(){
    alert('您的鼠标移到了 id="p1" 的元素上!');
  });
});
</script>
</head>
	
<body>
<p id="p1">鼠标指针进入此处，会看到弹窗。</p>
</body>
</html>

▲mouseleave()，该方法是当鼠标指针离开元素时，会发生mouseleave事件

▲mousedown()，该方法是当鼠标指针移动到元素上方，并按下鼠标按键（左键右键滚轮键均可）时，会发生mousedown事件

▲mouseup()，该方法是当在元素上松开鼠标按钮时，会发生mouseup事件

▲hover()，该方法用于模拟光标悬停事件

<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
//鼠标进入段落和离开段落时均会弹窗
<script>
$(document).ready(function(){
    $("#p1").hover(
		function(){
			alert("你进入了 p1!");
		},
		function(){
			alert("拜拜! 现在你离开了 p1!");
		}
    )
});
</script>
</head>

<body>
<p id="p1">这是一个段落。</p>
</body>

▲focus()，该方法是当元素获得焦点时会发生focus事件，当通过鼠标点击选中元素或通过tab键定位到元素时，该元素就会获得焦点
▲blur()，该方法是当元素失去焦点时，发生blur事件

<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
//鼠标点击或用tab键选中输入框，会改变颜色
<script>
$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background-color","#cccccc");
  });
  $("input").blur(function(){
    $(this).css("background-color","#ffffff");
  });
});
</script>
</head>

<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>

在这里插入图片描述