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>demotitle><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">divdiv><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>demotitle><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">childdiv>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>demotitle><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">childdiv>div>div><script src="zepto.min.js">script><script>$(document).ready(function(){/*事件捕获：
顶级
...
grandParent
parent
child 点击之后，从上向下冒泡，只要绑定过事件的都会被触发*///zepto不支持，用原生js演示//默认是false,事件冒泡；使用事件捕获设置truevar 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>1li><li>2li><li>3li><li>4li><li>5li><li>6li>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");
});
Copyright © 2004-2024 Ynicp.com 版权所有 法律顾问:建纬(昆明)律师事务所 昆明市网翼通科技有限公司 滇ICP备08002592号-4
