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