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"); });
