JavaScript（事件处理、鼠标、键盘事件）

最新推荐文章于 2024-06-18 19:37:48 发布

Han_Zhou_Z

最新推荐文章于 2024-06-18 19:37:48 发布

阅读量949

点赞数 1

文章标签： javascript 前端

本文链接：https://blog.csdn.net/Han_Zhou_Z/article/details/121680155

版权

（1）对比e.target和this的区别

（2）禁止鼠标右击菜单：contextmenu

（3）禁止鼠标选中：selectstart

一、事件处理

事件：用户进行的某种操作

事件源：触发事件的对象

事件处理程序（函数）：当事件被触发后所执行的操作（代码）

1、注册事件

事件的户注册：让浏览器对象能够识别事件

（1）传统方式注册

元素对象.事件名 = function(){
          事件处理程序；
}

特点：事件处理具有唯一性,同一个元素同一个事件只能注册一个处理函数,后面注册的函数会将前面注册的覆盖掉。

（2）事件监听方式

可以给同一个DOM对象同时注册多个事件处理程序（函数）

DOM对象.addEventListener(type,callback,[capture]);

type: 表示事件类型（若click、change、mouseover等）

callback：事件处理程序（函数）

capture：可选参数,默认值为false,表示在事件冒泡阶段进行处理 true,表示在事件捕获阶段处理

2、删除事件

（1）传统方式

DOM对象.事件名 = null;

（2）标准方式

DOM对象.removeEventListener(type,callback);

3、DOM事件流

定义：是指当事件发生时，会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播，这个过程称之为事件流。

（1）捕获方式：网景公司

（2）冒泡方式：微软公司

（3）先捕获后冒泡：W3C

二、事件对象

1、事件对象

事件对象（event）：是一个对象，封装了跟事件有关的所有数据。只有在事件发生时才存在，由系统自动创建。是事件处理程序（函数）

注意：因为在事件触发时就会产生事件对象，并且系统会以实参的形式传给事件处理函数。所以，在事件处理函数中需要用一个形参来接收事件对象event

<button id="btn">获取event对象</button>
<script>
  var btn = document.getElementById('btn');
  btn.onclick = function(e) {
    var event = e || window.event;    // 获取事件对象的兼容处理
    console.log(event);
  };
</script>

2、事件对象的常见属性和方法

e.target	返回触发事件的对象
e.type	事件类型
e.stopPropagation()	阻止事件冒泡
e.preventDefault()	阻止默认事件

注意：表中的type属性是标准浏览器和早期版本IE浏览器的事件对象的公有属性，通过该属性可以获取发生事件的类型，如click、mouseover等（不带on）。

（1）对比e.target和this的区别

在事件处理中e.target返回的是触发事件的对象，而this返回的是绑定事件的对象

div.onclick = function(e) {
  e = e || window.event;
  var target = e.target || e.srcElement;
  console.log(target);
}

（2）阻止默认行为

在实际开发中，为了使程序更加严谨，想要确定含有默认行为的标签符合要求后，才能执行默认行为时，可利用事件对象的preventDefault()方法和returnValue属性，禁止所有浏览器执行元素的默认行为。需要注意的是，只有事件对象的cancelable属性设置为true，才可以使用preventDefault()方法取消其默认行为。

<a href="http://www.baidu.com">百度</a>
<script>
  var a = document.querySelector('a'); // 获取a链接对象
  a.addEventListener('click', function (e) { // 注册单击事件
    e.preventDefault();      // DOM标准写法，早期版本浏览器不支持
  });
  // 推荐使用传统的注册方式
  a.onclick = function (e) {
    e.preventDefault();	// 标准浏览器使用e.preventDefault()方法
    e.returnValue;    // 早期版本浏览器（IE6、7、8）使用returnValue属  }
</script>

（3）阻止事件冒泡

可以利用事件对象调用stopPropagation()方法和设置cancelBubble属性，实现禁止所有浏览器的事件冒泡行为。

if (window.event) {		// 早期版本的浏览器
  window.event.cancelBubble = true;
} else {				// 标准浏览器
  e.stopPropagation();
}

（4）事件委托

事件委托的原理是，不给每个子节点单独设置事件监听器，而是把事件监听器设置在其父节点上，让其利用事件冒泡的原理影响到每个子节点。

简而言之，就是不给子元素注册事件，给父元素注册事件，让处理代码在父元素的事件中执行。

这样做的的优点在于，只操作了一次DOM ，提高了程序的性能。

<ul>
  <li>我是第 1 个li</li>
  // …此处省略多个<li></li>标签
</ul>
<script>
  var ul = document.querySelector('ul');
  ul.addEventListener('click', function (e) {
    e.target.style.backgroundColor = 'pink';
  });
</script>

三、鼠标事件

1、鼠标事件的常用方法

（1）鼠标事件常用方法

onclick	单击鼠标左键时触发
onfocus	获得鼠标指针焦点触发
onblur	失去鼠标指针焦点触发
onmouseover	鼠标指针经过时触发
onmouseout	鼠标指针离开时触发
onmousedown	当按下任意鼠标按键时触发
onmouseup	当释放任意鼠标按键时触发
onmousemove	在元素内当鼠标指针移动时持续触发

（2）禁止鼠标右击菜单：contextmenu

document.addEventListener('contextmenu', function (e) {
  e.preventDefault();
})

主要控制应该何时显示上下文菜单，主要应用于程序员取消默认的上下文菜单

（3）禁止鼠标选中：selectstart

selectstart事件是鼠标开始选择文字时就会触发，如果禁止鼠标选中，需要禁止该事件的默认行为

document.addEventListener('selectstart', function (e) {
  e.preventDefault();
})

2、鼠标事件对象

鼠标事件对象：MouseEvent

是跟鼠标事件相关的一系列信息的集合，可以用来获取当前鼠标的位置信息

clientX	鼠标指针位于浏览器页面当前窗口可视区的水平坐标（X轴坐标）
clientY	鼠标指针位于浏览器页面当前窗口可视区的垂直坐标（Y轴坐标）
pageX	鼠标指针位于文档的水平坐标（X轴坐标），IE 6~IE 8不兼容
pageY	鼠标指针位于文档的水平坐标（X轴坐标），IE 6~IE 8不兼容
screenX	鼠标指针位于屏幕的水平坐标（X轴坐标）
screenY	鼠标指针位于屏幕的垂直坐标（Y轴坐标）

var pageX = event.pageX || event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft)
var pageY = event.pageY || event.clientY + (document.body.scrollTop || document.documentElement.scrollTop)

3、案例（图片随着鼠标移动）

<style>
    img{
        position: absolute;
        top: 2px;
        width: 150px;
        height: 200px;
    }
</style>
<body>
    <img src="../imgs/凤霞.jpg" alt="">
    <script>
        //1、获取img对象
        var pic = document.querySelector('img');
        //2、给文档注册mousemove事件
        document.addEventListener('mousemove',function(e){
            //3、获取鼠标在页面中的坐标
            var x = e.pageX;
            var y = e.pageY;
            //4、将鼠标的坐标设置给图片
            pic.style.left = x-50+'px';
            pic.style.top = y-50+'px';
        })
    </script>
</body>

四、键盘事件

1、键盘事件的常用方法

键盘事件：是指用户在使用键盘时触发的事件

keypress	某个键盘按键被按下时触发，不识别功能键，如Ctrl、Shift、箭头等
keydown	某个键盘按键被按下时触发
keyup	某个键盘按键被松开时触发

注意：keypress事件保存的按键值是ASCII码，keydown和keyup事件保存的按键值是虚拟键码，keydown和keypress如果按住不放的话，会重复触发该对应事件。keyup和keydown事件不区分字母大小写，而keypress区分字母大小写

2、键盘事件对象

键盘事件对象：KeyBoardEvent

是跟键盘事件相关的一系列信息的集合，根据键盘事件对象中的keyCode属性可以得到相应的ASCII码值，进而可以判断用户按下了哪个键。

<body>
  <input type="text">
  <script>
    var search = document.querySelector('input');
    document.addEventListener('keyup', function (e) {
      if (e.keyCode === 83) {
        search.focus();
      }
    });
  </script>
</body>

案例：

当按下s键时，聚焦在文本框里

<body>
    搜索：<input type="text">
    <script>
        var search = document.querySelector('input');
        //2、给文档document注册keyup事件
        document.addEventListener('keyup',function(e){
            if(e.key==='s'){//if(e.keyCode==83)
                search.focus();//让文本框获得焦点
            }
        })
    </script>
</body>

Han_Zhou_Z

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript（事件处理、鼠标、键盘事件）

目录一、事件处理1、注册事件（1）传统方式注册（2）事件监听方式2、删除事件（1）传统方式（2）标准方式3、DOM事件流二、事件对象1、事件对象2、事件对象的常见属性和方法（1）对比e.target和this的区别（2）阻止默认行为（3）阻止事件冒泡（4）事件委托三、鼠标事件1、鼠标事件的常用方法（1）鼠标事件常用方法（2）禁止鼠标右击菜单：contextmenu（3）禁止鼠标选中：selectstart2、鼠标事件对.
复制链接

扫一扫