学习碎片 2015-3月31日

文件下载

H5中，可以给a增加了一个download的属性，就可以实现点击链接，浏览器对文件源进行下载。而且这个还支持 blob: URLs 和 data: URLs。如果HTTP的Content-Disposition存在值且和a的文件名不一样，那么HTTP头优先级比a里的高。

html<a href="public/pdfs/demo.pdf" download="yourname.pdf">
    下载文件
</a>

可惜，浏览器支持度不够：
chrome 14 以上支持
firefox 20.0 (20.0)
IE Not supported
Opera 15
Safari Not supported
今日复习:

js event

dom event对象有currentTarget、target这两个属性。其中currentTarget指示的是处理当前事件所绑定的元素;target表示事件真正的目标，即到底是在哪个元素上触发事件。

比如，我们对整个文档body进行了事件click的绑定,当点了body里面的一个ID叫zBtn的按钮，那么

jsvar zBtn = document.getElementById('zBtn');

document.body.addEventListener('click', function(e) {
    console.log(this); //body元素
    console.log(e.target); //返回的zBtn元素
    console.log(e.currentTarget); //返回的是body元素，因为事件是注册在body上的。
});

在IE中，event对象和DOM中的event不同，跟DOM的event相同的一个特点是，不同的事件类型的事件对象里面的属性是有所不同的。IE中的所有的event对象都会有：
1. cancelBubble 值为boolean，若为true则取消事件冒泡。
2. returnValue 值为boolean，若为false则会取消事件默认行为.
3. srcElement 等同于DOM event中的target
4. type

HTML事件处理

html<a href="xxxxx" onClick = "youClickMe()" >点我!</a>

DOM0级的事件处理

以下事件绑定形式

jsaEl.onclick = function(){
}

DOM2级事件处理

jszBtn.addEventListener('click', function() {});

---

事件类型

下面介绍一些事件（不包括被废弃的事件）

UI事件

load

页面完全加载完后在window上触发。
图片加载完成时触发。 //Image只要把src属性设置了，就会开始加载
嵌入内容加载完成时在<object>触发。

在IE9+ 、firefox 、 opera 、 chrome 、 safari 3+ 上<script>也会触发load事件。与Image不同的是，script要有了src并被添加到文档里才开始加载。

unload

页面完全卸载后在window上触发。
所有框架都卸载后在框架集上触发。
嵌入内容卸载完全后在<object>上触发。

error

js错误时在window上触发。
无法加载img图片内容时在img上触发。
无法加载嵌入内容时在<object>时，在它上面触发。
框架无法加载时。

select

input和textarea中一个或多个字符触发时。

resize

窗口大小和框架大小变化时，在窗口或者框架上触发。

scroll

滚动带有滚动条元素的内容，在该元素上触发。p.s. body元素中包含加载页面的滚动条。