js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍

JS鼠标点击事件在各个浏览器中的写法及Event对象属性介绍

鼠标点击事件是Web开发中使用最频繁的交互功能之一,其中又以JavaScript作为事件的绑定和处理工具最为常见。本文将介绍js鼠标点击事件在各个浏览器中的写法以及Event对象属性介绍。

鼠标点击事件写法介绍

基础事件绑定及处理函数

  • 首先,我们需要了解在各个浏览器中的鼠标点击事件绑定函数,其中addEventListener是标准事件绑定函数,不同的浏览器可能有不同的函数。
// 添加鼠标点击事件监听,绑定函数为clickEvent
if(document.addEventListener) {
    document.addEventListener('click', clickEvent);
} else if(document.attachEvent) {
    document.attachEvent('onclick', clickEvent);
}
  • 鼠标点击事件处理函数

事件处理函数是在相应事件发生时执行的函数。在鼠标点击事件中,事件处理函数会包含一个事件对象event,我们可以通过该对象获取鼠标点击位置、按键等信息。

function clickEvent(event) {
    // 取消事件默认行为
    event.preventDefault();
    // 获取点击位置
    var x = event.pageX;
    var y = event.pageY;
    // 获取按键状态
    var leftClicked = event.button === 0;
    var rightClicked = event.button === 2;
}

事件委托及冒泡

  • 事件委托

事件委托是一种事件处理的优化技术,它可以将多个子元素的相同事件委托给它们的父元素处理,以减少事件处理函数的数量,并提高性能和维护性。

// 点击元素添加一个子元素,并触发点击事件
var parent = document.getElementById('parent');
parent.addEventListener('click', function(event) {
    // 防止事件冒泡
    event.stopPropagation();
    if(event.target.className === 'btn-add') {
        var child = document.createElement('div');
        child.className = 'child';
        parent.appendChild(child);
        // 触发子元素的点击事件
        child.click();
    }
});

// 每个子元素绑定的点击事件
document.addEventListener('click', function(event) {
    if(event.target.className === 'child') {
        console.log('click on child');
    }
});
  • 事件冒泡

事件冒泡是指事件在触发元素后,会一层层向外冒泡传递到它的父元素,直至document对象为止。我们可以利用这一机制来进行事件委托。

// 添加多个元素并绑定点击事件
var elements = document.getElementsByTagName('div');
for(var i=0; i<elements.length; i++) {
    elements[i].addEventListener('click', function(event) {
        console.log('click on ' + this.id);
    });
}

Event对象属性介绍

  • button

button属性可以获取鼠标按键的状态,返回值为0、1或2,分别表示左键、中键和右键。

if(event.button === 0) {
    console.log('left button clicked');
} else if(event.button === 1) {
    console.log('middle button clicked');
} else if(event.button === 2) {
    console.log('right button clicked');
}
  • pageX, pageY

pageX和pageY属性可以获取鼠标点击位置的坐标,相对于文档的左上角。

var x = event.pageX;
var y = event.pageY;
  • target

target属性可以获取事件的触发元素。

var targetElement = event.target;
  • stopPropagation()

stopPropagation()方法可以取消事件的进一步传递,防止事件冒泡。

event.stopPropagation();

示例说明

下面是两个鼠标点击事件的实例:

实例1

在这个案例中,我们创建了一个按钮,当用户点击按钮时,文本会在网站的顶部添加一行显示该动作的内容。

<!DOCTYPE html>
<html>
<head>
    <title>JS鼠标点击事件绑定实例</title>
    <script>
        function handleClick(event) {
            var newLine = document.createElement('p');
            newLine.innerHTML = 'Button is clicked.';
            document.body.insertBefore(newLine, document.body.firstChild);
        }

        function init() {
            var btn = document.getElementById('myButton');
            btn.addEventListener('click', handleClick);
        }

        window.addEventListener('load', init);
    </script>
</head>
<body>
    <button id="myButton">点击我</button>
</body>
</html>

实例2

在这个案例中,我们将创建一个元素,其名为container,我们将在内部放置几个嵌套的元素,然后监听来自于用户的每一次点击事件。所有点击事件都会被处理返回,也就是我们会在控制台上看到点击的信息。

<!DOCTYPE html>
<html>
<head>
    <title>JS鼠标点击事件委托实例</title>
    <script>
        function handleClick(event) {
            var elem = event.target;
            console.log(elem.tagName + ' was clicked!');
        }

        function init() {
            var container = document.getElementById('container');
            container.addEventListener('click', handleClick);
        }

        window.addEventListener('load', init);
    </script>
</head>
<body>
    <div id="container">
        <div>
            <button>点击</button>
        </div>
        <div>
            <a href="#">链接</a>
        </div>
    </div>
</body>
</html>

总结

本文介绍了js鼠标点击事件在各个浏览器中的写法以及Event对象属性介绍。如果您掌握了这些知识并且在实践中熟练应用,将会大大提高您的网站开发效率并且改善用户的交互效果。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 用javascript实现读取txt文档的脚本

    以下是用Javascript实现读取txt文档的脚本的攻略。 1. 读取txt文档的基本知识 在Javascript中通过AJAX技术读取txt文档是一种常见的操作。需要使用XMLHttpRequest对象来实现,其核心方法是open()和send()。open()方法用于打开HTTP调用方式,send()方法将HTTP请求发送服务器。 读取txt文档的过程…

    JavaScript 2023年5月27日
    00
  • 常用的js方法合集

    常用的JS方法合集 本篇攻略主要讲解常用的JS方法合集,包括字符串、数组、日期、正则表达式等方面的常用方法。 字符串方法 字符串是JS中最为常见的数据类型之一,在日常开发中经常需要对字符串进行操作。下面列出一些常用的字符串方法: string.length 用于获取字符串的长度,即包含的字符数。 javascript var str = “Hello Wor…

    JavaScript 2023年5月18日
    00
  • JavaScript页面倒计时功能完整示例

    我将为您详细讲解如何实现Javascript页面倒计时功能的完整攻略,下面是完整步骤: 步骤一:准备工作 首先,在HTML页面中创建一个空白的 元素,用于展示倒计时。我们可以通过HTML代码将其嵌入到我们的页面中。 <div id="countdown"></div> 接下来,在JavaScript脚本中,我们需要…

    JavaScript 2023年5月27日
    00
  • 关于JavaScript中的数组方法和循环

    关于JavaScript中的数组方法和循环,我们可以从下面几个方面来进行详细讲解。 数组方法 push方法 push方法可以将一个或多个值添加到数组的末尾,并返回修改后的数组长度。示例代码如下: let fruits = [‘apple’, ‘banana’]; let len = fruits.push(‘orange’); console.log(fru…

    JavaScript 2023年5月18日
    00
  • 详解js location.href和window.open的几种用法和区别

    下面是“详解js location.href和window.open的几种用法和区别”的完整攻略。 一、前言 在前端开发中,有时候我们需要通过JS来控制浏览器的跳转或打开新窗口等操作,而其中常用的方法就是location.href和window.open。这两个方法虽然都是用来进行页面跳转或打开新窗口,但它们之间还是存在一些区别的。本文将详细讲解JS中loc…

    JavaScript 2023年6月11日
    00
  • 深入理解前端字节二进制知识以及相关API

    当前,前端对二进制数据有许多的API可以使用,这丰富了前端对文件数据的处理能力,有了这些能力,就能够对图片等文件的数据进行各种处理。本文将着重介绍一些前端二进制数据处理相关的API知识,如Blob、File、FileReader、ArrayBuffer、TypeArray、DataView等等。 字节 在介绍各种API之前,我们需要先了解下和字节有关的知识。…

    JavaScript 2023年5月10日
    00
  • JavaScript 选中文字并响应获取的实现代码

    以下是JavaScript选中文字并响应获取的实现攻略: 1. 使用window.getSelection()方法获取选中文字 在JavaScript中,我们可以使用window.getSelection()方法来获得页面中当前选中的文字。该方法返回一个 Selection 对象,它表示用户选择的文本范围。我们可以根据需要对该对象进行各种操作,例如获取选中的…

    JavaScript 2023年6月11日
    00
  • javascript 面向对象编程 function是方法(函数)

    当我们用JavaScript进行面向对象编程时,我们通常会使用对象和方法。对象是一个具有属性和方法的实体,而方法则是定义在对象中的函数。 在JavaScript中,通过使用构造函数和原型来创建对象和方法。构造函数是一个特殊的函数,它用于创建一个新的对象,而原型则用于定义对象的方法和属性。让我们来看一下一个简单的例子: // 创建构造函数 function P…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部