jQuery事件
jQuery事件注册
单个事件注册element.事件(function(){.....})
事件绑定 on () 方法
在匹配元素上绑定一个或多个事件的事件处理函数
语法：element.on(events,[selector],fn)
events:一个或多个用空格分割的事件类型，比如click 或 keydown
[selector]:元素的子元素选择器
fn:回调函数，即绑定在元素身上的侦听函数
（1）on ( ) 实现多个事件注册：
// 1. on ( ) 实现多个事件注册：
$("div").on({
mouseenter: function() {
$(this).stop().css("background", "green")
},
click: function() {
$(this).stop().css("background", "yellow")
},
mouseleave: function() {
$(this).stop().css("background", "red")
}
})
$("div").on("mouseover mouseleave", function() {
$(this).toggleClass("current")
})
（2) on( ) 实现事件委托（委派）
//2.on( ) 实现事件委托（委派）
$("ul").on("click", "li", function() {
$(this).css("color", "red");
//click 是绑定在 ul 身上的，但触发的对象是 ul 里面的 li
})
（3）on ( ) 可以给未来动态创建的元素绑定事件
//3.on ( ) 可以给未来动态创建的元素绑定事件
$("ol").on("click", 'li', function() {
$(this).css("color", "red");
//这个li是后来创建的 用普通的注册事件不能实现
)
var li = $("<li>新添加的</li>");
$("ol").append(li);
案例：微博发布效果
<style>
.box {
position: relative;
width: 700px;
height: 300px;
margin: 100px auto;
border: 1px solid #000;
}
p {
position: absolute;
top: 175px;
left: 10px;
}
textarea {
position: absolute;
top: 60px;
left: 85px;
width: 500px;
}
button {
position: absolute;
top: 190px;
left: 600px;
}
.show {
position: absolute;
top: 200px;
left: 70px;
}
.show ul li {
border-bottom: 1px dashed rgb(121, 112, 112);
display: none;
width: 480px;
}
.show ul li a {
float: right;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div class="box">
<p>微博发布</p>
<textarea name="" id="" cols="30" rows="10" class="txt"></textarea>
<button class="btn">发布</button>
<div class="show">
<ul>
</ul>
</div>
</div>
</body>
<script>
$(function() {
//1.点击发布按钮，动态创建一个li 放入文本框的内容和删除按钮，并添加到ul中
$(".btn").on("click", function() {
var li = $("<li></li>");
li.html($(".txt").val() + "<a href='javascript:;'>删除</a>")
$('ul').prepend(li);
li.slideDown(); //让li滑动处理
$(".txt").val(""); //发布后清空文本框的内容
})
//2.点击删除按钮，就删除当前的li
$("ul").on("click", "a", function() {
//on 可以给动态创建的元素绑定事件
$(this).parent().slideUp(function() {
//上拉完毕后删除
$(this).remove();
});
})
})
</script>
<style>
.box {
position: relative;
width: 700px;
height: 300px;
margin: 100px auto;
border: 1px solid #000;
}
p {
position: absolute;
top: 175px;
left: 10px;
}
textarea {
position: absolute;
top: 60px;
left: 85px;
width: 500px;
}
button {
position: absolute;
top: 190px;
left: 600px;
}
.show {
position: absolute;
top: 200px;
left: 70px;
}
.show ul li {
border-bottom: 1px dashed rgb(121, 112, 112);
display: none;
width: 480px;
}
.show ul li a {
float: right;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div class="box">
<p>微博发布</p>
<textarea name="" id="" cols="30" rows="10" class="txt"></textarea>
<button class="btn">发布</button>
<div class="show">
<ul>
</ul>
</div>
</div>
</body>
<script>
$(function() {
//1.点击发布按钮，动态创建一个li 放入文本框的内容和删除按钮，并添加到ul中
$(".btn").on("click", function() {
var li = $("<li></li>");
li.html($(".txt").val() + "<a href='javascript:;'>删除</a>")
$('ul').prepend(li);
li.slideDown(); //让li滑动处理
$(".txt").val(""); //发布后清空文本框的内容
})
//2.点击删除按钮，就删除当前的li
$("ul").on("click", "a", function() {
//on 可以给动态创建的元素绑定事件
$(this).parent().slideUp(function() {
//上拉完毕后删除
$(this).remove();
});
})
})
</script>
事件解绑 off()方法
如果括号内为空，对应元素上面的所有事件都被解除
//事件解绑 off()方法
$("div").off();//如果括号内为空，div上面的所有事件都被解除
$("div").off("click");//解除div的点击事件
$("ol").off("click", 'li');//解除事件委托
如果有的事件只想触发一次，可以使用one()来绑定事件
//如果有的事件只想触发一次，可以使用one()来绑定事件
$("ul").one("click", 'li', function() {
$(this).css("color", "red");
})
自动触发事件 triggle()
1.element.事件()
2.element.trigger(“事件”)
3.element.triggerHandler事件() 最大的区别就是不会触发元素的默认行为
//自动触发事件 trigger()
$("div").on("click", function() {
alert(11);
})
//自动触发事件
//1.element.事件()
$("div").click();
//2.element.trigger("事件")
$("div").trigger("click");
//3.element.triggerHandler事件() 最大的区别就是不会触发元素的默认行为
$("div").triggerHandler("click");
$("input").on("focus",function(){
$(this).val("你好吗")
})
$("input").triggerHandler("foucus")
//输入框有一个默认行为是光标闪烁，利用triggerHandler就不会出现光标闪烁现象
jQuery事件对象
事件被触发，就会有事件对象的产生
//jQuery事件对象
$(document).on("click", function(e) {
console.log("点击了document");
})
$("div").on("click", function(e) {
console.log("点击了div");
e.stopPropagation();//协商这个，就可以阻止其冒泡行为
})
//点击后由于事件冒泡会先后出现 点击了div 点击了document
329
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
