javascript事件

1 DOM0 事件和DOM2级在事件监听使用方式上的区别

  • DOM0级事件处理程序被认为是元素的方法,事件处理程序在元素的作用域下运行,this就是当前元素,所以点击button结果是:btn.Click

  • 这样还有一个好处,我们可以删除事件处理程序,只需把元素的onclick属性赋为null即可

  • DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作:
    addEventListener
    removeEventListener
    所有的DOM节点都包含这两个方法,并且它们都接受三个参数:
    事件类型
    事件处理方法
    布尔参数,如果是true表示在捕获阶段调用事件处理程序,如果是false,则是在事件冒泡阶段处理

  • 通过addEventListener添加的事件处理程序只能通过removeEventListener移除,移除时参数与添加的时候相同,这就意味着刚才我们添加的匿名函数无法移除,因为匿名函数虽然方法体一样,但是句柄却不相同,可以在事件外部定义函数,然后通过函数名传入

2 attachEvent与addEventListener的区别

  • attachEvent是ie中的事件处理程序,只能用于ie中,事件处理程序只发生在冒泡阶段,执行环境是全局环境,事件处理函数中的this指向全局变量(window),为一个事件添加多个事件处理函数时,数量少按照反序执行,数量多则无序
    btn.attachEvent("onclick",function)
  • addEventListener 执行环境是添加事件的元素本身,函数内部的this指向绑定事件的元素,事件处理方式可以通过最后一个参数控制(false 事件冒泡 true 事件捕获),多个事件处理函数时按顺序执行

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

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

  • 事件捕获:不太具体的节点更早接收事件,而最具体的元素最后接收事件,和事件冒泡相反

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

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

  • 要阻止事件的默认行为,可以使用preventDefault()方法,前提是cancelable值为true,比如我们可以阻止链接导航这一默认行为
  • stopPropagation()方法可以停止事件在DOM层次的传播,即取消进一步的事件捕获或冒泡。我们可以在button的事件处理程序中调用stopPropagation()从而避免注册在body上的事件发生

5 事件对象

  • 在事件处理程序内部,this始终等同于currentTarget,而target是事件的实际目标。
  • 访问IE中的event对象有几种不同的方式,取决于指定事件处理程序的方法。直接为DOM元素添加事件处理程序时,event对象作为window对象的一个属性存在
var handler = function () {
    var e = window.event;
    alert(e.type);
}
var btnClick = document.getElementById('btnClick');
btnClick.onclick = handler;

我们通过window.event取得了event对象,并检测到了其类型,可是如果事件处理程序是通过attachEvent添加的,那么就会有一个event对象被传入事件处理程序中

var handler = function (e) {
    alert(e.type);
}
var btnClick = document.getElementById('btnClick');
attachEvent(btnClick, handler);

6跨浏览器的事件对象
虽然DOM和IE的event对象不同,但基于它们的相似性,我们还是可以写出跨浏览器的事件对象方案

function getEvent(e) {
    return e || window.event;
}

function getTarget(e) {
    return e.target || e.scrElement;
}

function preventDefault(e) {
    if (e.preventDefault)
        e.preventDefault();
    else
        e.returnValue = false;
}

function stopPropagation(e) {
    if (e.stopPropagation)
        e.stopPropagation();
    else
        e.cancelBubble = true;
}

案例

  • html,text节点创建,插入文档,input值得获取,节点获取
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<ul class="ct">
    <li>js</li>
    <li>html</li>
    <li>css</li>
</ul>
<!-- <input  placeholder="添加内容"/> -->
<input  class="ipt-add-content" type="text" name="" >
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
<script>
     var btn1 = document.getElementById("btn-add-start")
     var btn2 = document.getElementById("btn-add-end")
    
     var parent = document.getElementsByClassName("ct")[0]
     var child = parent.firstChild
     btn1.addEventListener('click',function(){
        var val = document.getElementsByClassName("ipt-add-content")[0].value
        var el = document.createElement('li')
        // var text = document.createTextNode(val)
        el.innerText = val
        // el.appendChild(text)
        // parent.appendChild(el)
        parent.insertBefore(el,child)
        console.log(val)
     })
</script>
</body>

</html>
  • 事件代理,事件目标
<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
var ct =document.getElementsByClassName('ct')[0]
ct.onclick=function(e){
    console.log(e.target.innerHTML)
}
  • 自定义属性应用,当鼠标放置在li元素上,会在img-preview里展示当前li元素的data-img对应的图片。
<ul class="ct">
    <li data-img="./img.jpg">鼠标放置查看图片1</li>
    <li data-img="2.png">鼠标放置查看图片2</li>
    <li data-img="3.png">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
    
    var show =  document.getElementsByClassName('img-preview')[0]
    var ct =  document.getElementsByClassName('ct')[0]
    ct.addEventListener('mouseover',function(e){
        show.innerHTML = ''
        var data =  document.getElementsByTagName('li')[0]
        var img = document.createElement('img')
        console.log()
        img.src = e.target.getAttribute('data-img')
        show.appendChild(img) 
    })
    
</script>

推荐阅读更多精彩内容