CSS 点击事件on 和onclick有什么区别？ // CSS关于文本的那几个实用的属性

2.CSS文本

• 2.1

white-space: pre-line; 强制文字进行换行，前提是在文本中要先在文字中加” \n “，这样css识别出来在此处进行强制换行。

word-wrap:normal | break-word, break-word可以将内容在边界内换行（不截断英文单词的换行）

word-break:keep-all | break-all当设置keep-all的时候，对于中文文本来说，只可以在半解空格或连字符或任何标点符号的地方换行，中文与中文之间不可以换行，一个长文本也不可以换行。

当设置break-all的时候，主要是在不同的浏览器上显示的效果都不同，因为每个浏览器的内核不同，这里在chrome、safari、Firefox中可以允许标点符号位于首行显示。

• 2.2
  溢出文本text-overflow
text-overflow: clip | ellipsis有两个属性，一个是默认的属性 clip , 另一个是ellipsis，

如果要实现溢出隐藏，必须满足3个条件：
- width ：明确给需要截取文本的容器设置宽度值。
- white-space:nowrap：给文本容器设置强制不换行，让元素文本一行内显示。
- over-flow: hidden：设置容器文本溢出时隐藏。
执行上面的属性条件之后，页面超出的文字部分将会以...的形式显示。

---

3.点击事件on和onclick 两者之间的区别（很重要）

• 第1种事件
  $('.XX').click('.xxx',function() { alert('xxx') });
  

  ---

• 第2种事件
  $('.XXX').on('click','.xxx', function() { alert('xxx') })

click是点击事件，但是在页面加载完之后，jquery事件新添加的元素，用click的话是无法获取元素的，这个时候要用on去获取元素事件，简单的说页面加载完成时候页面显示的元素可以用on，也可以用click，但是页面加载完成之后后期再追加的元素只能用on。

这两个事件的区别之处在于:
简单的说页面加载完成时候页面显示的元素（DOM节点已全部加载完）可以用 on ， 也可以用click ，

但是在页面加载完成之后后期再追加元素（DOM节点元素还没完全显示出来）只能用on

解释一下：

$('.AAA').on('click','.bbb', function() { alert('bbb') })
获取class 为bbb元素的上一级（或父级）元素，选择click的方式，执行回调函数function ()并运行弹出元素bbb,这里的on,元素bbb如果没全部加载出来。没有直接获取到class为bbb的元素，这个时候它就会去找上一级（或父级）的元素，然后在从上一级（或父级）往下接着再执行，就会找到class为bbb的元素了，就触发了点击事件，并执行事件里面的函数啦 ~