摘要：主要分成事件，浏览器调试小技巧，其他三部分。一事件先来看一个有趣的问题。介绍一组很有用的事件。我介绍这个的目的并不是简单的介绍这个事件，而是这里有个小坑。只能通过来进行绑定。二浏览器调试小技巧用来代替在文件中打断点的操作。
这篇文章主要记录一些我在开发工作中踩过的一些坑或者新学到的一些知识。主要分成‘事件’，‘浏览器调试小技巧’，‘其他‘三部分。
==============================一.事件===========================
1.先来看一个有趣的问题。
=======这是html=======
========这是js部分=======
function onclick1() {
console.log("onclick1...");
}
function onclick() {
console.log("onclick...");
}
function click() {
console.log("click...");
}
分别点击这三个按钮，猜猜会是什么结果。
答案揭晓：点击按钮1，会正常输出onclick1... 点击按钮2，会报错Uncaught RangeError: Maximum call stack size exceeded。栈溢出了。 点击按钮3，不会报错，也没有任何反应。
所以，如果要给DOM绑定onclick事件，函数名千万别叫click和onclick。当然，如果你用addEventListener来绑定的话就不会存在这个问题了。
2.介绍一组很有用的事件。compositionstart, compositionupdate, compositionend.用来监听中文输入法。顾名思义：一个用来监听开始，一个用来监听更新，一个用来监听结束。如果输入的都是英文不会触发此事件，输入拼音时会触发。
我介绍这个的目的并不是简单的介绍这个事件，而是这里有个小坑。我们都知道，事件监听常用的两种方式，一种是直接给DOM加属性，比如onclick,onblur.另一种是用addEventListener来绑定事件。但是这组事件就很特殊。他们不能使用oncompositionstart，oncompositionupdate,oncompositionend来直接写在DOM中。实测不会生效。只能通过addEventListener来进行绑定。
===========================二.浏览器调试小技巧========================
3.用debugger来代替在文件中打断点的操作。当我们想在某处打断点的时候，往往会去浏览器中先找到这个文件，然后再找到具体哪一行。其实用debugger可以完全替代这个麻烦的操作。只需要在你想让代码停下的地方写一句debugger即可。
4.打条件断点，比如我们想在一个for循环里打断点，我只想看第五次循环时各变量的值，如果我只是在那打个断点的话，每次循环都会停下。那我怎么能解决这个麻烦的问题呢。有两个方法。一：用debugger，只需要在代码中写if (i ==5 ) debugger; 二： 在浏览器中打条件断点。步骤如下图所示：输入完条件之后按回车键。最后会出现一个黄色断点如下图所示。
5.用$_来表示上一次的控制台结果。我们经常在控制台写一些简单的测试代码。当需要用到上一次的运行结果时，往往需要再将之前的表达式复制一遍。$_可以完美解决这个问题。
=============================三.其他=====================================
6.0/0结果是NaN。以前学C++时，碰到number/0这样分母为0的情况，都会加try catch来处理。直到有一天我发现，在js中分母为0不会抛出异常，而会得到NaN的结果。
7.行内元素设置rotate无效，需要设置成display:inline-block.有一次我试图给span标签设置旋转角度，发现怎么都不成功。后来查阅资料发现，inline元素设置rotate无效。
8.用data- 给DOM扩展属性。有时候我们需要在节点上存储信息，在js中获取，（我以前干过把信息存为id或title）但是这样违反了id和title本来的作用。H5提供了新的方法，data-XXX。可以供我们自定义，在存储时这样：
在js中获取时用div.getAttribute("data-name"),或者用jQuery:$(div).data("name")9.最快捷的数组求最大值方法：
let arr = [1,2,3,5,5,6,3,4]; let max = Math.max(...arr);
10.如何实现点击任意地方选中某个区域中的文本。通常我们要选中网页中的一段文本，需要双击才可以选中。但有时为了交互体验更好，要做成点击一下即可选中某块区域中的文本。再点击一下即可对所选区域进行编辑。主要用到window.getSelection方法和range的一些方法。
这是一段文字
PS:觉得还可以？给点个赞吧！
作者：易企秀——Hison
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/106515.html
摘要：主要分成事件，浏览器调试小技巧，其他三部分。一事件先来看一个有趣的问题。介绍一组很有用的事件。我介绍这个的目的并不是简单的介绍这个事件，而是这里有个小坑。只能通过来进行绑定。二浏览器调试小技巧用来代替在文件中打断点的操作。 这篇文章主要记录一些我在开发工作中踩过的一些坑或者新学到的一些知识。主要分成‘事件’，‘浏览器调试小技巧’，‘其他‘三部分。====================...
摘要：欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动 欢迎来我的个人站点 性能优化 其他 优化浏览器关键渲染路径 - 开启性能优化之旅 高性能滚动 scroll 及页面渲染优化 理论 | HTML写法...
摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...
阅读 3948·2021-09-24 10:24
阅读 1384·2021-09-22 16:01
阅读 2713·2021-09-06 15:02
阅读 1013·2019-08-30 13:01
阅读 1002·2019-08-30 10:52
阅读 631·2019-08-29 16:36
阅读 2231·2019-08-29 12:51
阅读 2332·2019-08-28 18:29
