一、事件
1、a标签中点击事件
1、描述示例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>a标签点击事件</title>
</head>
<body>
<a href="images/1.jpg" title="图片1"></a>
<a href="images/2.jpg" title="图片2"></a>
<script>
window.onload = function () {
var aLists = document.getElementByTag("a");
for(var i=0; i<aLists.length; i++) {
aLists[i].onclick = function() {
console.log("点击了" + this.title); //注意这里用this
}
}
}
</script>
</body>
</html>
2、现象需求：
当点击了a标签之后，会跳转到相应的图片展示页面。
如果点击a标签之后，不想要跳转到链接的href的地址，而仅仅是想要只想一些其他的操作。
3、解决方案：
若不想跳转到指定的链接地址，则可以通过a标签的onclick事件的函数，返回一个false，即可。代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>a标签点击事件</title>
</head>
<body>
<a href="images/1.jpg" title="图片1"></a>
<a href="images/2.jpg" title="图片2"></a>
<script>
window.onload = function () {
var aLists = document.getElementByTag("a");
for(var i=0; i<aLists.length; i++) {
aLists[i].onclick = function() {
console.log("点击了" + this.title); //注意这里用this
return false;
}
}
}
</script>
</body>
</html>
4、注意：
这里需要注意的是，在遍历处理a（或其他）标签的点击（其他监听）事件的时候，要在其function中使用 this 来进行代替列表子元素去处理，因为这里涉及到同步和异步的问题，即当点击这个标签的时候，所对应的索引i 可能已经变化，并非当前的这个元素，因此可能会导致事件混乱。
2、高频率事件的节流：
在一些事件使用的时候，调用的频率是非常高的，比如：
window.onload window.onresize window.onscroll 等等
频繁的调用这些事件，会使得内存消耗过大，因此，需要在使用过程中避免调用过于频繁，这里就需要用到节流的技巧，如：
var timer = null;
var mouseDelay = 200; //一般鼠标的延迟时间
window.onscroll = function () {
clearTimeout(timer);
//节流
timer = window.setTimeout(function () {
//do something...
}, mouseDelay);
};
二、属性：
1、style.xxx和offsetxxx的区别及注意点：
以left为例
style.left只能获取行内的样式，而offsetLeft则可以获取到所有的
注意：在JavaScript中进行设置element.style.xxx的时候，是设置到其标签（行内）上的属性的，所以如果在做一些动画或者过渡效果的时候，通过修改已经设置了的行内style属性时，是需要在<style>中的动画（或过渡效果）的属性中添加!important 来提高此属性的级别，以达到相应的效果。
offset
各属性区别
2、兼容性属性：
1、opacity 在IE中的兼容性问题：
在IE的某些低版本中，不支持opacity属性，需要单独处理，解决方案如下：
div {
opacity: 0.4;
filter: alpha(opacity: 40);
}
三、动画：
1、缓动动画：
1、缓动公式：
var begin = 0, end = 500;
begin += (end-begin)*0.1;
2、缓动动画：
setInterval(function () {
begin += (end-begin)*0.1;
element.style.xxx = begin + "px"; //这里的xxx可以设置为element元素的某个属性，或者是其他的代码
}, 10);
四、函数：
1、监听页面加载完毕
1.1、window.onload方法：
onload方法会等DOM元素加载完毕，并且还会等到资源也加载完毕才会执行，在性能上会有些低
1.2、DOMContentLoaded事件：
只会等到DOM元素加载完毕就会执行回调，会比onload方法更快
document.addEventListener("DOMContentLoaded", function () {
//DOM元素加载完毕
});
注意：
addEventListener在IE8及以下并不支持，可以使用attachEvent方法进行替换，但是其中并没有DOMContentLoaded 这个事件，所以，需要使用其他的事件来替换，
document.readyState属性中有如下状态：
uninitialized ： 还未开始载入
loading ： 载入中
interactive ： 已加载，文档于用户可以开始交互
complete ： 载入完成
onreadystatechange 事件就是专门用于监听document.readyState 属性的改变的，即上面的状态有改变的时候，都会调用此事件。
document.attachEvent("onreadystatechange", function () {
//onreadystatechange,状态改变
if (document.readyState==="complete") {
//加载完毕
}
});
1、cloneNode方法注意点：
在原生js中，cloneNode 方法仅仅是浅复制，也就是说，只会复制元素的属性，并不会拷贝其方法。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clone方法</title>
<script>
window.onload = function () {
var ul = document.getElementById("ul");
var li = document.getElementById("li1");
li.onclick = function() {
alert(this.innerText);
};
//浅复制
document.getElementById("btn1").onclick = function() {
var nLi = li.cloneNode(true);
ul.append(nLi);
};
//深复制
document.getElementById("btn2").onclick = function() {
var nLi = li.cloneNode(true);
for (var name in li) {
if (name.indexOf("on")===0) {
nLi[name] = li[name];
}
}
ul.append(nLi);
};
};
</script>
</head>
<body>
<button id="btn1">浅复制</button>
<button id="btn2">深复制</button>
<ul id="ul">
<li id="li1">我是第一个li</li>
</ul>
</body>
</html>
被拷贝的元素
浅拷贝的元素
深拷贝的元素
网友评论