事件

//事件流测试
<!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主要有几个区别

  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（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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 211,948评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,371评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,490评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,521评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,627评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,842评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,997评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,741评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,203评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,534评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,673评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,339评论 4赞 330
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,955评论 3赞 313
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,770评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,000评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,394评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,562评论 2赞 349

推荐阅读更多精彩内容

  • Dom、事件
    问答 一、dom对象的innerText和innerHTML有什么区别？ innerTextinnerText是一...
    婷楼沐熙阅读 400评论 0赞 0
  • DOM事件
    题目1： DOM0 事件和DOM2级在事件监听使用方式上有什么区别？ Dom0级Dom0级事件处理程序是将一个函数...
    QQQQQCY阅读 316评论 0赞 0
  • 事件
    1.DOM0 事件和DOM2级在事件监听使用方式上有什么区别？ DOM0：在DOM0级事件处理程序，事件名以'on...
    saintkl阅读 240评论 0赞 0
  • 事件
    事件 JavaScript和HTML的交互是通过事件实现的。JavaScript采用异步事件驱动编程模型，当文档、...
    徐国军_plus阅读 572评论 0赞 2
  • JavaScript的DOM事件操作
    DOM0 事件和DOM2级在事件监听使用方式上有什么区别？ DOM0事件有两种写入事件 在标签内写onclick事...
    柏龙阅读 240评论 0赞 2