【JS、三】DOM高级

文章目录

        • 注册事件
        • 事件对象
          • 方法:
          • 阻止行为:
          • 阻止冒泡:
        • 常用的鼠标事件
          • 鼠标移动事件:
        • 键盘事件
          • 松开时触发:
          • 按下时触发:
        • 键盘时间对象
          • 案例1:
          • 案例2:

注册事件


  • 传统注册事件
    • 同一个元素多个事件,后面会把前面覆盖
  • 监听注册事件
    • addEventListener()他是一个方法
    • 里面的事件类型是字符串,必定加引号,而且不带on
    • 同一个元素 同一个事件可以添加多个监听器

【JS、三】DOM高级_第1张图片

body>
<button>99</button>

<script>
var bb = document.querySelector('button');
bb.addEventListener('click',function (){
    alert(666)
})

</script>
</body>
  1. 第三个参数:true捕获阶段
    1. false 冒泡阶段

事件对象


<body>
<button>99</button>

<script>
var bb = document.querySelector('button');
bb.onclick=function (event){
    alert(event)
}

</script>
</body>
  1. event 就是一个事件对象,写到我们侦听函数的 小括号里面,当形参来看
  2. 事件对象只有有了事件才会存在,他是系统给我们自动创建的,不需要我们传递参数
  3. 事件对象 是 我们事件的一系列相关数据的集合,根据事件相关的 比如鼠标点击里面就包含了鼠标相关的信息,鼠标坐标啊
  4. 这个时间对象,我们可以自己命名
  5. 时间也是有兼容性问题
方法:

【JS、三】DOM高级_第2张图片

<body>
<button>99</button>

<script>
var bb = document.querySelector('button');
bb.onclick=function (event){
    //target 返回的是触发事件的对象,this返回是绑定事件的对象
   //target谁点击了返回谁,this谁绑定了返回谁
    console.log(event.target)
}

</script>
</body>
阻止行为:
var bb = document.querySelector('button');
bb.onclick=function (e){
    
    //1
    e.preventDefault();
    
    //2低版本浏览器
    e.returnValue;
    
    //3
    return false;
    
}
阻止冒泡:
var bb = document.querySelector('button');
bb.addEventListener('click',function (e){
	//stop停止
    e.stopPropagation();
    //2
    e.canaelBubble=true;
})

常用的鼠标事件


  • 禁止鼠标右键菜单
  • contextmenu
<body>
<button>99</button>

wowowowo
<script>
document.addEventListener('contextmenu',function (e){
    e.preventDefault();
})


</script>
</body>
</html>
  • 禁止选中文字
  • swlwctstart
document.addEventListener('swlwctstart',function (e){
    e.preventDefault();
})

【JS、三】DOM高级_第3张图片

鼠标移动事件:
  • mousemove
  • 首先一定要将图片绝对定位
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
img{
    width: 50px;
    height: 50px;
    position: absolute;
}

  </style>
</head>
<body>
<img src="9.jpg">
<script>
    //获取图片
    var qq = document.querySelector('img');
//添加事件
document.addEventListener('mousemove',function (e){
    //获取x坐标
    var x = e.pageX;
    //获取y坐标
    var y = e.pageY;
    //赋给图片
    qq.style.left=x+'px';
    qq.style.top=y+'px';
})

</script>
</body>
</html>

键盘事件


【JS、三】DOM高级_第4张图片

松开时触发:
document.addEventListener('keyup',function (e){
    console.log('我弹起来')
})
按下时触发:
document.addEventListener('keydown',function (e){
    console.log('我弹起来')
})

【JS、三】DOM高级_第5张图片

键盘时间对象


【JS、三】DOM高级_第6张图片

案例1:

键盘按s,获取文本框的焦点

【JS、三】DOM高级_第7张图片

案例2:

【JS、三】DOM高级_第8张图片

你可能感兴趣的:(前端,javascript,前端,开发语言)