1.伪数组
数组 Array
数组2 Arguments
数组3 NodeList
数组4 HTMLCollection
以上每种数组属于不同的类别,所以拥有不同的属性和方法
如何把伪数组转真数组
<p></p>
<p></p>
<p></p>
<script>
var arr = new Array() ;
consloe.log(arr) ;
function fn() {
console.log(arguments) ;
}
fn()
var oPs = document.querySeletorAll('p') ;
console.log(oPs);
var oPs2 = document.getElementsByTagName('p');
console.log(oPs2);
var arr = [] ;
for(var i = 0 ; i < oPs.length ; i++) {
arr.push(oPs[i]);
}
console.log(arr) ;
arr.push('a') ;
console.log(arr);
</script>
2.事件
事情:事情发生了并得到了处理
事件:事件源.事件类型=事件处理函数
事件处理函数是异步的
这个匿名函数是在事件发生以后,由系统调用
一般事件处理函数没有特定的返回值,但是也可以使用return
document.onclick = function () {
console.log(666);
return
console.log(777);
}
3.事件处理函数的参数-事件对象
事件处理函数的第一个参数表示的是事件对象
事件对象是用户记录事情发生的整个过程
document.onclick = function ( a , b) {
console.log(a);
//事件处理函数只有一个参数
console.log(b); //undefined
}
document.onclick = function (e) {
//大多数浏览器支持事件处理函数的第一个参数作事件对象
// console.log(e);
//低版本浏览器只能使用event来记录事件对象
// console.log(event) ;
e = e || event ;
// target目标 ------- 具体是由哪个标签触发的
console.log(e.target) ;
//this 指向事件源
console.log(this) ;
console.log(e.cilentX) ;
}
4.绑定事件的方法
绑定事件的方式
行内js οnclick="fn()"
事件绑定 oDiv.onclick = function() {}
事件监听 oDiv.addEventListener(类型,事件处理函数) ------不会覆盖
<div class="a" onclick="fn(6)">aaaaaaaa</div>
<script>
var oDiv = document.querySelector('.a') ;
oDiv.onclick = function () {
console.log(1) ;
}
//后面的时间覆盖前面的
oDiv.onclick = funcction () {
console.log(2);
}
function fn(n) {
console.log(n);
}
//不会覆盖
oDiv.addEventListener('click' , function () {
console.log(4);
})
oDiv.addEventListener('click' , function () {
console.log(5);
})
//在IE中
oDiv.attachEvent('onclick' , function () {
console.log(6);
})
fn(oDiv , 'click' , function) {
console.log(4);
}
function fn(ele , type , cb) {
//先判断window对象下是否存在这个方法
if(window.addEventListener) {
ele.addEventListener(type , cb);
}else{
ele.attachEvent('on' + type , cb);
}
}