JS中Event事件对象的那些事

林子酱
902 阅读3分钟

事件监听器

事件绑定  下面的会覆盖上面的！
div.onclick=function(){
  alert(1);
}
div.onclick=function(){
	alert(2);
}

事件名称 不需要加"on"  不会相互覆盖
div.addEventListener('click',function(){
	alert(1);
});

div.addEventListener('click',function(){
	alert(2);
});

取消事件监听器

function fn(){
	 alert('取消')
}

el.addEventListener('click',fn)

//绑定的事件函数 必须是命名函数！
el.removeEventListener('click',fn)

事件冒泡

<body>
  <div>
  	<p></p>
  </div>
<script>
var div=document.querySelector('div');
var p=document.querySelector('p');
 

//执行子元素事件同时，父元素如有同样事件，也会执行
//事件冒泡的执行顺序由小到大 
//p > div > body > html 

document.body.addEventListener('click',function(){
alert('body')
})

div.addEventListener('click',function(){
alert('div');
});

p.addEventListener('click',function(){
alert('p');
});


</script>
</body>

addEventListener('ev',fn,[,capture,{}])

默认第三个参数是flase(不捕获)
第四个参数还可以传递对象:{}
// capture:true/false 是否在捕获阶段执行
// once:true/false 只执行一次事件


// passive:false/true //阻止取消默认事件
这里的true表示不允许阻止(例如e.preventDefault())


div.addEventListener('click',function(){alert('div');},{once:true,passive:false});


p.addEventListener('click',function(){
alert('p');
});

取消事件冒泡

e.cancelBubble = true;
e.stopPropagation()

事件委托

<body>
<div>
  <ul>
    <li>
      <p></p>
    </li>
    <li>
      <p></p>
    </li>
    <li>
      <p></p>
    </li>
    <li>
      <p></p>
    </li>
  </ul>
</div>
<script>
// 事件委托
var ul=document.querySelector('ul');

// li点击之后背景色变黄
ul.addEventListener('click',function(e){

// 获取事件源元素
// console.log(e.target);

// 判断目标元素是否是你想添加事件的元素
// console.log(e.target.tagName) !大写

if(e.target.tagName=='LI'){
  	e.target.style.background='yellow';
  }
})
</script>
</body>

事件代理

<body>
<div class="box">
    <input type="text" id="user" value="名字" />
    <textarea id="message">加油</textarea>
    <button id="btn">提交留言</button>
    <ul id="list">
       
    </ul>
</div>
<script>
// 给按钮添加点击事件
// 创建元素 并且插入到ul列表当中
var btn=document.querySelector('#btn');
var user=document.querySelector('#user');
var message=document.querySelector('#message');
var list=document.querySelector('#list');


// 将事件添加到父级身上  - 事件委托
list.addEventListener('click',function(e){
// e.target
if(e.target.className=='clos'){
var li=e.target.parentNode;
// console.log(li);
list.removeChild(li);
}
})


btn.addEventListener('click',function(){
// 创建一个li
var li=document.createElement('li');
li.innerHTML=`
<h2 class="user">${user.value}说:</h2>
<p>${message.value}</p>
<a href="javascript:;" class="clos">删除<span>X</span></a>
`;

list.insertBefore(li,list.children[0]);
})
</script>
</body>

mouseout/mouseover

鼠标移入或者移出子元素范围mouseover和 mouseout会再次触发

mouseleave/mouseenter

mouseenter和mouseleave不受子级元素范围干扰

e.pageX/e.pageY

获取鼠标点击的位置（相对于页面左上角位置）

在页面有滚动的时候获取的也是相对于页面左上角位置

e.cilentX/e.clientY

获取鼠标点击的位置（相对于显示区域的位置）

在页面有滚动的时候获取的也是相对于显示页面左上角位置

鼠标滚轮事件

// 谷歌和ie
document.addEventListener('mousewheel',function(e){
    // e.wheelDelta
    // 滚轮向上 - > 120
    // 滚轮向下 - >  -120
    console.log(e.wheelDelta)
})



// firefox
document.addEventListener('DOMMouseScroll',function(e){
  // e.detail
  // 滚轮向上  ->  -3
  // 滚轮向下  ->  3
  console.log(e.detail)
})

鼠标滚轮事件函数封装兼容浏览器

function toWheel(el,downFn,upFn){
el.addEventListener('mousewheel',function(e){
  if(e.wheelDelta>0){
  // 向上
  upFn&&upFn.call(el)
  }else{
  // 向下
  downFn&&downFn.call(el)
  }
})
el.addEventListener('DOMMouseScroll',function(e){
  if(e.detail>0){
  // 向下  //判断函数存不存在
  downFn&&downFn.call(el)
  }else{
  // 向上
  upFn&&upFn.call(el)
  }
})
}

自定义右键菜单

// 自定义一个右键菜单
// contextmenu 鼠标右键事件
document.addEventListener('contextmenu',function(){
  // 阻止浏览器默认行为
  e.preventDefault()
  alert(1);
})

阻止默认行为

方法一：
document.oncontextmenu=function(e){
//只能在直接添加事件的写法下使用
return false;
}

双击事件

el.addEventListener('dblclick',function(){
  alert('双击了')
})

拖拽案例

// 鼠标按下 mousedown
// 鼠标移动 mousemove 不断的改变元素的top/left
// 鼠标抬起 mouseup 

<style>
  div{
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
  }
</style>

// 1. 用对象记录鼠标点击的位置
var startPos={}
// 2. 用对象元素的初始位置
var boxPos={}

//3.给目标元素添加mousedown事件
el.addEventListener('mousedown',function(e){
	//4.记录鼠标起始的位置点
	startPos.x=e.clientX;  
	startPos.y=e.clientY;
    
    
    //5.记录被拖拽物体的起始位置点
    boxPos.x=css(div,'left')  
    boxPos.y=css(div,'top')


// 6.监听鼠标移动过程中改变元素的位置
div.addEventListener('mousemove',function(e){


//7.记录移动中元素的当前实时位置
  var nowPos={
    //拖拽过程中鼠标的位置点
    x:e.clientX,  
    y:e.clientY
  }

//当前鼠标位置 - 初始鼠标位置 = 移动距离
  var dis={
    x:nowPos.x-startPos.x,
    y:nowPos.y-startPos.y
  }

  // 移动距离+元素的初始位置 = 元素最新的位置
  var newPos={
    l:dis.x+boxPos.x,
    t:dis.y+boxPos.y
  }
  

  // 修改样式,利用了mTween.js
  css(div,'top',newPos.t)
  css(div,'left',newPos.l)
})
})

keydown/keyup

// 键盘按下
document.addEventListener('keydown',function(){
  console.log('键盘按下')
})

// 键盘抬起
document.addEventListener('keyup',function(){
  console.log('键盘抬起')
})

字符串拼接用法

if(e.keyCode == 38 && e.ctrlKey){
  scale+=0.5;
  div.style.transform='scale('+scale+')';
}

表单方法

// 获取焦点时-获取焦点才能失去焦点
el.addEventListener('focus',function(){
  console.log('获取焦点时')
})


// 在失去焦点时执行-如果内容发生变化才会触发）
el.addEventListener('change',function(){
	console.log('内容改变时')
})

// 在内容发生变化时触发！
el.addEventListener('input',function(){
  console.log('当内容修改时')
})

// 提交表单事件
el.addEventListener('submit',function(e){
  e.preventDefault();
  console.log('提交事件')
})

// 重置表单事件
el.addEventListener('reset',function(){
  console.log('重置事件')
})

document.addEventListener('keydown',function(e){
// console.log(e.keyCode)
  if(e.keyCode == 13){
  // 失去焦点方法
  txt.blur();  
}
})
avatar
文章
阅读
粉丝