课堂小记---JavaScript（3）

 

操作DOM

var newDOM=DOM元素.cloneNode(参数);

克隆（复制）当前节点，参数默认为false只复制当前节点元素。参数为true时复制当前元素及其后代和所有属性。

day06

1、函数封装中的默认值问题

　　在函数定义后的调用过程中，如果函数需要有参数传入，而调用时传入参数不全，就会产生参数未定义的报错。

　　解决方法可以在函数中为传入参数定义默认值。

function(x,y){
  x = x || "abc" ;
  y = y || "123" ;                 
}

" || "，或运算符会判断是否有x，y参数，如果有则赋值为x，y，如果没有则会赋值为或运算符后面的内容。

day08

1、

　　可以给html标签添加自定义属性，并且可以用js获取到

方法：XXX.getAttribute("");XXX.setAttribute("")

注意：自定义属性不可以直接通过标签对象属性调用，标签对象直接调用属性只能是html标签自带属性。

2、

　　JS不能获取行内样式之外的样式。

需要 getComputedStyle("xxx").width

顾名思义计算后的样式，因为浏览器解析页面和样式是分开的。

IE8及之前的版本不支持上述方法，需要用

getCurrentStyle("xxx").width

day09

1、懒了，截图

 

 2、计算属性

　　可以通过计算属性获取可以直接使用的属性值（纯数字）：offsetWidth、offsetHeight、offsetTop、offsetLeft

　　每次获取时才计算出位置，不固定，无法修改只能实时获取属性值。

　　offsetParent可以直接获取有定位的父元素，即子元素定位的参照元素。

3、文档碎片

　　var frag = document.createDocumentFragment();

　　创建一个文档缓存，用于暂时存储新创建的元素。

4、鼠标事件

　　兼容写法：IE8及以下版本中鼠标事件event存在window下。

function(evt){
　　var e = evt || event ;　　
}

 

获取鼠标位置的几个属性：

offsetX,offsetY 相对于触发事件的元素中的位置

clientX,clientY 相对于当前可视区域中的位置

pageX，pageY 相对于整个页面中的位置

注意pageX，Y有兼容问题，IE8及之前版本和火狐老版本不支持

5、

找到元素之后可以通过     元素.aaa=xxx; 在内存中给元素添加值为xxx的aaa属性；

day10

1、阻止默认事件

　　通知浏览器不要执行与事件关联的默认动作。

　　e.preventDefault(); IE8以下不支持

　　兼容IE8及以下

　　e.returnValue=false;

　　兼容写法： e.preventDefault ? e.preventDefault() : e.returnValue=false ;

2、阻止右键菜单

　　点击右键触发的函数  document.oncontextmenu = function (){ }

　　添加上述阻止默认事件即可。

3、阻止事件传播

　　e.stopPropagation();阻止事件向上传播。

　　兼容IE写法：

　　e.stopPropagation ? e.stopPropagation() : e.cancleBubble = true ;

day11

1、事件的冒泡和事件的捕获

　　事件的捕获是指事件触发后从顶层元素向下传播，直到最底层。

　　捕获事件写法：addEventListener("事件",true)；（第二个参数决定该事件是冒泡还是捕获，默认值是false，冒泡）

　　捕获事件同样可以使用阻止事件传播的方法阻止。

　　当多层结构中捕获现象和冒泡现象同时存在时：先执行捕获事件，再执行冒泡事件。

　　当同一个元素上捕获现象和冒泡现象同时存在时，会按照代码顺序执行。

　　addEventlistener()方法不会互相覆盖，同一个元素可以绑定多个相同的事件不冲突。执行顺序按照代码顺序。

2、事件代理

　　简单理解：将本该自身触发的事件方法“代理（委托）”给父元素或更高层级元素，利用事件的冒泡来触发被“代理”的事件，达到预期的效果。

　　e.target()方法可以返回触发该事件的元素对象。

　　兼容写法： 

　　var target = e.target || e.srcElement ;

　　事件代理可应用于子元素数量很多的情况。例如下拉选择菜单中的单击事件。

3、onmouseenter 和 onmouseleave 事件

 onmouseenter 事件类似于 onmouseover 事件。 唯一的区别是 onmouseenter 事件不支持冒泡 

 

转载于:https://www.cnblogs.com/Mr-Car/p/10723888.html