事件
网站: www.ajaxload.info 生成图片
www.yotuku.cn 生成在线cdn
onerror 一般用来兜底
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<script>
var image = document.createElement('img')
image.onerror = function(){
image.src = "http://img6.cache.netease.com/henan/2015/5/11/2015051117081131913_500.jpg"
}
document.body.appendChild(image)
</script>
</body>
</html>
//如果直接 var image = document.createElement('img')
//image.src = "http://img6.cache.netease.com/henan/2015/5/11/2015051117081131913_500.jpg"
//document.body.appendChild(image)
//这种图片是逐步加载的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<script>
var image = document.createElement('img')
image.onload = function(){
loadingImage.parentNode.removeChild(loadingImage)
document.body.appendChild(image)
}
image.onerror = function(){
//兜底图片
}
image.src = "http://img6.cache.netease.com/henan/2015/5/11/2015051117081131913_500.jpg"
var loadingImage = new Image()
loadingImage.src = 'http://p1.bqimg.com/567571/7289c13920048f23.gif'
document.body.appendChild(loadingImage)
</script>
</body>
</html>
//onload之前放一个默认图片
//onload之后放真正的图片
题目1： DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
DOM0级
<input type="button" onclick="clickme()">
input.onclick = function(){ ... }
//再一次给同一个节点元素绑定另外一个属性方法的时候,
//前一个属性的方法将会被覆盖
DOM2级
//增添了addEventListener,removeEventListener这两种方法
//所有的DOM节点都包含这两个方法,并且接受三个参数,
//事件类型、事件处理方法、布尔参数
题目2： attachEvent与addEventListener的区别？
1.参数个数不相同，addEventListener有三个参数，attachEvent只有两个，
attachEvent添加的时间处理程序只能发生在冒泡阶段，addEventListener
第三个参数可以决定添加的时间处理程序是在捕获阶段还是冒泡阶段处理
（我们一般为了浏览器兼容性都设置为冒泡阶段）
2.第一个参数意义不同，addEventListener第一个参数是事件类型（比如click，
load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，
onload）
3.事件处理程序的作用域不相同，addEventListener的作用域是元素本身，this
是指的触发元素，而attachEvent事件处理程序会在全局变量内运行，this是window
所以刚才例子才会返回undefined，而不是元素id
4.为一个事件添加多个事件处理程序时，执行顺序不同，addEventListener添加会
按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律（添加的方法
少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了），所以添加
多个的时候，不依赖执行顺序的还好，若是依赖于函数执行顺序，最好自己处理，不要
指望浏览器
题目3： 解释IE事件冒泡和DOM2事件传播机制？
IE事件的传播机制只有冒泡阶段，即从目标元素向父元素传播一直传播到window停止，当传播的过程中如果监听到了相同的事件类型酒会一并触发，即从最具体的元素开始触发，一直到最外层的元素.
DOM2事件传播机制包括事件的，从window开始 -> 捕获阶段 －> 到达目标元素 -> 冒泡阶段 -> 再到达最外层的 window，并且在addEventListener(type,function(){},true(为捕获阶段)/false(默认为冒泡阶段触发))。
题目4：如何阻止事件冒泡？ 如何阻止默认事件？
阻止事件冒泡:
stopPropagation(停止传播)
阻止默认事件:
preventDefault
题目5：有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
1.png
<!doctype html>
<html>
<head>
<meta name="description" content="">
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<ul class="ct">
<li>这里是</li>
<li>中国</li>
<li>广东省</li>
</ul>
<script>
var ct = document.querySelector('.ct');
ct.addEventListener('click', function(e){
console.log(e.target.innerText);
})
</script>
</body>
</html>
题目6： 补全代码，要求：
1.当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.
2.当点击每一个元素li时控制台展示该元素的文本内容。
2.png
http://js.jirengu.com/pajavonaju/1/edit
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>任务班</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
<script>
var ct = document.querySelector('.ct'),
iptAdd=document.querySelector('.ipt-add-content'),
btnAddStart=document.querySelector('#btn-add-start'),
btnAddEnd=document.querySelector('#btn-add-end');
ct.addEventListener('click',function(e){
if(e.target.tagName.toLowerCase()==='li'){
console.log(e.target.innerText);
}
})
btnAddStart.addEventListener('click',function(){
if(iptAdd.value.length!==0){
var newLi=document.createElement('li');
newLi.innerText=iptAdd.value;
ct.insertBefore(newLi,ct.firstChild);
}
})
btnAddEnd.addEventListener('click',function(){
if(iptAdd.value.length!==0){
var newLi=document.createElement('li');
newLi.innerText=iptAdd.value;
ct.appendChild(newLi);
}
})
</script>
</body>
</html>
题目7： 补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。
3.png
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="task">
<meta charset="urf-8">
<title>JS Bin</title>
<style>
</style>
</head>
<body>
<ul class="ct">
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">鼠标放置查看</li>
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg">鼠标放置查看</li>
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg">鼠标放置查看</li>
</ul>
<div class="img-preview"></div>
<script>
var ct = document.querySelector('.ct'),
childs = ct.querySelectorAll('li'),
preview = document.querySelector('.img-preview');
for(var i = 0; i < childs.length; i++){
childs[i].addEventListener('mouseenter',function(){
var dataImg = this.getAttribute('data-img');
preview.innerHTML = ''
});
}
</script>
</body>
</html>
题目8： 写一篇博客，讲解事件相关知识点，如事件冒泡、捕获、代理、兼容写法等(选做题目)
网友评论