首页 > 其他分享 >事件对象

事件对象

时间：2023-08-08 21:58:50浏览次数：27  
标签：function obj 对象 事件 document box1 event

事件对象

介绍

  • 事件对象：当事件发生的时候，浏览器会创建一个事件对象，这个对象包含了当前事件发生时的所有信息
  • 事件对象是一个全局对象，在事件发生时，浏览器会创建一个事件对象，并把它作为实参传递给事件处理函数，事件处理函数通过事件对象， 可以获取到事件发生时的相关信息，如鼠标位置，键盘码，鼠标按键状态等
  • 鼠标事件
    • event.clientX 鼠标在可视区X轴坐标
    • event.clientY 鼠标在可视区Y轴坐标
    • event.pageX鼠标在页面的X轴坐标,IE8不支持
    • event.pageY 鼠标在页面的Y轴坐标,IE8不支持
    • event.screenX 鼠标在屏幕的X轴坐标
    • event.screenY 鼠标在屏幕的Y轴坐标
       ```js
        areaDiv.onmousemove = function(event){
      //在IE8中，响应函数被触发是，浏览器不会传递事件对象，而是作为window对象的属性保存的
        if(!event){
            event = window.event;
      }
         // event = event || window.event;
      let x = event.clientX;
      let y = event.clientY;
      showMsg.innerHTML = "x:" + x + " y:" + y;

## 事件的冒泡

- 概念: `事件冒泡（Event Bubbling）`是一种事件传播机制，当一个元素上的事件被触发后，该事件会向父元素传播，然后继续向祖先元素传播，直到到达根元素（即文档的根节点）。
- 在大多数情况下，事件的冒泡是有益的。事件冒泡的好处是，当一个元素上的事件被触发时，这个事件会 affects 更多元素，使得代码更加模块化与可维护。同时，事件冒泡可以让用户在浏览器中创建更复杂的交互行为，例如实现平滑滚动、全屏滚动等。
- 可以通过事件对象来取消冒泡 `event.cancelBubbl = true`

```html
<body>
    <div id="box1" class="div"><button id="btn" >我是btn</button>
    </div>
</body>

function myClick(elemId,fun) {
        let btn =  document.getElementById(elemId);
        btn.onclick = fun;
}
        window.onload = function(){
            myClick("box1",function(){
                alert("box1被点击...");
            });
            myClick("btn",function(){
                alert("btn被点击...");
            })
            document.body.onclick = function(){
                alert("body被点击...");
            };
        }

事件的委派

  • 概念：事件的委派指将事件绑定给元素统一的祖先元素，这样当后代元素上的事件被触发是，会冒泡到祖先元素，从而通过祖先元素来处理事件。
  • 事件委派的工作原理是，当一个子元素上的事件被触发时，事件处理程序会先检查事件是否在当前的DOM中，如果不是，则继续检查父元素上的事件处理程序。这样，当子元素上的事件被触发时，事件处理程序会 affects 更多元素，使得代码更加模块化与可维护。事件委派利用了事件冒泡，减少了事件绑定次数，提高了程序的性能。
  • event.target指触发事件的对象
<button type="button" id="btn">添加超链接</button>
    <ul id="ul">
        <li ><a href="javascript:;" class="link">超链接</a></li>
        <li ><a href="javascript:;" class="link">超链接</a></li>
        <li ><a href="javascript:;" class="link">超链接</a></li>
    </ul>

window.onload = function(){
            var btn = document.getElementById("btn");
            // 添加超链接
            btn.onclick = function(){
                let li = document.createElement("li");
                li.innerHTML = "<li ><a href='javascript:;' class='link'>新超链接</a></li>";
                ul.appendChild(li);
            }
            // 事件委派
            var ul = document.getElementById('ul');
            ul.onclick = function(e){
                var event = e || window.event;
                var target = event.target || event.srcElement;
                if(target.className == 'link'){
                    alert(target.innerText);
                }
            }
        }

事件的绑定

  • 对象.事件=函数绑定响应函数只能为一个元素的一个事件绑定一个响应函数。如果绑定了第一个，则后面的事件会覆盖前面的。
var btn = document.getElementsByTagName('button')[0];
  btn.onclick = function(){
	console.log('按钮被点击了');
}

  btn.onmouseover = function(){
	console.log('鼠标悬停在按钮上');
}
  • 在JavaScript中，可以使用addEventListener方法进行事件绑定。addEventListener方法接收三个参数：事件名称(不要加on)、事件处理程序和一个布尔值(一般为false)，表示是否使用事件冒泡。
button.addEventListener('click', function() {//\\
 console.log('按钮被点击了');
});
  • addEventListener可以绑定多个事件
button.addEventListener('click', function() {
console.log('按钮被点击了');
}, false);

button.addEventListener('mouseover', function() {
console.log('鼠标悬停在按钮上');
}, false);
  • 或者，可以使用数组将多个事件名称和事件处理程序传递给addEventListener方法：
button.addEventListener(['click', 'mouseover'], [function() {
console.log('按钮被点击了');
}, function() {
console.log('鼠标悬停在按钮上');
}], false);
  • 如果浏览器不支持 addEventListener 方法, 可以使用 attachEvent 方法替代。
  • 注意， attachEvent只有前两个参数，且执行顺序相反，后绑定先执行。attachEvent()中的this是绑定的对象，attentEvent()中this是window
var x = document.getElementById("myBtn");
if (x.addEventListener) {                    
	//所有主流浏览器，除了 IE 8 及更早 IE版本    
	x.addEventListener("click", myFunction);} 
	else if (x.attachEvent) {                  
	// IE 8 及更早 IE 版本    
	x.attachEvent("onclick", myFunction);
	}

        //obj 要绑定的对象
        //eventStr事件的字符串
        //callback 回调函数
        function bind(obj,eventStr,callback){
            if (obj.addEventListener) {
                //所有主流浏览器，除了 IE 8 及更早 IE版本  
                obj.addEventListener(eventStr, callback, false);
            }
            else if (obj.attachEvent) {
                //IE 8 及更早 IE 版本  
                obj.attachEvent('on' + eventStr, function(){
                    //在匿名函数中调用回调函数
                    callback.call(obj);
                });
            }
        }

事件的传播

  • 事件的传播
    • 事件捕获阶段：事件从最外层到最里层。此时默认不会触发事件
    • 目标阶段：事件捕获到目标元素，捕获介绍开始在目标元素上触发
    • 事件冒泡阶段：事件从最里层到最外层
    • 事件冒泡：事件从里到外，从下到上
  • 如果希望在捕获阶段就触发事件，可以将addEventListener的第三个参数设置为true(一般不推荐)。IE8以下没有捕获阶段

常用事件

  • 鼠标事件
  • 滚轮事件
    • onmousewheel鼠标滚轮滚动事件，火狐不支持
    • DOMMouseScroll火狐的鼠标滚轮滚动事件，需要通过addEventListener()绑定。addEventListener()要使用event.preventDefault()来取消浏览器默认行为（IE8浏览器不支持）
    • event.wheelDelta可获取鼠标滚轮滚动的方向，向上滚为240，向下为-240。火狐不支持
    • event.detail 可获取鼠标滚轮滚动的方向(仅火狐支持)，向上滚为-2，向下为2
window.onload = function(){  
    function bind(obj,eventStr,callback){  
        if (obj.addEventListener) {  
            //所有主流浏览器，除了 IE 8 及更早 IE版本              obj.addEventListener(eventStr, callback, false);  
        }  
        else if (obj.attachEvent) {  
            //IE 8 及更早 IE 版本  
            obj.attachEvent('on' + eventStr, function(){  
                //在匿名函数中调用回调函数  
                callback.call(obj);  
            });  
        }  
    }  
    let box1 = document.getElementById("box1");  
  
    //onmousewheel鼠标滚轮滚动事件，火狐不支持  
    box1.onmousewheel = function (event) {  
        // alert(event.wheelDelta);//获取鼠标滚动方向，火狐不支持  
        if (event.wheelDelta > 0 || event.detail < 0){  
            // alert("向上滚");  
                box1.style.height = box1.clientHeight - 10 +'px';  
  
        }else  {  
            // alert("向下滚");  
            box1.style.height = box1.clientHeight + 10 +'px';  
        }  
        //        当滚动条存在，滚动是浏览器会默认滚动  
        event.preventDefault && event.preventDefault();  
        return false;    }  
    //火狐需要使用DOMMouseScroll  
    bind(box1,'DOMMouseScroll',box1.onmousewheel);  
}
  • 键盘事件
    • onkeydown当某个键盘被按下，可以连续触发。当连续触发，第一次与第二次间隔较长，目的是防止误操作。
    • onkeyup当某个键盘被松开，不会连续触发。
    • keyCode可以获取按键的编码
    • altKey ctrlKey shiftKey 可以判断alt、ctrl、shift键是否被按下，如果按下就返回true，否则返回false
  • 键盘事件一般绑定给可以获取节点的对象或document对象
  • 如果在onkeydown中取消了默认行为，则输入的内容不会出现在文本框中(可以用来限制某些按键的输入)
          input.onkeydown = function (event) {
                event = event || window.event;
                // 判断输入框中是否输入了数字
                if (event.keyCode >= 48 && event.keyCode <= 57) {
                    return false;
                }
            }

练习

1 div随鼠标移动

  • 要求
    • 使div可以随鼠标移动
    • 即使出现滚动条，div依然可以在可见屏幕移动
  • 提示:clientX,scrollTop
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 0; */
        }
    </style>

<body style="height: 1000px;width: 2000px;">

    <div id="box1"></div>

</body>

答案：

        window.onload = function(){
            var box1 = document.getElementById("box1");
            let x = 0;
            let y = 0;
            let st = document.body.scrollTop || document.body.scrollTop;
            let sl = document.body.scrollLeft || document.body.scrollLeft;
            document.onmousemove = function(e){
                e = e || window.e;
                x = e.clientX;
                y = e.clientY;
                box1.style.left = x + sl + "px";
                box1.style.top = y + + st + "px";
            }
        }

2 拖拽

  • 要求
    • 当前鼠标在被拖拽元素上按下时，开始拖拽
    • 当鼠标移动时被拖拽元素随鼠标移动
    • 当鼠标松开时，被拖拽元素固定在当前位置
  • 问题
    • 鼠标拖动位置：可以在div中任意位置拖动
    • 浏览器的拖拽问题(ctrl+A):当拖拽网页内容时，浏览器去搜索引擎中搜索内容。如果不希望发送这种行为，可以通过return false来取消浏览器的默认行为(IE8不支持)，IE8使用setCapture方法(部分其他浏览器使用该方法是会报错，需要判断)
<style>
        #box{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
<div id="box" class="div"></div>

window.onload = function () {  
    function drag(obj) {  
        obj.onmousedown = function (e) {  
            //兼容IE8  
            // if (box.setCapture){            //     box.setCapture();            // }            // Element.setCapture() 已弃用，请改用 Element.setPointerCapture()            obj.setCapture &&  obj.setCapture();  
            // 获取鼠标在页面上的位置与元素框（例如一个 div）之间的距离  
            // e.clientX 和 e.clientY 分别表示鼠标在页面上的 x 和 y 坐标，box.offsetLeft 和 box.offsetTop 分别表示元素框相对于其父元素的左上角位置的距离  
            //div偏移量  
            let disX = e.clientX - obj.offsetLeft;  
            let disY = e.clientY - obj.offsetTop;  
            document.onmousemove = function (e) {  
                //两个e对象不一样，外面的e是事件对象，里面的e是鼠标对象  
                // 计算鼠标与元素框之间的距离  
                let l = e.clientX - disX;  
                let t = e.clientY - disY;  
                obj.style.left = l + 'px';  
                obj.style.top = t + 'px';  
            }  
            document.onmouseup = function () {  
                document.onmousemove = null;  
                document.onmouseup = null;  
                obj.releaseCapture &&  obj.releaseCapture();  
            }  
            return false;  
        }  
    }  
    let box = document.getElementById('box');  
    let  box2 = document.getElementById("box2");  
    drag(box);  
    drag(box2);  
        }

3 div随方向键移动

let box1 =  document.getElementById('box1');  
document.onkeydown = function (event) {  
  event = event || window.event;  
  let speed = 10;  
  switch (event.keyCode){  
    case 37:  
      // alert("按下了向左键");  
      box1.style.left = box1.offsetLeft - speed + 'px';  
      break;    case 38:  
      // alert("按下了向上键");  
      box1.style.top = box1.offsetTop - speed + 'px';  
      break;    case 39:  
      // alert("按下了向右键");  
      box1.style.left = box1.offsetLeft + speed + 'px';  
      break;    case 40:  
      // alert("按下了向下键");  
      box1.style.top = box1.offsetTop + speed + 'px';  
      break;  
  }  
}

标签：function,obj,对象,事件,document,box1,event
From： https://www.cnblogs.com/flblogs/p/17615471.html

相关文章

  • 《VTK图形图像开发进阶》第3章VTK基本数据结构——数据对象和数据集
    3.1可视化数据的基本特点离散性数据具有规则或不规则的结构（结构化与非结构化）数据具有维度3.2数据对象和数据集vtkDataObject下图为vtkDataObject类的继承图vtkDataSetVTK里与数据集对应的类是vtkDataSet，该类从vtkDataObject直接派生。vtkDataSet由两个部分组成，即组织......
  • 【Spring | 事件监听概述】
    本篇主要对Spring的事件监听机制简单介绍下。(事件监听)概述  ApplicationContext中的事件处理是通过ApplicationEvent类和ApplicationListener接口提供的。如果将实现该ApplicationListener接口的bean部署到上下文中，那么每当ApplicationEvent发布到ApplicationCon......
  • history对象
      ......
  • 使用ceph的对象存储
    Ceph对象存储Ceph对象存储使用Ceph对象网关守护进程（radosgw），它是个与Ceph存储集群交互的FastCGI模块。因为它提供了与OpenStackSwift和AmazonS3兼容的接口，RADOS要有它自己的用户管理。Ceph对象网关可与CephFS客户端或Ceph块设备客户端共用一个存储集群。S......
  • location对象常见属性
       ......
  • 数据查询解决列名和java对象属性名对不上——三种方法
    问题描述：当使用查询语句时，返回来的数据出现null值。下面是数据库映射文件代码查询语句：<selectid="selectCarById"resultType="com.powernode.mybatis.pojo.Car">select*fromt_carwhereid=#{id}</select>下面是返回查询返回数据 原因是：查询结果集的列名：id,c......
  • JS实现根据数组对象的某一属性排序
    一、冒泡排序（先了解冒泡排序机制）以从小到大排序为例，冒泡排序的原理就是通过两层循环把数组中两两相邻的元素进行比较，是的大的元素放到后边，元素交换位置，从而一步步的交换元素的位置，使得最大的元素放到数组的末尾，这样内部的循环就进行了一轮，再根据外部的循环依次再把次大一点的元素......
  • C++类和对象_继承
    继承概述作为面向对象的三大特性之一，继承(inheritance)是面向对象编程中代码复用的一种重要手段。继承是类设计层面的一种复用，它允许在保证原有类性质不变的基础上对其进行扩展新的属性和功能，产生新的类。例如，在类person中定义关于‘人’的基本属性和行为，以person为基础扩展......
  • ASP.NET Core对象池
    【C#/.NET】使用ASP.NETCore对象池 NugetMicrosoft.Extensions.ObjectPool 使用对象池的好处减少初始化/资源分配，提高性能。这一条与线程池同理，有些对象的初始化或资源分配耗时长，复用这些对象减少初始化和资源分配。比如:我有一个执行耗时约500毫秒，内存空间2KB的任务......
  • 类与对象
    一、面向过程和面向对象初步认识C语言是面向过程的，关注的是过程，分析出求解问题的步骤，通过函数调用逐步解决问题。C++是基于面向对象的，关注的是对象，将一件事拆分成不同的对象，靠对象之间的交互完成。二、类的引入C语言结构体中只能定义变量，在C++中，结构体内不仅可以定义变量，也可以定义......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99