10-事件监听

最新推荐文章于 2024-08-24 18:51:28 发布

笨兜兜

最新推荐文章于 2024-08-24 18:51:28 发布

阅读量234

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44144457/article/details/124716502

版权

浏览器的默认行为及阻止

右键菜单

右键菜单事件- oncontextmenu

超链接
拖拽 - ondragstart
阻止默认行为

标准浏览器： event.preventDefault()
IE浏览器： event.returnValue = false;
兼容：

function preventDefault(evt){
    var e = evt || window.event;
    e.preventDefault ? e.preventDefault() : e.returnValue = false;
}

事件+函数（return false) : 既阻止默认行为，也阻止了事件冒泡。

事件监听器的添加和移除

添加事件监听器

//添加事件监听
//标准浏览器添加事件监听
//1. 参数一： 事件类型（String)
//2. 参数二： 事件处理程序
//3. 参数三： 是否进行事件捕获 （false:默认-事件冒泡)(true:事件捕获)
// o_btn.addEventListener('click',fn1,false);
// o_btn.addEventListener('click',fn2,false);
// o_btn.addEventListener('click',fn3,false);
//IE浏览器添加事件监听
//1. 参数一：事件驱动（String)
//2. 参数二：事件处理程序
// o_btn.attachEvent('onclick',fn1);
// o_btn.attachEvent('onclick',fn2);
// o_btn.attachEvent('onclick',fn3);
//兼容
function addEventListener(obj,type,fn,bool){
    //1. 初始化bool参数 ： 默认为false
    bool = bool || false;
    if(obj.addEventListener){
        obj.addEventListener(type,fn,bool);
    }else if(obj.attachEvent){
        obj.attachEvent('on' + type,fn);
    }
}

移除事件监听

//移除事件监听
//标准浏览器移除事件监听
// o_btn.removeEventListener('click',fn2,false);
//IE浏览器移除事件监听
// o_btn.detachEvent('onclick',fn2);
function removeEventListener(obj,type,fn,bool){
    //初始化bool参数为false
    bool = bool || false;
    if(obj.removeEventListener){
        obj.removeEventListener(type,fn,bool);
    }else{
        obj.detachEvent('on' + type,fn);
    }
}

事件流 (IE浏览器和欧朋浏览器不支持事件捕获) （浏览器默认开启的是事件冒泡）

事件捕获：事件依次从上到下，从根元素向子孙元素传递事件的过程。
事件目标：触发事件的事件源
事件冒泡：事件依次从下到上，从子孙元素向根元素传递事件的过程。
如何阻止事件冒泡？

标准浏览器：event.stopPropagation()
IE浏览器： event.cancelBubble = true;
兼容

function stopPropagation(evt){
    var e = evt || window.event;
    e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
}

事件委托（事件代理）（面试重点）

将原来添加到子节点上的事件，现在添加到父节点上，为了提高性能，同时解决后面动态添加元素而无法添加事件的问题。事件委托的原理是利用了事件冒泡。
如何实现事件委托?

事件添加给父节点
通过事件对象找到事件源
如果有必要，则进行过滤（nodeName,返回大写标签名)

拖拽思想（面试重点）

拖拽思想：实现拖拽，利用了三个事件。第一：鼠标在对象上按下时，记录鼠标的相对坐标值。第二：在鼠标按下的同时，进行鼠标移动，移动的过程，求出对象的移动距离（鼠标的绝对坐标值 - 鼠标的相对坐标值）。第三：在移动到目标后，抬起鼠标，取消移动。
伪代码

伪代码：
对象.onmousedown = function(){
       鼠标的相对坐标值 = event.offsetX/offsetY
       对象.onmousemove = function(){
               拖拽对象.style.left || top= 鼠标的绝对坐标值 - 相对坐标值。
      对象.onmouseup = function(){
            对象.onmousemove = null;
      }
}

拖拽的封装

function drag(selector){ //选择器
    //1. 获取页面元素
    var ele = document.querySelector(selector);
    //2. 添加事件
    ele.onmousedown = function(evt){
        //事件对象
        var e = evt || window.event;
        //获取鼠标的相对坐标值
        var dis_x = e.offsetX;
        var dis_y = e.offsetY;
        //移到事件
        document.onmousemove = function(evt){
            //事件对象
            var e = evt || window.event;
            ele.style.left = e.pageX - dis_x + 'px';
            ele.style.top = e.pageY - dis_y + 'px';
        }
        //抬起事件
        document.onmouseup = function(){
            document.onmousemove = null;
        }
        //阻止拖拽的默认行为
        document.ondragstart = function(){
            return false;
        }
    }
}