事件

2017-06-30 本文已影响22人 hhg121

//事件流测试
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    #xxx {
  
  width: 200px;
  height: 200px;
  padding: 10px;
}
div {
  box-sizing: border-box;
  padding: 10px;
  height: 100%;
  width: 100%;
  border: 1px solid black;
}
  </style>
</head>
<body>
<div id='xxx'>
  <div id='xx'>
    <div id='x'></div>
  </div>
</div>
  <script>
    var xxx = document.querySelector('#xxx')
xxx.addEventListener('click',function(){
  alert(3)
},false)
var xx = document.querySelector('#xx')
xx.addEventListener('click',function(){
  alert(2)
})
var x = document.querySelector('#x')
x.addEventListener('click',function(e){
  alert(1)
  e.stopPropagation()
})
  </script>
</body>
</html>

题目1： DOM0 事件和DOM2级在事件监听使用方式上有什么区别？

DOM0
DOM0事件处理程序是将一个函数赋值给事件处理程序的属性，每个元素都有自己的事件处理程序属性，这些属性都是小写，如onclick,将元素的属性值设置为一个函数，就可以为元素添加事件处理程序了，如：

var btnClick = document.getElementById('btnClick');
btnClick.onclick = function showMessage() {
  alert(this.id);
};

这样处理，事件处理程序被认为是元素的方法，事件处理程序在元素的作用域下运行，this就是当前元素，所以点击button结果是：btnClick
这样还有一个好处，我们可以删除事件处理程序，只需把元素的onclick属性赋为null即可

DOM2
DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作：
addEventListener
removeEventListener
所有的DOM节点都包含这两个方法，并且它们都接受三个参数：
1 事件类型
2 事件处理方法
3 布尔参数，如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理刚才的例子我们可以这样写：

 var btnClick = document.getElementById('btnClick');
  btnClick.addEventListener('click', function() {
    alert(this.id);
  }, false);
  btnClick.addEventListener('click', function() {
    alert('Hello!');
   }, false);

上面代码为button添加了click事件的处理程序，在冒泡阶段触发，与上一种方法一样，这个程序也是在元素的作用域下运行，不过有一个好处，我们可以为click事件添加多个处理程序
通过addEventListener添加的事件处理程序只能通过removeEventListener移除，移除时参数与添加的时候相同，这就意味着刚才我们添加的匿名函数无法移除，因为匿名函数虽然方法体一样，但是句柄却不相同，所以当我们有移除事件处理程序的时候可以这样写

var btnClick = document.getElementById('btnClick');
var handler=function() {
    alert(this.id);
}
btnClick.addEventListener('click', handler, false);
btnClick.removeEventListener('click', handler, false);

区别：

DOM0只能绑定一个事件处理方法，因为后绑定的方法会覆盖前面的方法。DOM2能绑定多个事件处理方法。

题目2： attachEvent与addEventListener的区别？

在添加事件处理程序事addEventListener和attachEvent主要有几个区别

参数个数不相同，这个最直观，addEventListener有三个参数，attachEvent只有两个，attachEvent添加的事件处理程序只能发生在冒泡阶段，addEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理（我们一般为了浏览器兼容性都设置为冒泡阶段）
第一个参数意义不同，addEventListener第一个参数是事件类型（比如click，load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）
事件处理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的触发元素，而attachEvent事件处理程序会在全局变量内运行，this是window，所以刚才例子才会返回undefined，而不是元素id
为一个事件添加多个事件处理程序时，执行顺序不同，addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按顺序的反顺序执行的，但是添加的多了就无规律了)，所以添加多个的时候，不依赖执行顺序的还好，若是依赖于函数执行顺序，最好自己处理，不要指望浏览器

题目3：解释IE事件冒泡和DOM2事件传播机制？

IE事件冒泡的流程是，当监测到一个事件发生时，事件会从目标元素开始向父级传递，直到传递到window（document）停止。这期间，如果遇到同样的事件，都会激活对应的事件处理程序
事件冒泡机制如下：

DOM事件流：DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段
事件流如下：

题目4：如何阻止事件冒泡？如何阻止默认事件？

stopPropagation()方法和preventDefault()方法

document.getElementsByTagName('a').onclick = function (e) {
    e.preventDefault();
}

document.getElementsByTagName('a').onclick = function (e) {
    e.stopPropagation();
}

题目5：有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
var node = document.querySelector('.ct');
node.onclick = function(e){
  var target = e.target;
  console.log(target.innerText);
};
</script>

题目6：补全代码，要求：

当点击按钮开头添加时在< li>这里是< /li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.
当点击每一个元素li时控制台展示该元素的文本内容。

<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 node = document.querySelector('.ct');
node.onclick = function(e){
  var target = e.target;
  if(target.nodeName.toLowerCase() === 'li'){
    console.log(target.innerText);
  }
};
var btnadda = document.querySelector('#btn-add-start');
btnadda.onclick = function(){
  var value = document.querySelector('input').value.trim();
  console.log(value);
  if(value){
    //    node.innerHTML = '<li>'+ value + '</li>' + node.innerHTML;
    var li = document.createElement('li');
    li.innerHTML = value;
    node.insertBefore(li,node.firstChild);
  }
};
var btnadde = document.querySelector('#btn-add-end');
btnadde.onclick = function(){
  var value = document.querySelector('input').value.trim();
  console.log(value);
  if(value){
    var li = document.createElement('li');
    li.innerHTML = value;
    node.appendChild(li);
  }
};
</script>

题目7：补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .img-preview img{
      width: 300px;
    }
  </style>
</head>
<body>
<ul class="ct">
    <li data-img="http://img3.imgtn.bdimg.com/it/u=3242709860,2221903223&fm=214&gp=0.jpg">鼠标放置查看图片1</li>
    <li data-img="http://pic28.photophoto.cn/20130830/0005018395479325_b.jpg">鼠标放置查看图片2</li>
    <li data-img="http://img3.imgtn.bdimg.com/it/u=2403926125,3653927506&fm=214&gp=0.jpg">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"><img src=''></div>
<script>
var ulnode = document.querySelector('.ct');
ulnode.addEventListener('click',function(e){
  console.log(1);  
  var node = e.target;
  var source = node.getAttribute('data-img');
  var img = document.querySelector('img');
  img.setAttribute('src',source);
});
</script>
</body>
</html>

事件

题目1： DOM0 事件和DOM2级在事件监听使用方式上有什么区别？

区别：

题目2： attachEvent与addEventListener的区别？

题目3：解释IE事件冒泡和DOM2事件传播机制？

题目4：如何阻止事件冒泡？如何阻止默认事件？

题目5：有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容

题目6：补全代码，要求：

题目7：补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。

猜你喜欢

热点阅读

事件

题目1： DOM0 事件和DOM2级在事件监听使用方式上有什么区别？

区别：

题目2： attachEvent与addEventListener的区别？

题目3： 解释IE事件冒泡和DOM2事件传播机制？

题目4：如何阻止事件冒泡？ 如何阻止默认事件？

题目5：有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容

题目6： 补全代码，要求：

题目7： 补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。

猜你喜欢

热点阅读

题目3：解释IE事件冒泡和DOM2事件传播机制？

题目4：如何阻止事件冒泡？如何阻止默认事件？

题目6：补全代码，要求：

题目7：补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。