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);
});
}
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属性可以获取鼠标点击位置的坐标，相对于文档的左上角。
var x = event.pageX;
var y = event.pageY;
target属性可以获取事件的触发元素。
var targetElement = event.target;
stopPropagation()方法可以取消事件的进一步传递，防止事件冒泡。
event.stopPropagation();
下面是两个鼠标点击事件的实例：
在这个案例中，我们创建了一个按钮，当用户点击按钮时，文本会在网站的顶部添加一行显示该动作的内容。
<!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>
在这个案例中，我们将创建一个元素，其名为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对象属性介绍。如果您掌握了这些知识并且在实践中熟练应用，将会大大提高您的网站开发效率并且改善用户的交互效果。
本文链接：http://task.lmcjl.com/news/11618.html