前端面试题——js事件

2019-07-26  本文已影响0人  葵自渡_
1、解释一下事件冒泡和事件捕获?

1、事件冒泡是IE团队提出来的,是事件开始时由最具体的元素接收,然后一层一层向上传播到较为不具体的节点。
2、事件捕获是由网景开发团队提出来的,正好与事件冒泡相反

2、如何阻止事件冒泡和默认事件?

1、对于主流浏览器以及IE9+的,e.stopPropagation()阻止事件冒泡,e.preventDefault()阻止默认行为
2、对于IE浏览器,使用e.cancelBubble = true来阻止事件冒泡,e.returnValue = false阻止默认行为

3、什么是事件委托?举个例子?

事件委托就是利用事件冒泡,在父级元素上添加事件,执行触发效果。即只指定一个事件处理程序,就可以管理某一类型的所有事件。
优点:1、代码简洁 2、减少浏览器内存占用

//例子
<body>
       <ul id="box">
           <Li>苹果</Li>
           <li>香蕉</li>
           <li>桃子</li>
       </ul>
</body>
<script type="text/javascript">
    var box = document.getElementById('box')
    box.onclick = function(e){
        alert(e.target.innerHTML)    //并没有给li绑定事件,点击谁就能获取谁
    }
</script>
4、dom0级和dom2级的事件绑定的区别?

1、dom0级后面绑定的事件会覆盖前面绑定的事件,点击的时候会执行新绑定的事件
2、dom2级不会覆盖前面绑定的事件,点击的时候所有绑定的事件会依次执行一遍
3、也就是说0级只能绑定一个事件,二级可以绑定多个

5、JavaScript的事件流模型都有什么?

1、事件冒泡流,事件捕获流,DOM事件流
2、其中DOM事件流会有三个阶段,即事件捕获阶段,处于目标阶段,事件冒泡阶段

6、DOM事件的绑定有几种方式?

1、直接在HTML便签里绑定,即HTML事件处理程序
2、获取元素,然后给元素绑定onclick属性,即DOM0级事件
3、获取元素,然后给元素绑定addEventListener(),即DOM2级事件处理程序
4、对于IE8之前的浏览器并不支持DOM2级事件,即不支持addEventListener()。可以使用attchEvent(),即IE事件处理程序

7、DOM事件中target和currentTarget的区别?

1、当事件处理程序绑定在目标元素上时,target和currentTarget,还有this是全相等的
2、当事件处理程序存在目标元素的父节点上时,target指向目标元素,而currentTarget和this全相等,都等于父元素

8、如何跨浏览器绑定原生事件?

兼容IE8
思路:1、封装一个对象EventUtil
2、创建两个方法,一个添加,一个删除
3、在方法里判断,各浏览器支持哪个方法就用哪个方法

<body>
    <div>
        <input type="button" value="按钮" id="btn">
    </div>
</body>
<script type="text/javascript">
    function showName(){
        alert('bree')
    }
    var EventUtil = {
        //添加事件
        addHandler:function(ele,type,fn){
                //DOM2级事件
            if(ele.addEventListener){
                ele.addEventListener(type,fn,false);
                //IE事件
            }else if(ele.attachEvent){
                ele.attachEvent("on"+type,fn)
                //DOM0级事件
            }else{
                ele["on"+type] = fn
            }
        },
        //删除事件
        removeHandler:function(ele,type,fn){
                //DOM2级事件
            if(ele.removeEventListener){
                ele.removeEventListener(type,fn,false);
                //IE事件
            }else if(ele.detachEvent){
                ele.detachEvent("on"+type,fn)
                //DOM0级事件
            }else{
                ele["on"+type] = null
            }
        }
    }
    var btn = document.getElementById('btn');
    EventUtil.addHandler(btn,"click",showName);
    EventUtil.removeHandler(btn,"click",showName)
</script>
9、IE和DOM事件流的区别?

1、执行顺序不一样。IE事件流就是事件冒泡,DOM事件流是先捕获,然后处于目标,然后冒泡。
2、参数不一样,IE8之前的都用attachEvent()方法,只有两个参数。DOM事件流用addEventListener()方法有三个参数。
3、事件on。attachEvent()方法第一个参数要加上on,即onclick。DOM事件流的addEventListenner()方法不用加on

11、如何开启事件捕获流?

addEventListener(type,fn,true) 第三个参数是true就可以了

10、事件绑定和普通事件有什么区别?

即DOM0级和DOM2级的区别(覆盖问题)

12、编写一个通用的事件监听函数?
上一篇下一篇

猜你喜欢

热点阅读