事件源对象-一一网

<body>

        <div style="width:100px;height:100px;background-color:red;"></div>
<br>
        <div class="wrapper" style="width:100px;height:100px;background-color:tomato">wrapper
            <div class="box" style="width:50px;height:50px;background-color:skyblue">box</div>
        </div>

        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
        

 <!-- 拖拽 -->
<div style="width:100px;height:100px;background-color:red;position:absolute;left:0;top:0"></div>

<div style="width:100px;height:100px;background-color:red"></div> 
复制代码

<script type="text/javascript">

例1

           var div= document.getElementsByTagName('div')[0];
           div.onclick = function(event){
               var event = event||window.event;//兼容-拿到事件触发后的事件对象
               console.log(event)//对象上面的属性
           }
复制代码

事件源对象点谁事件源就是谁

event.srcElement,IE只有这个

event.target，火狐只有这个

chrome都有

例2

         var wrapper=document.getElementsByClassName('wrapper')[0];
         var box=document.getElementsByClassName('box')[0];
         wrapper.onclick = function(e) {
             var event =e|| window.event;
             var target = event.target ||event.srcElement;
             console.log(target);
         }

复制代码

事件源对象-06-23 080615.jpg

例3 点击li，输出它对应的文本内容

var li = document.getElementsByTagName('li');
var len =li.length;
for(var i = 0;i<len;i++){
    li[i].onclick = function(){
        console.log(this.innerText);
    }
}
复制代码

2)事件委托，利用事件冒泡和事件源对象进行处理

var ul = document.getElementsByTagName('ul')[0];
ul.onclick=function(e){
    var event = e||window.event;
    var target = event.target ||event.srcElement;
    console.log(target.innerText);
}
复制代码

优点：

1)性能不需要循环所有的元素一个个绑定事件

2)灵活当有新的子元素时不需要重新绑定事件

事件分类

click,mousedown,mousemove,mouseup,
contextmenu,
mouseover,mouseout,mouseenter,mouseleave

用button来区分鼠标的按键

DOM3标准规定：click事件只能监听左键，只能通过mousedown和mouseup来判断鼠标键

如何解决mousedown和click的冲突

例4，拖拽程序

var div = document.getElementsByTagName('div')[0];
var disX,
    disY;
div.onmousedown=function(e){//鼠标点下去后
    disX = e.pageX - parseInt(div.style.left);
    disY = e.pageY - parseInt(div.style.top);

    document.onmousemove = function(e) {
    var event = e||window.event;
    div.style.left = e.pageX - disX+"px";
    div.style.top = e.pageY - disY+"px";
}
}
document.onmouseup=function(){//鼠标抬起来之后
    document.onmousemove = null;
}//document作用于整个文档

复制代码

随便看看– 只有IE能用–div.setCapture();捕获任何事件到自己身上，对应div.releaseCapture
click = mousedown + mouseup

例五，按触发顺序，和绑定顺序没关系

document.onclick = function(){
    console.log('click');
}
document.onmousedown = function(){
    console.log('onmousedown');
}
document.onmouseup = function(){
    console.log('onmouseup');
}
复制代码

事件源对象，例5-06-23 192542.jpg

mouseover = mouseenter,mouseout = mouseleave
例6 鼠标覆盖与离开的效果

var div = document.getElementsByTagName('div')[0];
div.onmouseenter = function(){
    div.style.backgroundColor = "yellow";
}
div.onmouseleave = function(){
    div.style.backgroundColor = "skyblue";
}
复制代码

用button来区分鼠标的按键，左键0/中间1/右键2

DOM3标准规定：click事件只能监听左键，能区分左右键的只有mouseup和mousedown

例7

document.onmousedown = function(e) {
    if(e.button == 2) {
        console.log('right');
    }else if(e.button == 0) {
        console.log('left');
    }
}
复制代码

例8，区分点击还是拖拽。设置鼠标按下和放开的时间差

var firstTime = 0;
var lastTime = 0;
document.onmousedown = function(){
    firstTime = new Date().getTime();
    // down触发拖拽事件，document.onmousemove//点击后才绑定move事件
}

document.onmouseup = function(){
    lastTime = new Date().getTime();
    if(lastTime - firstTime <300){
        key = true;
    }
}

document.onclick = function() {
    if(key){
        console.log('click');
        key = false;
    }
}
复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端