jQuery基础事件处理
程序员文章站
2022-08-17 14:27:49
待补充 ......
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>jquery事件处理</title>
<script src="jquery.min.js"></script>
<style>
div{
width: 100px;
height: 100px;
background: pink;
}
.current{
background: green;
}
</style>
</head>
<body>
<div>
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
$(function(){
// <!--1 事件处理:on 注册多个事件-->
// $('div').on({
// mouseenter: function(){
// $(this).css('background',"blue");
// },
// mouseleave: function(){
// $(this).css('background',"red");
// },
// click: function(){
// $(this).css('background',"purple");
// },
// });
// 2 如果事件处理的是相同操作，可以如下，表示鼠标进入和鼠标离开都会触发函数
$("div").on("mouseenter mouseleave",function(){
$(this).toggleclass("current");//切换增加或者删除类名的操作
});
// 3 事件委派：将原本绑定在子元素上的事件绑定到父元素上 $("ul").on('click','li',function(){}) 事件绑定在父元素ul上，但触发事件的对象是ul下的子元素li
// on 【可以给未来创建的元素绑定事件】 比如我先绑定ul元素，由li触发函数，后创建新的li元素，点击新的li元素仍然可以触发函数。即说明给未来创建的元素也绑定了事件
$("ul").on('click','li',function(){
alert('略略略略略');
});
$("ul").append($("<li>我是新创建的</li>"));
// 解绑事件：off() 接触on绑定事件
$('ul').off("click",'li');//解绑委托事件
$('div').off();//接触div的所有on绑定事件
// one() 只能触发一次的事件
$('div').one('click',function(){});
// 自动触发事件 trigger() 比如轮播图自动播放，音乐自动播放，视频自动播放等
//1 element.事件() 2 element.trigger("事件") 3 element.triggerhandeler("事件")-----不会触发元素的默认行为，比如光标闪烁行为不会被触发
// jquery事件对象：element.on(events,[selector],function(event) {})
// 阻止默认行为：event.preventdefault() 或者return false
// 阻止冒泡：event.stoppropagation()
})
</script>
</body>
</html>
待补充
上一篇： supervisor 工具使用