JS事件

题目1:

DOM0 事件和DOM2级在事件监听使用方式上有什么区别?

  • DOM0级事件处理方式:
    通过JavaScript制定事件处理程序的传统方式。就是将一个函数赋值给一个事件处理属性,第四代web浏览器出现,至今为所有浏览器所支持。
    var btn = document.getElementById("btn");

    btn.onclick = function(){
      console.log("I am clicked");
    }  // 设置事件

    btn.onclick = null;  // 删除事件

优点: 简单,兼容性好。
缺点: 一个事件处理程序只能对应一个处理函数,设置第二个事件时候,因为是赋值,所以第二个事件会覆盖第一个事件。

  • DOM2级事件处理方式
    DOM2级事件处理方式指定了,添加事件处理程序和删除事件处理程序的方法
    addEventListener(eventName,func,isPuhuo);     //添加事件
    removeEventListener(eventName,func,isPuhuo);  //删除事件
/*参数分别是,事件处理属性名称,处理函数,是否在捕获时执行事件处理函数,
默认是false,即在冒泡阶段执行
*/

应用举例

    var btn = document.getElementById("btn");
    var cancel = document.getElementById("cancel")
    function fn(){
      console.log("I am clicked 123");
    }
    btn.addEventListener("click",fn)  //点击btn事件,执行函数fn
    cancel.addEventListener("click",function(){
      btn.removeEventListener("click",fn)
    })  //点击cancel事件,执行删除btn的绑定事件

注:
(a) eventName的值均不含on,例如注册鼠标点击事件eventName为“click”
(b) 处理函数中的this依然指的是指当前dom元素
(c) 通过addEventListener添加的事件处理程序,只能通过removeEventListener来删除,也就是说通过addEventListener添加的匿名函数将无法被删除。

题目2:

attachEvent与addEventListener的区别?

  • 参数个数不相同,这个最直观,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) 停止。
  • DOM2级事件传播:有3个阶段:
  • 捕获阶段:事件从document向子元素一层层传递,直到目标元素
  • 处于目标阶段:此时事件发生在目标元素上,被看做冒泡的一部分
  • 冒泡阶段:和IE冒泡一样,从目标元素向父级元素传递,直到document停止。

题目4:

如何阻止事件冒泡? 如何阻止默认事件?

  • 标准浏览器
    stopPagation() 阻止事件冒泡
    preventDefault() 阻止默认事件
  • IE浏览器
    cancelBubble 设置为true来阻止事件冒泡
    returnValue 设置为false来阻止默认事件

题目5:

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

  <ul class="ct">
      <li>这里是</li>
      <li>饥人谷</li>
      <li>前端6班</li>
  </ul>
  <script>
      function $(str){
        return document.querySelector(str)
      }
      $(".ct").addEventListener("click",function(e){
        if(e.target.tagName.toLowerCase()==="li"){
          console.log(e.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>
    function $(str) {
        return document.querySelector(str)
    }
    var ul = $(".ct")
    var input = $(".ipt-add-content")
    var btnStart = $("#btn-add-start")
    var btnEnd = $("#btn-add-end")

    ul.addEventListener("click", function(e) {
        if (e.target.tagName.toLowerCase() === "li") {
            console.log(e.target.innerText);
        }
    })

    btnStart.addEventListener("click", function() {
        var newLi = document.createElement("li")
        newLi.innerText = input.value;
        if (newLi.innerText === "") {
            alert("please input content");
        } else {
            ul.insertBefore(newLi, ul.firstChild);
        }
    })

    btnEnd.addEventListener("click", function() {
        var newLi = document.createElement("li")
        newLi.innerText = input.value;
        if (newLi.innerText === "") {
            alert("please input content")
        } else {
            ul.appendChild(newLi, ul);
        }
    })
</script>

题目7:

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

<body>
    <ul class="ct">
        <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg">鼠标放置查看图片1</li>
        <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg">鼠标放置查看图片2</li>
        <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg">鼠标放置查看图片3</li>
    </ul>
    <div class="img-preview"></div>
    <script>
        function $(str) {
            return document.querySelector(str)
        }

        function $$(str) {
            return document.querySelectorAll(str)
        }

        var ct = $(".ct")
        var li = $$(".ct>li")
        var preview = $(".img-preview")

        ct.addEventListener("mouseover", function(e) {
            if (e.target.tagName.toLowerCase() === "li") {
                var dataImg = e.target.getAttribute("data-img");
                preview.innerHTML = '<img src = \"' + dataImg + '\">'
            }
        })
    </script>
</body>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容

  • 1:DOM0事件和DOM2级在事件监听使用方式上有什么区别? 浏览器端的JavaScript采用的是事件驱动的异步...
    饥人谷_bigJiao阅读 265评论 0 0
  • 饥人谷事件课件 1.DOM0 事件和DOM2级在事件监听使用方式上有什么区别? DOM0事件有两种:一是在标签内写...
    饥人谷_米弥轮阅读 248评论 0 0
  • 一、DOM0 事件和DOM2级在事件监听使用方式上有什么区别? DOM0级事件 了解DOM0级事件之前,先了解下H...
    任少鹏阅读 230评论 0 1
  • 1: DOM0 事件和DOM2级在事件监听使用方式上有什么区别? DOM0级事件监听就是把一个方法赋值给一个元素的...
    高进哥哥阅读 120评论 0 0
  • 简单理解事件是用户或浏览器自身执行的某种动作。诸如click、load而事件处理程序则是响应某个事件的函数。诸如o...
    Miss____Du阅读 787评论 7 6