zepto中的事件
程序员文章站
2022-06-25 08:29:55
ready与onload的区别： 综 ......
ready与onload的区别：
<script>
//dom加载完毕（不包括图片等）
$(document).ready(function(){
})
//全部文件加载完毕（html文件+css文件+js文件+图片等）
window.onload=function(){
}
</script>
综上所述，其实ready比onload要快，一般建议使用ready
事件开头的几种简写方式：
//写法一
$(document).ready(function(){
})
//写法二
$(function(){
})
//写法三
$().ready(function(){
})
事件绑定：
bind on 直接写事件（简写）
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>demo</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style>
.pink{color:pink;}
.big{font-size:30px;}
.bgblue{background-color:lightblue;}
</style>
</head>
<body>
<div class="div">div</div>
<script src="zepto.min.js"></script>
<script>
$(document).ready(function(){
$(".div").bind("click",function(e){
console.log("bind绑定事件");
})
$(".div").on("click",function(e){
console.log("on绑定事件");
})
$(".div").click(function(e){
console.log("简写，直接绑定");
})
});
</script>
</body>
</html>
事件冒泡与事件捕获：
zepto不支持事件捕获
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>demo</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style>
.pink{color:pink;}
.big{font-size:30px;}
.bgblue{background-color:lightblue;}
</style>
</head>
<body>
<div id="grandparent">
<div id="parent">
<div id="child">child</div>
</div>
</div>
<script src="zepto.min.js"></script>
<script>
$(document).ready(function(){
/*
事件冒泡：
*
...
grandparent
parent
child 点击之后，向上冒泡，只要绑定过事件的都会被触发
*/
$("#grandparent").on("click",function(e){
console.log("grandparent被点击");
})
$("#parent").on("click",function(e){
console.log("parent被点击");
})
$("#child").on("click",function(e){
console.log("child被点击");
})
});
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>demo</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style>
.pink{color:pink;}
.big{font-size:30px;}
.bgblue{background-color:lightblue;}
</style>
</head>
<body>
<div id="grandparent">
<div id="parent">
<div id="child">child</div>
</div>
</div>
<script src="zepto.min.js"></script>
<script>
$(document).ready(function(){
/*
事件捕获：
*
...
grandparent
parent
child 点击之后，从上向下冒泡，只要绑定过事件的都会被触发
*/
//zepto不支持，用原生js演示
//默认是false,事件冒泡；使用事件捕获设置true
var grandparent=document.getelementbyid("grandparent"),
parent=document.getelementbyid("grandparent"),
grandparent=document.getelementbyid("grandparent");
grandparent.addeventlistener("click",function(){
console.log("grandparent被点击");
},true);
parent.addeventlistener("click",function(){
console.log("parent被点击");
},true);
child.addeventlistener("click",function(){
console.log("child被点击");
},true);
});
</script>
</body>
</html>
事件委托或代理：
绑定事件非常消耗性能
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
bind click是简写，绑定了6次，耗性能
//bind click是简写
//绑定了6次，耗性能
$("li").bind("click",function(){
console.log("bind");
});
$("li").click(function(){
console.log("click");
});
one 只绑定一次
//one 只绑定一次
$("li").one("click",function(){
console.log("one");
})
针对单个li来说，只有第一次点击有效，之后点击无效
live 绑定在document上
利用事件冒泡的方式，只绑定了一次，就叫做事件委托或者事件代理
缺点是需要一直冒泡到*，如果层级多也很耗性能，因此被弃用
//live 绑定在document上
//利用事件冒泡的方式，只绑定了一次，就叫做事件委托或者事件代理
//缺点是一直冒泡到*，如果层级多也不好，因此被弃用
$("li").live("click",function(){
console.log("live");
})
delegate 绑定在父元素上
利用事件冒泡的方式，只绑定了一次，就叫做事件委托或者事件代理
多了一个参数，指定触发事件的子元素
//delegate 绑定在父元素上
//利用事件冒泡的方式，只绑定了一次，就叫做事件委托或者事件代理
//多了一个参数，指定触发事件的子元素
$("ul").delegate("li","click",function(){
console.log("delegate");
})
on 比较万能，推荐使用
利用事件冒泡的方式，只绑定了一次，就叫做事件委托或者事件代理
与delegate类似，指定一个参数，不过参数顺序不一样
//on 比较万能
//利用事件冒泡的方式，只绑定了一次，就叫做事件委托或者事件代理
//与delegate类似，指定一个参数，不过参数顺序不一样
$("ul").on("click","li",function(){
console.log("on");
})
unbind off 解除绑定
//事件委托或代理，绑定事件
$("ul").on("click","li",function(){
console.log("on");
})
//解除事件绑定
$("ul").unbind();
//事件委托或代理，绑定事件
$("ul").on("click","li",function(){
console.log("on");
})
//解除事件绑定
$("ul").off();
自定义事件
//绑定自定义事件
$("div").on("cyy",function(){
console.log("cyy自定义事件");
})
//触发自定义事件
$("div").trigger("cyy");
命名空间
$("div").bind("click",function(){
console.log("一般click事件");
});
$("div").bind("click.cyy",function(){
console.log("带命名空间的click事件");
});
//解绑所有click事件
$("div").unbind("click");
//解绑指定命名空间的click事件
$("div").unbind(".cyy");
绑定多个事件：
多个事件执行相同操作，用空格分隔
多个事件执行不同操作，可以使用链式操作
//多个事件执行相同操作
$("div").bind("click touchstart",function(){
console.log("执行click和touchstart");
});
//多个事件执行不同操作
$("div").bind("click",function(){
console.log("执行click");
}).bind("touchstart",function(){
console.log("执行touchstart");
});
上一篇： Linux 简单命令整理