css hack方法和bind与on的区别

css hack方法：

CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

1、 属性前缀法(即类内部Hack)：例如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。

2、 选择器前缀法(即选择器Hack)：例如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。

3、IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： <!--[if IE]>IE浏览器显示的内容 <![endif]-->，针对IE6及以下版本： <!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。 具体不展开，可看资料搜索“史上最全的CSS hack方式一览”

bind()与on()的区别：

1：bind()：为每个匹配元素的特定事件绑定事件处理函数。
　　bind(type,[data],fn)
　　type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。
　　比如"click"或"submit"，还可以是自定义事件名。
　　data:作为event.data属性值传递给事件对象的额外数据对象
　　fn:绑定到每个匹配元素的事件上面的处理函数

　　2：on()在选择元素上绑定一个或多个事件的事件处理函数。
　　on(events,[selector],[data],fn)
　　events:一个或多个用空格分隔的事件类型和可选的命名空间，             如"click"或"keydown.myPlugin" 。
　　selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。
　　data:当一个事件被触发时要传递event.data给事件处理函数。
　　fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

      对比发现on 和bind的 差别不大， 但是on多一个[selector]  可以过滤指定元素

bind与on的区别就在于–事件冒泡
demo1:
## 点击相应的li弹出里面内容,这里把on换成bind是一样的没有区别.也就是说on不使用selector属性与bind并无区别   
<ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
</ul>
<script>
 $(function () {
  $('ul li').on('click',function(){
   alert($(this).text())
  }); 
 })
</script>
demo2:
<script>
 // 这种情况你会发现点击第四个不具备事件.也就是不具备动态绑定事件能力
 $(function () {
  $('ul li').bind('click',function(){
   alert($(this).text())
  }); 
  var ok = $('<li>4</li>');
  $('ul').last().append(ok);
 
 })
</script>

demo3：
<script>
 // 换成on的写法,添加selector属性,就是通过事件冒泡,进行了事件委托,把li的事件委托给其父元素,点击后面加入的li就默认绑定了事件
 $(function () {
  $('ul').on('click','li',function(){
   alert($(this).text())
  }); 
  var ok = $('<li>4</li>');
  $('ul').last().append(ok);
 })
</script>

事件委托的好处
 
 
万一子元素非常多，给每个子元素都添加一个事件，会影响到性能；
为动态添加的元素也能绑上指定事件；
原文链接：http://www.tuicool.com/articles/r6zAJnZ