javascript事件（下）

javascript 事件（下）

一：页面事件(windows对象)

1:onload 页面加载事件 当页面加载完成后触发 语法如下

window.onload=function(){
                    var h2Ele = document.querySelector('#h2')
                    alert(h2Ele.innerHTML)
                }

2：onresize 浏览器窗口大小改变事触发 语法如下

// window窗口大小改变时触发
        window.onresize=function(){
            console.log('window窗口大小改变时触发')
        }

3：onscroll 浏览器窗口滚动时触发事件 语法如下

window.onscroll = function(){
            console.log('>>>>>>>>>>>>>>')
        }

二：内容转变事件

onchange 内容发生转变时候触发

windows.onchange = function(){
   //当内容发生改变时执行以下代码
          console.log('内容已经发生改变')
    }

三：FileReader 对象

1：概念：允许WEB应用程序异步读取存储在用户计算机上的内容
2：FileReader的使用方法：.readAsDataURL 读取内容的地址

var fileReader = new FileReader()  用构造函数的方法创建 FileReader对象
fileReader.readAsDataURL(文件)

四：event事件对象

1：定义：浏览器、文档（document）窗口中的发生的特定的交互瞬间；而JavaScript和HTML之间的交互行为就是通过事件来触发的。
注：事件其实一直都是存在的（不管它有没有 绑定 或 监听），它只是没有事件处理程序而已！！！
2：事件兼容写法

//兼容写法
var e = window.event||evnt

五：事件的.target属性和currentTarget属性

1：target:获取事件源目标对象
2：currentTarget:获取事件源目标对象**

六：阻止事件默认行为

阻止事件默认行为方法：event.reventDefault()

七：事件监听(事件的第三种调用方式)

语法：node.addEventListener

//获取元素节点
var btnEle = document.querySelector('#btn')；
btnEle.addEventListener('click',function(){},true)
//值一：click表示事件名称
//值二：function(){代码块}里面为执行代码
//值三：true表示事件捕获，默认为false事件冒泡

事件绑定与事件监听两种事件调用方式的区别
1：事件类型名的书写方式不一样；一个以on开头一个不书写on
2：可传递性：事件监听可以传递，有多个时不会覆盖而事件绑定有多个时会被覆盖

八：事件冒泡与捕获

1：事件冒泡：当某个元素事件被触发时，同样的事件会在该元素的祖辈元素依次由内到外触发
2：事件捕获：事件捕获的原理与事件冒泡原理相反
3：如何阻止事件冒泡：语法：event.stopPropagation