作业-20170120-事件


(若愚) #1

课程 PPT

  1. 事件

课程视频

课程任务

题目1: DOM0 事件和DOM2级在事件监听使用方式上有什么区别?
题目2: attachEventaddEventListener的区别?
题目3: 解释IE事件冒泡和DOM2事件传播机制?
题目4:如何阻止事件冒泡? 如何阻止默认事件?
题目5:有如下代码,要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
//todo ...
</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>
//你的代码
</script>

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

<ul class="ct">
    <li data-img="1.png">鼠标放置查看图片1</li>
    <li data-img="2.png">鼠标放置查看图片2</li>
    <li data-img="3.png">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
//你的代码
</script>

学习提示

  1. 如果觉得实现起来有困难,可以参考代码提示,一定要自己手写一遍
    1. 题目5参考
    2. 题目6参考
    3. 题目7参考

@VIP10 作业已布置


(欧晓春) #2

欧晓春


问答题:

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

  • DOM0事件监听方式有两种
    • 内联式
  • 介绍:
    内联式绑定事件是通过在HTML标签内添加事件属性进行绑定,如下例子:

<p onclick="console.log('aa')">abc</p>

又或者通过在JS中制定事件执行代码,然后添加到标签中去:

<p onclick="fn()">abc</p>
function fn(){
	alert('aa')
}

2.缺点:
①.JS代码和HTML代码耦合在一起,复用性为0,并且修改起来很麻烦;
②.存在加载顺序时间差的问题,如果HTML代码在JS代码之前加载完成,这时候用户执行事件就无效果;

  • JS指定事件处理程序
    1.介绍:
    JS指定事件处理程序是采用在JS中使用element对象的事件属性进行事件处理自定义,如下代码:

<p>abc</p>
<script>
function $(e){
        if(document.querySelectorAll(e).length > 1){
            return document.querySelectorAll(e);
        }else{
            return document.querySelector(e);
        }
    }

$('p').onclick = function(){
	alert('aa')
}
</script>
  1. 缺点:
    这样子解决了耦合性问题,但是带来了新的缺点,不能添加多个事件,如果添加多个事件的话,后添加的会覆盖前面添加的事件;
    原因:onclick是一个element对象下的属性,无法赋多个值给他;

  2. DOM2级事件
    DOM2级可以使用addEventListener进行事件添加,如下代码:

    <p>abc</p>
    <script>
    function $(e){
            if(document.querySelectorAll(e).length > 1){
                return document.querySelectorAll(e);
            }else{
                return document.querySelector(e);
            }
        }
    
    $('p').addEventListener('click', function(){alert('aa')})
  3. DOM0级和DOM2级事件的区别
    1.DOM2级可以为事件绑定多个处理程序,执行顺序为由上至下,DOM0级只能绑定一个;
    2.DOM2级使用addEventListener函数添加处理程序,DOM0级使用属性事件属性添加处理程序;
    3.DOM2级使用removeEventListener函数移除处理程序,用该方法进行移除处理程序的时候需要有一个程序的函数名;


Q2:attachEventaddEventListener的区别?

  • 区别一:参数个数不同
    attachEvent只有两个参数,addEventListener有三个参数,然后attachEvent的第一个参数事件,需要添加on+事件名,比如onclick。而addEventListener第一个参数事件只需要事件名即可;

  • 区别二:attachEvent功能不够强大
    attachEvent只能在事件冒泡阶段执行处理程序,而addEventListener的第三个参数true或者false,可以指定处理程序是在冒泡阶段还是捕获阶段执行,true是捕获阶段,false是冒泡阶段,不填写则默认值为false;

  • 区别三:处理程序执行顺序不一样
    attachEvent添加多个处理程序进行执行时候没有规律(程序少的时候按照从下到上执行,多的时候无规律);
    addEventListener添加多个处理程序执行时,按照添加的顺序执行;

  • 区别四:事件处理程序作用域不同
    attachEvent的事件处理程序处于全局作用域中,它的this指window对象;
    addEventListener的事件处理程序的作用域就是被添加的元素本身,它的this指向被添加的元素;


Q3:解释IE事件冒泡和DOM2事件传播机制?

  • IE事件冒泡
    IE事件冒泡是指事件的传递顺序是由内至外的,从具体的元素扩散到不具体的元素;

  • DOM2事件传播
    DOM2事件传播的顺序包括捕获阶段和冒泡阶段,事件的传播顺序是:先由外之内(事件捕获),再由内至外(事件冒泡);

  • 图解:


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

  • DOM2级
  • IE事件模型中

    • 如何阻止事件冒泡?
      可以对event对象下的cancelBubble进行赋值:
      cancelBubble = false:默认值,支持事件冒泡;
      cancelBubble = true:取消事件冒泡;
    • 如何阻止默认行为?
      可以使对event对象下的returnValue进行赋值:
      returnValue = true:默认值,支持默认行为;
      returnValue = false:取消默认行为;


代码题:

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

  • 方法一:事件代理

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
// 封装获取元素的方法
    function $(e){
        if(document.querySelectorAll(e).length > 1){
            return document.querySelectorAll(e);
        }else{
            return document.querySelector(e);
        }
    }
// 获取ul元素
    var ul = $('.ct');
// 设置时间,使用事件代理的方式监听目标子元素
    function handler(e){
    	var target = e.target.innerText;
    	console.log(target)
    }
// 绑定事件
    ul.addEventListener('click', handler)
</script>

代码范例

  • 方法二:循环li

<ul class="ct">
    	<li>这里是</li>
    	<li>饥人谷</li>
    	<li>前端6班</li>
	</ul>
<script>

	function $(e){
        if(document.querySelectorAll(e).length > 1){
            return document.querySelectorAll(e);
        }else{
            return document.querySelector(e);
        }
    }
    var li = $('li')
    for(var i = 0; i < li.length; i ++){
    	li[i].addEventListener('click', function(){
    		console.log(this.innerText)
    	})
    }

</script>

代码范例


Q2:补全代码,要求:

当点击按钮开头添加时在

  • 这里是
  • 元素前添加一个新元素,内容为用户输入的非空字符串;当点击结尾添加时在最后一个 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 $(e){
            if(document.querySelectorAll(e).length > 1){
                return document.querySelectorAll(e);
            }else{
                return document.querySelector(e);
            }
        }
        var start = $('#btn-add-start');
        var end = $('#btn-add-end');
        var ct = $('.ct');
        var input = $('.ipt-add-content')
        end.addEventListener('click', function(){
        	var li = document.createElement('li');
        	li.innerText = input.value;
        	ct.appendChild(li);
        	input.value = '';
        })
        start.addEventListener('click', function(){
        	var li = document.createElement('li');
        	li.innerText = input.value;
        	ct.insertBefore(li, ct.firstChild)
        	input.value = '';
        })
        ct.addEventListener('click', function(e){
        	var target = e.target;
        	console.log(target.innerText)
        })
    </script>

    代码范例


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

    <ul class="ct">
        	<li data-img="http://7xpvnv.com2.z0.glb.qiniucdn.com/a2d838c0-cfb6-4ae5-a978-f9eddd59203c">鼠标放置查看图片1</li>
        	<li data-img="http://7xpvnv.com2.z0.glb.qiniucdn.com/858058b2-74e4-42ff-b9ce-5e79d91576f3">鼠标放置查看图片2</li>
        	<li data-img="http://7xpvnv.com2.z0.glb.qiniucdn.com/dd7c746b-f0fc-4f6c-884d-35252113cf6c">鼠标放置查看图片3</li>
    	</ul>
    <div class="img-preview"></div>
    <script>
    	function $(e){
            if(document.querySelectorAll(e).length > 1){
                return document.querySelectorAll(e);
            }else{
                return document.querySelector(e);
            }
        }
        var image = document.createElement('img');
        var ct = $('.ct')
        var img = $('.img-preview')
        function handler(e){
        	var target = e.target;
        	if(target.parentNode === ct){
        		image.src = target.getAttribute('data-img');
        		img.appendChild(image)
        	}
        }
        ct.addEventListener('mouseover', handler)
    </script>

    代码范例


    (Lyndon) #3

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

    • DOM0级事件指定的事件监听使用方法是元素的方法,将一个函数赋值给一个事件处理程序,事件处理程序是在元素作用域中执行的,如以下代码所示:

    <div id="ct">
        <button id="btn">点我</button>
    </div>
    <script>
        var btn = document.getElementById("btn");
        btn.onclick = function(e){
            console.log(e);
            console.log(this.innerText);
        }
    </script>

    • DOM2级事件是一种函数调用的方法,addEventListener()removeEventListener分别用于处理添加和删除事件侦听器,这两个函数接受3个参数:要处理的事件名称、事件处理程序函数、布尔值,如以下代码所示:

    <div id="ct">
        <button id="btn">点我</button>
    </div>
    <script>
        var btn = document.getElementById("btn");
        btn.addEventListener("click", function(e){
            console.log(e);
            console.log(this.innerHTML);
        })
    </script>

    题目2:attachEventaddEventListener的区别?

    1. 适用的浏览器不同
      • addEventListener可以用在IE之外的浏览器上;IE用attchEvent这一方法来代替addEventListener所能实现的功能

    2. 参数的个数不同

      • 这是最直观的区别,addEventListener有3个参数,第三个参数可以决定添加的事件处理程序是在捕获阶段还是在冒泡阶段进行处理;attachEvent有2个参数,添加的事件处理程序只能发生在冒泡阶段

    3. 第1个参数的意义不同

      • addEventListener的第1个参数是事件类型,如:click, loadattachEvent第1个参数指定的是事件处理函数名称,如:onclick,onload

    4. 事件处理程序的作用域不同

      • addEventListener的作用域是元素本身,this指的是触发的元素;attachEvent事件处理程序会在全局变量运行,this指的是window

    5. 为一个事件添加多个事件处理程序时,执行顺序不同

      • addEventListener添加事件处理程序后会按照添加顺序执行;attachEvent添加多个事件处理程序时执行无顺序

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

    • IE事件冒泡:事件开始由最具体的元素接收,然后逐级向上传播到较为不具体的元素,如以下代码所示:

    <div id="ct">
        <button id="btn">点我</button>
    </div>
    <script>
        var document = document.documentElement;
        document.addEventListener("click", function(e){
            console.log(e);
        });
    
        var body = document.body;
        body.addEventListener("click", function(e){
            console.log(e);
        });
    
        var div = document.getElementById("ct");
        div.addEventListener("click", function(e){
            console.log(e);
        });
    
        var button = document.getElementById("btn");
        button.addEventListener("click", function(e){
            console.log(e);
        });
    </script>

    • DOM2事件传播机制:包括三个阶段:1)事件捕获阶段 2)处于目标阶段 3)事件冒泡阶段。首先是发生事件捕获,为截取事件提供机会,然后进入实际目标接收事件,最后进入冒泡阶段

    <div id="ct">
        <button id="btn">点我</button>
    </div>
    <script>
        var a = "";
        var document = document.documentElement;
        document.addEventListener("click", function(e){
            console.log(this);
        });
    
        var body = document.body;
        body.addEventListener("click", function(e){
            console.log(this);
        });
    
        var div = document.getElementById("ct");
        div.addEventListener("click", function(e){
            console.log(this);
        });
    
        var button = document.getElementById("btn");
        button.addEventListener("click", function(e){
            console.log(this);
        });
    </script>

    题目4:如何阻止事件冒泡? 如何阻止默认事件?

    • 阻止事件冒泡:stopPropagation()方法,如以下代码所示:

    <div id="ct">
        <button id="btn">点我</button>
    </div>
    <script>
        var a = "";
        var document = document.documentElement;
        document.addEventListener("click", function(e){
            console.log(this);
        });
    
        var body = document.body;
        body.addEventListener("click", function(e){
            console.log(this);
        });
    
        var div = document.getElementById("ct");
        div.addEventListener("click", function(e){
            e.stopPropagation();
        });
    
        var button = document.getElementById("btn");
        button.addEventListener("click", function(e){
            console.log(this);
        });
    </script>

    • 阻止默认事件:preventDefault方法,如以下代码所示阻止点击a标签后的跳转

    <div id="ct">
        <a href="http://www.jirengu.com" id="link">饥人谷</a>
    </div>
    <script>
        var link = document.querySelector("#link");
        link.addEventListener("click", function(e){
            e.preventDefault();
            console.log("这里是饥人谷的网站");
        })
    </script>

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

    <ul class="ct">
        <li>这里是</li>
        <li>饥人谷</li>
        <li>前端6班</li>
    </ul>
    <script>
        var choose = document.querySelectorAll("li");
        choose.forEach(function(element){
            element.addEventListener("click", function(){
                console.log(this.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 container = document.querySelector(".ct");
        var choose = document.querySelectorAll("li");
        var content = document.querySelector(".ipt-add-content");
        var head = document.querySelector("#btn-add-start");
        var foot = document.querySelector("#btn-add-end");
        choose.forEach(function(li){
            li.addEventListener("click", function(){
                console.log(this.innerText);
            });
        });
        head.addEventListener("click", function(){
            var li = document.createElement("li");
            li.innerText = content.value;
            container.insertBefore(li, container.firstChild);
        });
        foot.addEventListener("click", function(){
            var li = document.createElement("li");
            li.innerText = content.value;
            container.appendChild(li);
        });
    </script>

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

    <ul class="ct">
        <li data-img="1.jpg">鼠标放置查看图片1</li>
        <li data-img="2.jpg">鼠标放置查看图片2</li>
        <li data-img="3.jpg">鼠标放置查看图片3</li>
    </ul>
    <div class="img-preview"></div>
    <script>
        var pics = document.querySelectorAll("li");
        var preview = document.querySelector(".img-preview");
        pics.forEach(function(li){
            li.addEventListener("mouseenter", function(){
                var pic = this.outerHTML.toString().match(/[0-9]\.jpg/)[0];
                preview.innerHTML = "<img src =" + pic + ">";
            })
        });
    </script>
    • 鼠标放置在第1个li

    • 鼠标放置在第2个li

    • 鼠标放置在第3个li

    本题更多元的实现方法


    (joyside) #5

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

    DOM0级

    1. 通过给HTML元素的属性指定函数

    2. 通过JavaScript添加DOM0事件处理程序

    DOM2级

    1. addEventListener()和removeEventListener()

    2. attachEvent()与detachEvent()

    题目2: attachEvent与addEventListener的区别?

    1. 参数个数不相同,addEventListener有三个参数,attachEvent只有两个,attachEvent添加的事件处理程序只能发生才冒泡阶段,addEventListener第三个参数可以决定添加的事件处理函数是事件捕获阶段还是事件处理阶段(为了浏览器兼容性一般都设置为冒泡阶段)

    2. 事件处理函数的作用域不相同,addEventListener的作用域是元素本身,this是指的触发元素,而attachEvent事件处理程序会在全局变量内运行,this是window.

    3. 为同一个时间添加多个事件处理函数的时候,执行顺序不同.addEventListener添加会按照添加顺序执行,attacthEvent添加多个事件处理程序的时候顺序没有规律(少的时候大多是添加顺序的反顺序执行的)

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

    • IE的事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的元素

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

    题目4:如何阻止事件冒泡? 如何阻止默认事件?

    • e.stopPaopagation()方法可以停止事件在DOM层次的传播,即取消进一步的事件捕获或冒泡。

    • 要阻止事件的默认行为,可以使用preventDefault()方法

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

    <ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
    </ul>
    <script>
    //todo ...
    </script>

    <ul class="ct">
        <li>这里是</li>
        <li>饥人谷</li>
        <li>前端6班</li>
    </ul>
    <script>
        var lis = document.querySelectorAll('.ct>li');
        for (var i = 0; i < lis.length; i++) {
            lis[i].addEventListener('click',function(){
                console.log(this.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>
    //你的代码
    </script>

    <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 oUl = document.getElementsByClassName('ct');
    var oInput = document.querySelector('input');
    var btnAddStart = document.getElementById('btn-add-start');
    var btnAddEnd = document.getElementById('btn-add-end');
    btnAddStart.addEventListener('click',function(){
        var newDiv =  document.createElement('div');
        newDiv.innerText = oInput.value;
        oUl[0].insertBefore(newDiv, oUl[0].firstChild)
    })
    btnAddEnd.addEventListener('click',function(){
        var newDiv =  document.createElement('div');
        newDiv.innerText = oInput.value;
        oUl[0].appendChild(newDiv);
    })
    
    </script>

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

    <ul class="ct">
    <li data-img="1.jpg">鼠标放置查看图片1</li>
    <li data-img="2.jpg">鼠标放置查看图片2</li>
    <li data-img="3.jpg">鼠标放置查看图片3</li>
    </ul>
    <div class="img-preview"></div>
    <script>
    //你的代码
    var oUl = document.getElementsByClassName('ct');
    var lis = document.querySelectorAll('.ct>li');
    var imgDiv = document.getElementsByClassName('img-preview');
    lis.forEach(function (li){
        li.addEventListener('mouseenter',function(){
            var img = document.createElement('img');
            img.src = li.getAttribute('data-img');
            imgDiv[0].appendChild(img);
        })
        li.addEventListener('mouseleave',function(){
            imgDiv[0].innerHTML = '';
        })
    
    })
    </script>

    (梁树汉) #6

    1.DOM事件和DOM2级在事件监听使用方式上有啥区别?

    事件监听器也叫事件处理程序,是为了响应某个事件的方法
    - DOM事件监听方式
    1.HTML内联方式

     <input type="button" value="Click Here" onclick="alert('Clicked!')">

    2.JavaScript指定事件处理程序
    把一个方法赋值给一个元素的事件处理程序属性

    <input id="btnClick" type="button" value="Click Here2">
    <body>
    <script>
    var btnClick=document.getElementById('btnClick');
    btnClick.onclick=function shoeMessage(){
    	alert(this.id);
    }
    </script>
    • DOM2事件监听方式
      DOM2事件处理程序,定义了两个方法用于处理指定和删除事件处理程序的操作;所有的DOM方法都包含这两个方法,并且接受三个参数
      1.addEventListener
      2.removeEventListener
      参数:
      1.事件类型(click,mouseover....)
      2.事件处理方法
      3.true/false(默认值为false,冒泡阶段才触发)
        var btnClick=document.getElementById('btnClick');
        btnClick.addEventListener('click',function(){
    	alert(this.id);
        })

    2.attachEvent和addEventListener的区别是什么?

    addEventListener: 是DOM2级获取事件处理程序的方法,它包含三个参数(事件类型、事件处理方法、布尔参数true/false-默认值为false即是冒泡阶段触发)
    attachEvent:IE浏览器事件处理程序方法,同时接收两个参数:(事件处理程序名称、事件处理程序方法)

    3.解释IE事件冒泡和DOM2事件的传播机制?

    IE事件冒泡:从点击最具体的逐步往外冒泡,IE有且仅有事件冒泡机制
    DOM2级事件:包含事件捕获阶段、处于目标阶段、事件冒泡阶段,大部分浏览器都支持DOM2事件流,IE除外;它包含的三个参数(事件类型、事件方法、布尔值)中的布尔值决定了该方法在那个阶段触发;默认值false在冒泡阶段触发,true在捕获阶段触发。

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

    • IE事件模型中:
      1.如何阻止事件冒泡?
      对event对象下的cancelBubble进行赋值
      2.如何阻止默认行为?
      对event对象下的returnValue进行赋值

    • DOM2事件流中
      1.如何阻止事件冒泡?
      对event对象使用stopPropagation()方法
      2.如何阻止默认事件?
      对event对象使用preventDefault()方法

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

    <ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
    </ul>
    <script>
    //todo ...
    </script>

    代码

    function $(e){
        if(document.querySelectorAll(e).length > 1){
            return document.querySelectorAll(e);
        }else{
            return document.querySelector(e);
        }
    }
    var li = $('li')
    for(var i = 0; i < li.length; i ++){
    	li[i].addEventListener('click', function(){
    		console.log(this.innerText)
    	})
    }

    6.补全代码,要求

    • 当点击按钮开头添加时,在
    • 这里元素添加一个新元素,内容为用户输入的非法空字符串;当点击结尾添加时在最后一个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>
      //你的代码
      </script>

    代码

    // 封装一个函数,用来获取相对应的DOM-node
    function $(ele){
    if(document.querySelectorAll(ele).length>1){
    	return document.querySelectorAll(ele)
    }
    else{
    	return document.querySelector(ele)
    }
    }
    
    
    var star=$('#btn-add-start');
    var end=$('#btn-add-end');
    var content=$('.ipt-add-content');
    var ct=$('.ct');
    var li=$('.ct>li');
    
    
    
    // 点击尾部添加
    
    end.addEventListener('click',function(){
    var li=document.createElement('li');
    ct.appendChild(li);
    li.innerText=content.value;
    content.value='';  //归零清空输入框内容
    })
    
    // 点击头部添加
    
    star.addEventListener('click',function(){
    var li=document.createElement('li');
    ct.insertBefore(li,ct.firstChild);
    li.innerText=content.value;
    content.value='';
    })
    
    // 点击console文本内容
    li.forEach(function(ele){
    ele.addEventListener('click',function(){
    	console.log(ele.innerText)
        })
    
    })

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

        <ul class="ct">
        <li data-img="1.png">鼠标放置查看图片1</li>
        <li data-img="2.png">鼠标放置查看图片2</li>
        <li data-img="3.png">鼠标放置查看图片3</li>
        </ul>
        <div class="img-preview"></div>
        <script>
        //你的代码
        </script>

    代码

    function $(ele){
    		if(document.querySelectorAll(ele).length>0){
    			return document.querySelectorAll(ele);
    		}
    		else{
    			return document.querySelector(ele);
    		}
    
    	}
    
    
    	var ct=$('.ct');
    	var ImgPreview=$('.img-preview');
    	var list=$('.ct>li');
    
    
    	list.forEach(function(ele){
    
    
    		
    		ele.addEventListener('mouseenter',function(){
    			var img=document.createElement('img');
    			img.src=ele.getAttribute('data-img');
    			ImgPreview[0].appendChild(img);
    		})
    		ele.addEventListener('mouseleave',function(ele){
    			ImgPreview[0].innerHTML=''
    		})
    	})

    (李瑛) #7

    事件